The Cabin SDK — add virtual try-on to your store

1 Paste one line

Add this tag to your site's shared layout, just before </body>, so it is on every product page. Replace YOUR_STORE_KEY with the key you receive when The Cabin is installed for your store.

<script src="https://metaaida.pages.dev/cabin.js" data-cabin-key="YOUR_STORE_KEY" async></script>

That's the whole integration on a standard product page: a gold Try it on button appears right after your Add to cart button. The script loads after your page has finished loading, so it never slows it down.

2 Where to paste it

Any HTML site

In the template every page shares (layout, footer include), just before </body>.

Shopify

Online Store → Themes → Edit code → layout/theme.liquid, just before </body>.

WooCommerce / WordPress

Your theme's footer.php, before </body> — or a header-and-footer scripts plugin, in the footer slot.

React / Vue / any SPA

In index.html, then call window.TheCabin?.refresh() after each page change (step 4).

Next.js (App Router):

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://metaaida.pages.dev/cabin.js" data-cabin-key="YOUR_STORE_KEY" strategy="lazyOnload" />
      </body>
    </html>
  );
}

3 What a product page needs

The script finds the product on its own when the page has:

<meta property="og:image"> — the main product photo (the one your customer will appear in).
<meta property="og:title"> — the product name (otherwise the page's <h1>).
An add-to-cart button whose text says Add to cart / bag / basket or Adaugă în coș.

Most stores already have all three. If yours doesn't — or you want to choose exactly what is used — mark the elements yourself; markers always win over detection:

<img data-cabin-image src="/img/linen-dress-front.jpg" alt="Linen dress">
<h1 data-cabin-name>Linen midi dress</h1>
<button data-cabin-cart>Add to cart</button>
<!-- or, to choose exactly where "Try it on" goes: -->
<div data-cabin-button></div>

Marker	Put it on
`data-cabin-image`	The main product `<img>`. On any other element, give the photo URL as the value: `data-cabin-image="https://…"`.
`data-cabin-name`	The element holding the product name, or the name as the value.
`data-cabin-cart`	Your add-to-cart button. Try it on is placed right after it.
`data-cabin-button`	An empty element: Try it on goes inside it instead.

Pages without an add-to-cart button (home, category, cart) are left alone.

4 Options and JavaScript API

Attribute	Required	What it does
`data-cabin-key`	yes	Your store key.
`data-lang`	no	Widget language: `en` (default) or `ro`.
`async`	yes	Keeps the script off your page's critical path.

Single-page apps change pages without reloading. Tell The Cabin after each navigation:

// after every client-side navigation (React Router, Vue Router, Next.js…)
window.TheCabin?.refresh();

Call	What it does
`window.TheCabin.refresh()`	Finds the product on the current page and puts Try it on next to it (removes the previous one).
`window.TheCabin.open()`	Opens the customer's Cabin (their saved looks).
`window.TheCabin.close()`	Closes it.

5 What your customers get

Try it on next to Add to cart. The first time, they make a profile with one full-body photo.
In about 20–30 seconds, your product photo turns into a photo of them wearing the piece — same background, pose and light as your photo, with their own face and body.
The look is saved in The Cabin (the tab on the side of the page) and comes back on its own when they return.
One profile works everywhere: in your store, in other stores with The Cabin, and in our browser extension.

6 Speed, styling and privacy

Starts only after your page has loaded and the browser is idle — no effect on rendering, SEO or Core Web Vitals. About 30 KB gzipped.
Everything renders inside a Shadow DOM: your CSS can't break it, and it can't touch your styles.
Customer photos go straight from the browser to The Cabin — they never pass through your servers.
Each product photo is generated once per customer; returning visits are served from cache.

If your site sends a Content-Security-Policy, allow our origin:

script-src  https://metaaida.pages.dev;
connect-src https://metaaida.pages.dev;
img-src     https://metaaida.pages.dev data: blob:;

7 Troubleshooting

You see	Do this
No button, and `[cabin] bootstrap 401` in the console	The key is missing or wrong — check `data-cabin-key`.
No button, no message	The page has no `og:image` — add it, or mark the photo with `data-cabin-image`.
The button is in the wrong place	Mark your add-to-cart button with `data-cabin-cart`, or a spot with `data-cabin-button`.
The button stays on the old product after navigating	Call `window.TheCabin.refresh()` after each page change.
Nothing loads, CSP errors in the console	Add the three CSP lines from step 6.

✦ Let your AI do it

Working with an AI coding assistant (Claude Code, Codex, Cursor, Copilot…)? Give it our integration skill — a step-by-step guide written for AI assistants — and it will add The Cabin to your store and check its own work.

Read https://metaaida.pages.dev/sdk/SKILL.md and add The Cabin SDK to this store. The store key is YOUR_STORE_KEY.

Open SKILL.md Download

Add The Cabinto your store