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

# Custom / any HTML site

> Add Wearo virtual try-on to any HTML site.

# Install on a custom or HTML site

## Prerequisites

* A Wearo account ([sign up](https://wearo.io/signup))
* Your Wearo API key ([get yours](/getting-started/api-key))
* Ability to edit your HTML or inject a script via your CMS/framework

<Steps>
  <Step title="Add the snippet to your product page template">
    Paste this just before the closing `</body>` tag on every product page:

    ```html theme={"dark"}
    <script src="https://wearo.io/widget/tryon-widget.js"></script>
    <script>
      TryOnWidget.init({
        apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
        productSelector: 'img[data-product-image]',
        brandColor: '#000000'
      });
    </script>
    ```

    The `productSelector` should match your main product image element.
    Add a `data-product-image` attribute to your image tag, or use its existing class.
  </Step>

  <Step title="Verify it works">
    Open a product page. You should see the "Try it on" button next to the
    product image. Check the browser console for `[TryOnWidget]` messages.
  </Step>
</Steps>

## For headless / SPA sites

If your product images load after the initial page render (e.g., React, Vue, Next.js),
you may need to call `TryOnWidget.init()` after the image mounts, or use the
[async loading pattern](/configure/async-loading).

## For server-side generation

Use the [Direct API](/api/authentication) to run try-ons server-side and
display results yourself, without the widget UI.

## Need help?

<Card title="Book a 30-min integration call" icon="calendar" href="https://calendly.com/wearo/integration">
  We'll set up Wearo live on your site with you.
</Card>