Sites and image hosts

Two lists on your store decide where the try-on works: the sites that may show it, and the hosts your product pictures may come from. Both are on the store's Sites and key page in the dashboard.

Sites

The try-on only opens on the addresses on your store's list of sites, and your key is only good there. That is what makes it safe for the key to sit in your page's HTML: on someone else's site it opens nothing.

An entry is an exact address: https://, then the host, and nothing after it.

You list	It covers	It does not cover
https://www.example.com	Every page on https://www.example.com	https://example.com, https://shop.example.com, http://www.example.com

List every address shoppers can reach your shop on: with and without www, a staging site, a second domain for another country. A store needs at least one.

A change takes about a minute to reach your shop.

On a site that isn't listed

The button still shows, because the script can't know the list. A tap opens a loading sheet that never fills:

1. The browser refuses to show the try-on's frame, and says so in the console.
2. After 15 seconds your page gets an error event with the code frame_timeout.
3. The console has a line from the script that names your site's address and your key.

The fix is to add the address the page is really served from. The dashboard's Install page checks this for a page you give it: Check this page.

Testing on your own machine

A site has to be https, with one exception for testing: http://localhost and http://127.0.0.1. Add the address with its port, for example http://localhost:3000, and take it off the list when you go live.

The product's picture still has to be on the public internet, because Labbesne's server fetches it. A picture served from your own machine does not work. See The picture.

The key

The key (pk_…) is public by design. It names your store and nothing else.

Rotate key on the Sites and key page makes a new key and ends the old one. Pages that still carry the old key lose the button within a couple of minutes, so paste the new tag before or straight after you rotate.

Each store has its own key. A tag with another store's key works only on that other store's sites.

Image hosts

For a try-on, Labbesne's server fetches the product's picture from the address your page gives. It fetches only from hosts your store allows. The list is Image hosts, on the store's Sites and key page.

• Your store's sites are always allowed. They are on the list already, marked Your site. A picture on https://www.example.com/… needs nothing more when https://www.example.com is one of the store's sites.
• Every other host has to be added. Many shops serve their pictures from a separate host, such as a CDN. Type its name under Allow a host and press Allow.

A store can list 20 hosts, not counting its sites. A change reaches the try-on within a minute.

What an entry looks like

An entry is a host name: no https://, no path, no port.

You allow	It covers	It does not cover
images.example.com	Pictures on images.example.com	Any other host
*.example.com	Every host under example.com, however deep: cdn.example.com, a.cdn.example.com	example.com itself

• Only the host is compared, never the path. Allowing a host allows every picture on it.
• A site's host is exact too. The site https://www.example.com allows pictures on www.example.com, and not on example.com or cdn.example.com.
• Some entries are refused: a star alone, a star in front of a single ending such as *.com, a name with no dot such as localhost, and a numeric address.
• If you paste a whole address, the dashboard keeps its host. One that carries a port is refused.
• A redirect has to stay on allowed hosts. If the picture's address redirects, each address on the way is checked, and one on a host that isn't allowed is not followed.

When a picture's host isn't allowed

Nothing is fetched and no picture is made. No credit is taken, and the try-on does not count towards a daily limit.

• The shopper is told "This item can't be tried on", with one way out: back to the product. They are told when the picture is about to be made, so they have already taken their photo.
• Your page gets an error event with the code garment_host_not_allowed.
• The dashboard writes the host down. On Sites and key, the notice Try-ons were refused lists each host with how many try-ons were refused and when the last one was, and an Allow button beside it. It keeps the ten hosts seen most recently.

Find out before a shopper does

On the store's Install page, Check this page also looks at the product picture of the page you give it. When that picture is on a host that isn't allowed, it says so, names the host, and offers a button to allow it.

The check reads the picture that the page's own product data names, in the HTML your site sends. It can't see a picture you pass in code, or product data that a script adds after the page has loaded. For those, the Try-ons were refused list is where a missing host shows up, after a shopper has tried.

Before you allow a host

• A host shared by many shops allows every picture on it, not only yours. cdn.shopify.com is one. If your pictures can be served from a host of your own, list that one.
• Read the name on the refused list first. Your key is public, so anyone can cause a refusal with a picture's address of their choosing. Allow a host because your pictures are there, not because it is on the list.
• A star is wide. *.example.com allows every host under example.com, including ones you add later.

Whatever the list says, the picture also has to be reachable from the public internet and be a JPEG, PNG or WebP. See The picture.