# Cabina — installing the virtual try-on widget on any store
Written for an AI agent configuring a merchant's store. It states the complete
integration contract. Human version, with screenshots: https://cabina.io/docs/en
## The whole integration, in one tag
```html
```
Put it anywhere inside ``, or immediately before ``. Both work:
the script is `async` and waits for `DOMContentLoaded` itself.
Add nothing else. In particular there is **no** `data-cabina` attribute, **no**
`data-product-id`, and no button for the merchant to write: Cabina injects its
own. Older documentation said otherwise; it was wrong.
Do **not** add an `integrity` attribute either. The bundle URL is not
versioned, so a pinned hash would break the widget silently at the next release.
## Two things must be true before the button appears
1. **An API key**, generated at `https://www.cabina.io/dashboard/install`. It starts with
`cab_live_`. It is public by design — it lives in the page source. Do not
treat it as a secret and do not try to proxy it server-side.
2. **The store origin is authorised**, at `https://www.cabina.io/dashboard/widget`.
With an empty list the API returns **no CORS headers**, the browser drops the
response, and the widget disappears **without an error message**.
`https://shop.com` and `https://www.shop.com` are distinct origins: add both
if both serve the storefront. Only `https` is accepted, plus
`http://localhost[:port]` for development. Maximum 50 origins.
If you cannot complete step 2, stop and tell the merchant. Everything else you
do will look installed and be inert.
## Where to paste it, per platform
### Shopify
1. In your Shopify admin, go to Online Store → Themes.
2. On your live theme, open the ⋯ menu and choose Edit code.
3. Open layout/theme.liquid.
4. Paste the snippet just before the closing tag.
5. Save. The change is live immediately — there is no theme to publish.
> Shopify emits og:image on every product page, so the garment image is found automatically.
### WooCommerce
1. In WordPress, install a code-snippet plugin (WPCode, Code Snippets) — or use your child theme.
2. Create a snippet that runs in the site header and paste the tag there.
3. Child theme instead? Add it to functions.php on the wp_head hook.
4. Save and open a product page.
> WooCommerce does not emit og:image without an SEO plugin. Cabina falls back to the gallery image — see “The garment image”.
### Wix
1. In your Wix dashboard, go to Settings → Custom Code.
2. Click Add Custom Code, paste the tag, and name it “Cabina”.
3. Under “Add Code to Pages” choose All pages, and place it in the Head.
4. Apply, then Publish the site — on Wix nothing is live until you publish.
> Wix renders product pages from its own template: if the button lands at the bottom of the page, use data-cabina-target.
### PrestaShop
1. Go to Design → Theme & Logo, then open your theme files (or use FTP).
2. Open templates/_partials/head.tpl in your active theme.
3. Paste the tag before the closing {/block} of the head block.
4. Save, then clear the cache under Advanced Parameters → Performance.
### Any other theme
1. Find the template that produces the of every page — the filename changes with the platform.
2. Paste the tag anywhere inside , or immediately before . Both work: the script is async and waits for the DOM itself.
3. Paste it once. A second copy stops itself and warns in the console, but it is still worth removing.
4. Reload a product page.
> Cabina needs no template variable, no product ID and no extra markup. One script tag is the whole integration.
## Where the button lands
The widget injects `