Embed try-on

1. 1

   Create your storeOpen the merchant dashboard and set up your store. You get a store key and a starting credit allowance.

2. 2

   Copy the snippetSet the product image, product ID and colour in the dashboard, then copy the generated iframe.

3. 3

   Paste it into your product pagePut it wherever the try-on should sit. It works in any platform that lets you add custom HTML.

1<iframe2  src="https://www.tryyon.store/embed?merchant=YOUR_STORE_KEY&garment=YOUR_PRODUCT_IMAGE_URL&product_id=SKU123"3  style="width:100%;max-width:420px;height:640px;border:0;border-radius:16px"4  allow="camera"5  title="tryyON virtual try-on"6></iframe>

The dashboard fills in your real store key and lets you preview the result before you copy. Open the dashboard.

Set these as query parameters on the iframe’s src.

merchantRequired

Your store key from the merchant dashboard. Identifies whose credits are used.

garmentRequired

URL of the product image, URL-encoded. Use a clear, front-facing shot on a plain background.

product_idOptional

Your SKU or product ID. Shows up in your usage list and in the events below.

colorOptional

Button colour as a hex value, URL-encoded (for example %234c5cff). Defaults to tryyON blue.

The embed sends messages to your page so you can track what happens. tryyon:ready fires when it loads. tryyon:result fires after each try-on, with ok set to true or false.

1<script>2  window.addEventListener("message", (e) => {3    if (e.data?.type === "tryyon:ready") {4      console.log("Try-on loaded", e.data.productId);5    }6    if (e.data?.type === "tryyon:result") {7      console.log("Shopper tried it on", e.data.productId);8    }9  });10</script>

Each shopper try-on costs 2 credits from your store’s balance, not the shopper’s. Your balance and recent try-ons are on the dashboard. When the balance runs out, shoppers see a message asking them to contact the store, so top up before that happens.

• “Could not load garment image”. The embed fetches the product image in the shopper’s browser, so the host serving it must allow cross-origin requests (an Access-Control-Allow-Origin header). Most CDNs have a setting for this.
• Camera doesn’t open on mobile. Keep allow="camera" on the iframe. Shoppers can always upload a photo instead.
• “Unknown merchant”. Check the merchant value matches the store key on your dashboard exactly.

Still stuck? Talk to us.