Overview

Wearo provides AI-powered virtual try-on technology that lets your customers see how clothes look on them before buying. This guide covers two integration methods:

Widget (Recommended) - Drop-in JavaScript solution for any website
Direct API - Server-to-server integration for custom implementations

Quick Start (Widget)
Direct API Reference
Billing & Credits
Troubleshooting

The Wearo Widget is the fastest way to add virtual try-on to your store. It automatically injects a “Try it on” button on your product images.

Installation

Add the following script to your HTML, preferably before the closing </body> tag:

<script src="https://wearo.io/widget.js"></script>
<script>
  TryOnWidget.init({
    apiKey: 'your_api_key_here'
  });
</script>

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>My Store - Product Page</title>
</head>
<body>
  <!-- Your product image -->
  <img 
    src="https://mystore.com/products/blue-dress.jpg" 
    alt="Blue Summer Dress"
    data-product-image
  />

  <!-- Wearo Widget -->
  <script src="https://wearo.io/widget.js"></script>
  <script>
    TryOnWidget.init({
      apiKey: 'tryonai_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      productSelector: 'img[data-product-image]',
      brandColor: '#FF5733',
      productId: 'SKU-12345'
    });
  </script>
</body>
</html>

Configuration Options

Parameter	Type	Required	Default	Description
`apiKey`	string	Yes	-	Your Wearo API key (starts with `tryonai_`)
`productSelector`	string	No	`img[data-product-image], img.product-image, .product-image img, .product__image img, .product__media img`	CSS selector to find product images
`triggerSelector`	string	No	-	Custom CSS selector for button container placement
`triggerText`	string	No	Auto-detected	Button label text. Auto-detects browser language: “Try it on you” (EN) or “Essayer sur moi” (FR)
`brandColor`	string	No	`#000000`	Your brand color in hex format (`#RRGGBB`)
`productId`	string	No	-	Product identifier for analytics tracking
`variantId`	string	No	-	Variant identifier (useful for Shopify integrations)

Brand Color Customization

The brandColor parameter lets you match the widget to your brand identity:

TryOnWidget.init({
  apiKey: 'your_api_key',
  brandColor: '#E91E63'  // Your brand pink
});

How it works:

Accepts 6-digit hex colors only (e.g., #FF5733, #1A1A1A)
Automatically generates hover state (+8% lightness) and active state (-8% lightness)
If not specified, defaults to an elegant dark theme (#1a1a1a)

Platform-Specific Selectors

Shopify:

TryOnWidget.init({
  apiKey: 'your_api_key',
  productSelector: '.product__media img, .product-featured-media img'
});

WooCommerce:

TryOnWidget.init({
  apiKey: 'your_api_key',
  productSelector: '.woocommerce-product-gallery__image img'
});

Custom Setup:

TryOnWidget.init({
  apiKey: 'your_api_key',
  productSelector: '#my-product-image',
  triggerSelector: '#try-on-button-container'
});

Direct API Reference

For headless implementations or server-to-server integrations, use the Direct API.

Endpoint

POST https://tdrtaehmhzxbulxaqmkf.supabase.co/functions/v1/tryon-api

Authentication

All requests must include your API key in the X-API-Key header:

X-API-Key: tryonai_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Headers

Header	Required	Description
`X-API-Key`	Yes	Your Wearo API key
`Content-Type`	Yes	Must be `application/json`
`Origin`	Conditional	Required if domain whitelist is configured for your API key

Request Body

Field	Type	Required	Description
`userPhoto`	string	Yes	Customer photo - accepts URL or Base64 (see formats below)
`productImageUrl`	string	Yes	Public URL of the clothing/product image
`clothingType`	string	No	Clothing category (e.g., “T-shirt”, “Dress”, “Jacket”)

userPhoto Formats

The userPhoto field accepts multiple formats: URL (Recommended for server-to-server):

{
  "userPhoto": "https://example.com/customer-photo.jpg",
  "productImageUrl": "https://mystore.com/products/shirt.jpg"
}

Base64 with Data URI prefix:

{
  "userPhoto": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...",
  "productImageUrl": "https://mystore.com/products/shirt.jpg"
}

Base64 raw (without prefix):

{
  "userPhoto": "/9j/4AAQSkZJRgABAQAAAQABAAD...",
  "productImageUrl": "https://mystore.com/products/shirt.jpg"
}

Success Response

HTTP 200 OK

{
  "success": true,
  "tryOnId": "73df6de0-ab9e-41d2-8828-60c2800bbf91",
  "resultUrl": "https://tdrtaehmhzxbulxaqmkf.supabase.co/storage/v1/object/public/try-on-results/user123/result_1234567890.jpg",
  "creditsRemaining": 849
}

Field	Type	Description
`success`	boolean	Always `true` for successful requests
`tryOnId`	string	Unique identifier for this try-on generation
`resultUrl`	string	Public URL of the generated try-on image (permanent, no expiration)
`creditsRemaining`	number	Your remaining credit balance after this request

cURL Example

curl -X POST "https://tdrtaehmhzxbulxaqmkf.supabase.co/functions/v1/tryon-api" \
  -H "Content-Type: application/json" \
  -H "X-API-Key: tryonai_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" \
  -H "Origin: https://mystore.com" \
  -d '{
    "userPhoto": "https://example.com/customer-photo.jpg",
    "productImageUrl": "https://mystore.com/products/blue-shirt.jpg",
    "clothingType": "T-shirt"
  }'

JavaScript/Node.js Example

const response = await fetch(
  'https://tdrtaehmhzxbulxaqmkf.supabase.co/functions/v1/tryon-api',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': 'tryonai_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      'Origin': 'https://mystore.com'
    },
    body: JSON.stringify({
      userPhoto: 'https://example.com/customer-photo.jpg',
      productImageUrl: 'https://mystore.com/products/blue-shirt.jpg',
      clothingType: 'T-shirt'
    })
  }
);

const data = await response.json();

if (data.success) {
  console.log('Try-on image:', data.resultUrl);
  console.log('Credits remaining:', data.creditsRemaining);
} else {
  console.error('Error:', data.error);
}

Python Example

import requests

response = requests.post(
    'https://tdrtaehmhzxbulxaqmkf.supabase.co/functions/v1/tryon-api',
    headers={
        'Content-Type': 'application/json',
        'X-API-Key': 'tryonai_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        'Origin': 'https://mystore.com'
    },
    json={
        'userPhoto': 'https://example.com/customer-photo.jpg',
        'productImageUrl': 'https://mystore.com/products/blue-shirt.jpg',
        'clothingType': 'T-shirt'
    }
)

data = response.json()

if data.get('success'):
    print(f"Try-on image: {data['resultUrl']}")
    print(f"Credits remaining: {data['creditsRemaining']}")
else:
    print(f"Error: {data.get('error')}")

Billing & Credits

How Credits Work

1 successful generation = 1 credit
Credits are consumed only when a try-on image is successfully generated
Results are permanently stored and accessible via the resultUrl

Automatic Refund Protection

Our billing system includes automatic refund protection:

If a generation fails due to a technical error, your credit is automatically refunded.

This covers:

AI generation failures
Image upload errors
Network timeouts
Server errors

You are only charged for successfully generated images.

Account Status

Status	Plan Credits	PAYG Credits	Action Required
Active	Available	Available	None
Past Due	Frozen	Available	Update payment method
No Credits	Depleted	Depleted	Purchase credits

Troubleshooting

Error Response Format

All error responses follow this format:

{
  "error": "Error message description",
  "hint": "Optional hint for resolution"
}

Error Codes Reference

HTTP Status	Error Message	Cause	Solution
400	`userPhoto (base64 or URL) and productImageUrl are required`	Missing required fields	Ensure both `userPhoto` and `productImageUrl` are provided
400	`Failed to fetch user photo from URL`	Invalid or inaccessible userPhoto URL	Verify the URL is publicly accessible and returns an image
400	`Failed to fetch product image from URL`	Invalid or inaccessible productImageUrl	Verify the URL is publicly accessible and returns an image
401	`API key is required. Provide it in the X-API-Key header.`	Missing API key header	Add `X-API-Key` header to your request
401	`Invalid API key`	API key not found	Check your API key for typos
402	`Insufficient credits. Please purchase more credits.`	No credits remaining	Purchase more credits in your dashboard
402	`Payment past due...`	Subscription payment failed	Update your payment method
403	`API key is inactive`	API key was deactivated	Contact support or create a new key
403	`Domain not authorized for this API key`	Request origin not in whitelist	Add your domain to the API key’s allowed domains list
403	`Origin header required when domain restrictions are active`	Missing Origin header	Add `Origin` header with your domain
500	`AI generation failed`	AI model error	Retry the request; contact support if persistent
500	`Failed to save result`	Storage error	Retry the request; contact support if persistent
500	`Server configuration error`	Internal server issue	Contact support

Common Issues

Check the product selector: Open browser DevTools and verify your image matches the selector
```
// Test in console
document.querySelectorAll('img[data-product-image]')
```
Image too small: The widget doesn’t inject on images smaller than 150px wide (to avoid cluttering thumbnails)
Check console for errors: Look for [TryOnWidget] messages in the browser console

API returns 403 “Domain not authorized”

If you’ve configured domain restrictions on your API key:

Ensure the Origin header matches a whitelisted domain
Subdomains are automatically allowed (e.g., if example.com is whitelisted, shop.example.com works)
For server-to-server calls without a browser, consider removing domain restrictions or adding your server’s domain

Image quality issues

Use high-resolution photos (minimum 500x500px recommended)
Ensure good lighting in customer photos
Use product images with clean backgrounds

Support

Email: [email protected]
Documentation: https://docs.wearo.io
Dashboard: https://wearo.io/dashboard

Last updated: February 2026

Getting started

Table of Contents

Quick Start (Widget)

Installation

Complete Example

Configuration Options

Brand Color Customization

Platform-Specific Selectors

Direct API Reference

Endpoint

Authentication

Headers

Request Body

userPhoto Formats

Success Response

cURL Example

JavaScript/Node.js Example

Python Example

Billing & Credits

How Credits Work

Automatic Refund Protection

Account Status

Troubleshooting

Error Response Format

Error Codes Reference

Common Issues

Widget button not appearing

API returns 403 “Domain not authorized”

Image quality issues

Support

Getting started

​Table of Contents

​Quick Start (Widget)

​Installation

​Complete Example

​Configuration Options

​Brand Color Customization

​Platform-Specific Selectors

​Direct API Reference

​Endpoint

​Authentication

​Headers

​Request Body

​userPhoto Formats

​Success Response

​cURL Example

​JavaScript/Node.js Example

​Python Example

​Billing & Credits

​How Credits Work

​Automatic Refund Protection

​Account Status

​Troubleshooting

​Error Response Format

​Error Codes Reference

​Common Issues

​Widget button not appearing

​API returns 403 “Domain not authorized”

​Image quality issues

​Support

Table of Contents

Quick Start (Widget)

Installation

Complete Example

Configuration Options

Brand Color Customization

Platform-Specific Selectors

Direct API Reference

Endpoint

Authentication

Headers

Request Body

userPhoto Formats

Success Response

cURL Example

JavaScript/Node.js Example

Python Example

Billing & Credits

How Credits Work

Automatic Refund Protection

Account Status

Troubleshooting

Error Response Format

Error Codes Reference

Common Issues

Widget button not appearing

API returns 403 “Domain not authorized”

Image quality issues

Support