> ## 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.

# Webflow

> Add Wearo virtual try-on to your Webflow site.

# Install on Webflow

## Prerequisites

* A Wearo account ([sign up](https://wearo.io/signup))
* Your Wearo API key ([get yours](/getting-started/api-key))
* A Webflow Basic plan or higher (required for custom code embeds)

<Steps>
  <Step title="Open Webflow Designer">
    Go to your project in the Webflow Designer.
  </Step>

  <Step title="Add custom code to the site footer">
    1. Click the **W** logo → **Project Settings → Custom Code**.
    2. In the **Footer Code** section, paste the Wearo snippet.
    3. Or, for a specific page only, go to **Page Settings → Custom Code → Footer Code**.
  </Step>

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

    Adjust the `productSelector` to match your product image element class.
  </Step>

  <Step title="Publish and verify">
    Publish your site and confirm the widget appears on your product pages.
  </Step>
</Steps>

## 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>