Appearance
Get started
One line on your product page. No developer needed if your shop's theme lets you add a script.
1. Make a store
Sign in to the dashboard with your email address. The first time, it asks for your Business name and your Store address. That makes a store and its key.
The store address goes onto the store's list of sites. The try-on only opens on addresses on that list, so check it is the address shoppers really see: https://www.example.com and https://example.com are two different addresses. You can add more under Sites and key. See Sites and image hosts.
2. Paste the tag
Open the store's Install page in the dashboard and copy the tag. It looks like this, with your own key:
html
<script
async
src="https://app.labbesne.com/sdk/v1.js"
data-key="pk_your_store_key"
></script>Paste it into the template of your product page, inside <head> or just before </body>. It loads without holding up the page.
The key is public by design: it sits in your page's HTML, and it only works on your store's sites.
3. Look at a product page
Open a product page on your shop. Try it on should sit right after your Add to bag button, in the same shape and type.
If it isn't there, the script could not find one of two things:
The Add to bag button. Put this where you want the button, and the script uses it:
html<div data-labbesne-button></div>The product. The script reads the product's name and picture from the page's product data. If your pages don't have it, see Product data.
The browser's console says which one it was. Every message from the script starts with [Labbesne].
4. Check it from the dashboard
On the store's Install page, paste the address of a product page and press Check this page. It tells you whether the script is on the page, whether it carries this store's key, and whether the page is on one of the store's sites.
It also looks at where the product's picture is served from. Labbesne fetches product pictures only from your store's sites and from the hosts you allow. Many shops keep their pictures on a separate host, such as a CDN. When the check finds one, it names the host and offers a button to allow it. Allow it if it is yours. Until you do, a shopper on that product is told the item can't be tried on. See Image hosts.
After the first try-on on your shop, the store shows as Live.
5. Try it yourself
Tap Try it on, agree, take a photo, and wait for the picture. That is what your shoppers will see.
If it says "This item can't be tried on", the product's picture is on a host that isn't allowed yet. Step 4 says what to do.
Each picture made takes one credit from your account. A try-on that fails gives its credit back. See Credits and limits.
What you have now, and what needs a developer
| Works with the tag alone | Needs a few lines of code |
|---|---|
| The button next to Add to bag | A button of your own design, or in another place: Your own button |
| The product's name and picture, read from the page | The picture of the colour the shopper picked: Product data |
| The whole try-on, from photo to result | Add to bag and Checkout on the result: Add to bag and checkout |
| Events in your tag manager, if the page has one | Your own handling of each step: Events |
If your site has a Content-Security-Policy
Most shops don't set one. If yours does, the script, the frame and one request need to be allowed. See Content-Security-Policy.