Skip to main content

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.

​
Install on a custom or HTML site

​
Prerequisites

  • A Wearo account (sign up)
  • Your Wearo API key (get yours)
  • Ability to edit your HTML or inject a script via your CMS/framework
1

Add the snippet to your product page template

Paste this just before the closing </body> tag on every product page:
<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.
2

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.

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

​
For server-side generation

Use the Direct API to run try-ons server-side and display results yourself, without the widget UI.

​
Need help?

Book a 30-min integration call

We’ll set up Wearo live on your site with you.