> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# AI Try-On

> Open Kleep's virtual try-on from any storefront with kleep.vto.

> [!NOTE]
>
> **Prerequisites** — before implementing AI Try-On, complete the [Cookie consent](/cms/js-library#1-cookie-consent-legal-requirement) and [Installation](/cms/js-library#2-installation) steps on the [JS Library](/cms/js-library) page. Kleep must not load until the visitor has consented via your CMP, and the library must be loaded site-wide.

> [!NOTE]
>
> AI Try-On is available on demand. If you're unsure whether this feature is enabled for your account, contact your Kleep representative.

## What AI Try-On does

AI Try-On lets shoppers see products on themselves. Clicking a **Try it on** button on your product page opens the virtual try-on in a full-screen overlay: the shopper takes a selfie and a full-body photo, and Kleep generates a photorealistic image of them wearing the product. Closing the overlay brings them back to your product page.

## Product feed requirements

AI Try-On is built from the product feed you already send to Kleep — no extra file is needed. For each product, Kleep picks **one on-model photo** among its `images`, crops the model's head out of it, and generates the try-on from that photo. Your products file (see the [Product template](/data/data-transfers-template#1-product)) must meet these conditions:

| Field | What AI Try-On needs |
| - | - |
| `product_id` | The exact reference your product page passes to `kleep.load` and `kleep.vto`. Kleep matches the product on it. |
| `images` | All the product's image URLs, in the same order as on your website. At least one must be an **on-model photo**: the garment worn by a model, front view, model fully visible, **face visible**. Packshots, flat lays and back views can't be used. |
| `active` | `true` — only products live on your website are set up for try-on. |

> [!TIP]
>
> **Keep the on-model photo at the same position for every product** — for example, always the second image. Kleep can then set up your whole catalog in one go instead of picking the photo product by product.

* **Image URLs must be publicly accessible.** Kleep downloads them server-side, so no authentication or hotlink protection, and standard formats (JPEG, PNG, WebP). Use the same high-resolution image as on your product page.
* **Keep image URLs stable.** Changing a product's photo resets its try-on setup, and the product has to be activated again.
* **New products aren't picked up automatically yet.** After a collection drop, tell your Kleep representative so the new products get set up.

Once your feed is in place, your Kleep team selects the photo, crops it and activates each product from your Kleep Dashboard. Only activated products can be tried on.

## Methods

### `kleep.vto` — Open the virtual try-on

1. Add a button where you want the CTA on the product page:

   ```html theme={null}
   <button id="kleep-tryon-button">Try it on</button>
   ```

2. Call `kleep.vto` when the shopper clicks it:

   ```html theme={null}
   <script>
     document.querySelector("#kleep-tryon-button").addEventListener("click", function () {
       kleep.vto()
     })
   </script>
   ```

> [!NOTE]
>
> We leave the markup and CSS styling of the button to you. `kleep.vto` reuses the `public_id`, `product_id` and `lang` you passed to `kleep.load`, so make sure `kleep.load` ran first on the product page.

#### Parameters

All parameters are optional when `kleep.load` has been called on the page. Pass them to open the try-on for another product, or on a page where `kleep.load` isn't called:

```javascript theme={null}
kleep.vto({
  public_id: "UUID",
  product_id: "12345",
  lang: "fr"
})
```

| Parameter | Type | Description | Priority |
| - | - | - | - |
| `public_id` | UUID | The UUID provided to you during onboarding. Defaults to the value passed to `kleep.load`. | required if `kleep.load` wasn't called |
| `product_id` | string | ID of the product to try on — the same reference you pass to `kleep.load` and send in your product data. Defaults to the `product_id` of `kleep.load`; pass it explicitly if `kleep.load` received several. | required if `kleep.load` wasn't called |
| `lang` | string | Language of the try-on UI, following [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes). Supported: `en` (default), `fr`, `es`, `de`, `it`. Defaults to the `lang` passed to `kleep.load`. | optional |

#### Behaviour

* The try-on opens in a full-screen overlay on top of your page. The page behind it doesn't scroll.
* Shoppers close it with the ✕ button, the Escape key, or from inside the try-on. Only one overlay can be open at a time.
* The flow is stateless: closing the overlay discards the photos and the result.
* Camera access requires HTTPS. If your site sends a `Content-Security-Policy` header with a `frame-src` directive, add `https://vto.kleep.ai` to it.

> [!WARNING]
>
> **Product eligibility.** Only products activated for try-on (see [Product feed requirements](#product-feed-requirements)) can be tried on. The button is yours to display, so only show it on activated products — otherwise the shopper sees a "not available for this product yet" message inside the try-on.

***

## Cookies & data privacy

Kleep is fully gated by visitor consent: the script only loads **after** consent is collected through your CMP, and you must condition its loading accordingly. For the complete list of trackers, the data processed, the purposes and legal bases, hosting, subprocessors and security, see [Cookies, CMP & Data Privacy](/cookie-consent).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.