Developer Documentation

Documentation

Add a virtual try-on button to any clothing store — Shopify, WooCommerce, Wix, Squarespace, or a fully custom site. No backend required. Just paste a script tag.

ShopifyWooCommerceWixSquarespaceCustom Sites

Getting Started

TryyOnYou lets your customers virtually try on clothing using AI — right on your product pages. The widget is a single JavaScript file with zero external dependencies. It takes under 5 minutes to install on any platform.

1

Create a free account

Sign up at tryyonyou.online/signup. You get 50 free try-ons to start — no credit card required.
2

Get your API key

Go to your Dashboard → Installation page. Customize your button color, style, and font, then copy the generated code snippet.
3

Install on your platform

Follow the platform-specific guide below. It's just pasting HTML — no server setup, no npm install, no build step.
4

Test it

Open any product page and you'll see the "Try On Virtually" button appear next to your Add to Cart button. Click it, upload a photo, and generate!

Widget Installation

The widget is installed by pasting three HTML lines into your site. The code sets a few JavaScript globals, then loads the widget script and stylesheet. The widget auto-initializes the moment it loads.

✅
Go to Dashboard → Installation to get a pre-filled code snippet with your API key and chosen colors already embedded. Then follow the platform guide below to know exactly where to paste it.

Choose your platform below ↓

Shopify

Shopify
💡
On Shopify the widget auto-detects your product image and Add-to-Cart button using Shopify's standard theme class names (Dawn, Debut, Brooklyn, etc.). No extra selectors needed.
1

Open Shopify Admin

Go to Online Store → Themes and click "Edit code" on your active theme.
2

Open theme.liquid

In the file tree on the left, find and open theme.liquid.
3

Paste the snippet before </body>

Scroll to the very bottom of the file. Find the closing </body> tag and paste the code directly before it.
4

Save

Click Save. Open any product page — the "Try On Virtually" button will appear below your Add to Cart button.
html
<!-- TryyOnYou Widget — paste before </body> in theme.liquid -->
<link rel="stylesheet" href="https://tryyonyou.online/widget/tryon-widget.css">
<script>
  window.TRYON_API_KEY    = "vto_YOUR_API_KEY";
  window.TRYON_API_URL    = "https://tryyonyou.online/api/generate-tryon";
  window.TRYON_WIDGET_URL = "https://tryyonyou.online";

  // Optional — customize to match your brand
  window.TRYON_BUTTON_TEXT   = "Try On Virtually";
  window.TRYON_PRIMARY_COLOR = "#8B5E3C";
  window.TRYON_BUTTON_STYLE  = "rounded"; // rounded | pill | square | outline | minimal
</script>
<script defer src="https://tryyonyou.online/widget/tryon-widget.js"></script>
✅
Works with all major Shopify themes: Dawn, Debut, Brooklyn, Supply, Narrative, Minimal, and most premium third-party themes. The widget recognizes their class names automatically.

WooCommerce (WordPress)

WooCommerce
💡
WooCommerce themes often use non-standard class names, so you'll need to tell the widget exactly which CSS selector is your product image and which is your Add to Cart button. This takes about 30 seconds using browser DevTools.
1

Find your product image selector

Open a product page in Chrome. Right-click the main product image → Inspect. Look at the <img> tag and note its class. Common WooCommerce values: .woocommerce-product-gallery__image img or .wp-post-image.
2

Find your Add to Cart button selector

Right-click your Add to Cart button → Inspect. Note the class. Default WooCommerce: .single_add_to_cart_button.
3

Paste the code into your theme footer

In WordPress admin go to Appearance → Theme File Editor (or use a plugin like "Insert Headers and Footers"). Paste the snippet into the footer / before </body> section.
html
<!-- TryyOnYou Widget — add to WordPress footer -->
<link rel="stylesheet" href="https://tryyonyou.online/widget/tryon-widget.css">
<script>
  window.TRYON_API_KEY    = "vto_YOUR_API_KEY";
  window.TRYON_API_URL    = "https://tryyonyou.online/api/generate-tryon";
  window.TRYON_WIDGET_URL = "https://tryyonyou.online";

  // ── Tell the widget where YOUR product image is ───────────────
  window.TRYON_CUSTOM_IMAGE_SELECTOR = ".woocommerce-product-gallery__image img";

  // ── Tell the widget where to inject the button ────────────────
  window.TRYON_POSITION        = "custom";  // Must be "custom"
  window.TRYON_CUSTOM_SELECTOR = ".single_add_to_cart_button";

  // Optional branding
  window.TRYON_BUTTON_TEXT   = "Try On Virtually";
  window.TRYON_PRIMARY_COLOR = "#7F54B3";
  window.TRYON_BUTTON_STYLE  = "pill";
</script>
<script defer src="https://tryyonyou.online/widget/tryon-widget.js"></script>
⚠️
If the selectors don't match, open browser DevTools → Console and look forTryOn Widget: Product image not found. That means you need to adjust TRYON_CUSTOM_IMAGE_SELECTOR.

Wix

Wix
⚠️
Wix injects its store pages inside iframes and uses dynamically generated class names that change on each deploy. Because of this, CSS selectors are not reliable on Wix. Use the Custom HTML embed approach with Wix Velo (Dev Mode) for best results.
1

Enable Dev Mode

In Wix Editor go to Settings → Velo Dev Mode → Enable.
2

Add a Custom HTML Element

On your product page, click + Add → Embed Code → Custom Code. Choose "Body — end" placement. Paste the snippet below.
3

Set your image and button selectors

Open your live product page in Chrome. Right-click the product image → Inspect. Copy the deepest stable class name you can find (Wix wraps images in several divs). Paste it as TRYON_CUSTOM_IMAGE_SELECTOR.
4

Publish and test

Click Publish in the Wix editor. Open the live product page — not the editor preview.
html
<!-- TryyOnYou Widget — Wix Custom Code embed (Body End) -->
<link rel="stylesheet" href="https://tryyonyou.online/widget/tryon-widget.css">
<script>
  window.TRYON_API_KEY    = "vto_YOUR_API_KEY";
  window.TRYON_API_URL    = "https://tryyonyou.online/api/generate-tryon";
  window.TRYON_WIDGET_URL = "https://tryyonyou.online";

  // Inspect your Wix product page to find these selectors
  window.TRYON_CUSTOM_IMAGE_SELECTOR = "YOUR_PRODUCT_IMAGE_SELECTOR";

  window.TRYON_POSITION        = "custom";
  window.TRYON_CUSTOM_SELECTOR = "YOUR_ADD_TO_CART_SELECTOR";

  window.TRYON_BUTTON_TEXT   = "Try On Virtually";
  window.TRYON_PRIMARY_COLOR = "#0C6EFD";
  window.TRYON_BUTTON_STYLE  = "rounded";
</script>
<script defer src="https://tryyonyou.online/widget/tryon-widget.js"></script>
✅
If selectors keep breaking after Wix updates, use the fallback: leave bothTRYON_CUSTOM_IMAGE_SELECTOR andTRYON_CUSTOM_SELECTOR unset. The widget will fall back to finding the largest image on the page and inserting the button after it.

Squarespace

Squarespace
💡
Squarespace supports Code Injection for adding scripts site-wide. The widget detects the .ProductItem__Image class which is used by Squarespace's default product templates — so it works out of the box on most Squarespace stores.
1

Open Code Injection

In Squarespace admin go to Settings → Advanced → Code Injection.
2

Paste into the Footer field

Scroll down to the "Footer" text area and paste the snippet below.
3

Save and preview

Click Save. Open any product page and the widget button should appear.
4

If the button doesn't appear (custom templates)

Inspect your product image and Add to Cart button in DevTools, then add theTRYON_CUSTOM_IMAGE_SELECTOR andTRYON_CUSTOM_SELECTOR overrides.
html
<!-- TryyOnYou Widget — paste into Squarespace Footer Code Injection -->
<link rel="stylesheet" href="https://tryyonyou.online/widget/tryon-widget.css">
<script>
  window.TRYON_API_KEY    = "vto_YOUR_API_KEY";
  window.TRYON_API_URL    = "https://tryyonyou.online/api/generate-tryon";
  window.TRYON_WIDGET_URL = "https://tryyonyou.online";

  // Works out-of-the-box on most Squarespace templates.
  // Only add these if the button doesn't appear:
  // window.TRYON_CUSTOM_IMAGE_SELECTOR = ".ProductItem__Image img";
  // window.TRYON_POSITION        = "custom";
  // window.TRYON_CUSTOM_SELECTOR = ".sqs-add-to-cart-button";

  window.TRYON_BUTTON_TEXT   = "Try On Virtually";
  window.TRYON_PRIMARY_COLOR = "#1a1a1a";
  window.TRYON_BUTTON_STYLE  = "pill";
</script>
<script defer src="https://tryyonyou.online/widget/tryon-widget.js"></script>

Custom / Self-built Website

Any Stack

Built your store on custom HTML/CSS/JS, React, Vue, Laravel, Django, or anything else? No problem. The widget is just a script tag — it works on any website. You only need to tell it two things: which element is your product image and which element is your Add to Cart button.

1

Find your product image CSS selector

Open your product page in Chrome. Right-click the main product image → Inspect. Look at the <img> tag.

Examples you might see:

html
<img class="product-main-photo" src="...">   →  .product-main-photo
<img id="productImage" src="...">            →  #productImage
<div class="gallery"><img ...></div>         →  .gallery img

Then verify it in the DevTools console:

js
// Paste this in your browser Console on the product page
document.querySelector('.product-main-photo')
// Must return an <img> element, NOT null
2

Find your Add to Cart button selector

Right-click your Add to Cart button → Inspect. Copy its class or id.
js
// Verify it in the Console
document.querySelector('.add-to-cart-btn')
// Must return a button element, NOT null
3

Paste the snippet before </body>

In whichever file renders your product page HTML (e.g., product.html,product.php,product.jsx), add the snippet just before the closing</body> tag.
html
<!-- TryyOnYou Widget — paste before </body> on your product page -->
<link rel="stylesheet" href="https://tryyonyou.online/widget/tryon-widget.css">
<script>
  // ── Required ──────────────────────────────────────────────────
  window.TRYON_API_KEY    = "vto_YOUR_API_KEY";
  window.TRYON_API_URL    = "https://tryyonyou.online/api/generate-tryon";
  window.TRYON_WIDGET_URL = "https://tryyonyou.online";

  // ── Your product image selector (from Step 1) ─────────────────
  window.TRYON_CUSTOM_IMAGE_SELECTOR = ".product-main-photo";

  // ── Your Add to Cart button selector (from Step 2) ────────────
  window.TRYON_POSITION        = "custom";   // MUST be "custom"
  window.TRYON_CUSTOM_SELECTOR = ".add-to-cart-btn";

  // ── Optional styling ──────────────────────────────────────────
  window.TRYON_BUTTON_TEXT   = "Try On Virtually";
  window.TRYON_PRIMARY_COLOR = "#000000";
  window.TRYON_BUTTON_STYLE  = "rounded";  // rounded|pill|square|outline|minimal
</script>
<script defer src="https://tryyonyou.online/widget/tryon-widget.js"></script>
⚠️
Important: TRYON_POSITION = "custom"must be set for TRYON_CUSTOM_SELECTOR to be used. Without it, the widget ignores TRYON_CUSTOM_SELECTOR and falls back to its built-in selector list (which won't know your custom class names).

Quick Test (no server needed)

Create a file called test.html and open it directly in your browser — no localhost required:

html
<!DOCTYPE html>
<html>
<head><title>Widget Test</title></head>
<body>
  <h1>Test Product</h1>

  <!-- A real product image with the class you'll use -->
  <img class="product-main-photo"
       src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400"
       alt="T-Shirt" style="width:300px">

  <!-- A fake Add to Cart button -->
  <button class="add-to-cart-btn"
          style="display:block;margin-top:12px;padding:12px 24px;background:#222;color:white;border:none;border-radius:8px;cursor:pointer">
    Add to Cart
  </button>

  <!-- TryyOnYou Widget -->
  <link rel="stylesheet" href="https://tryyonyou.online/widget/tryon-widget.css">
  <script>
    window.TRYON_API_KEY    = "vto_YOUR_REAL_API_KEY";
    window.TRYON_API_URL    = "https://tryyonyou.online/api/generate-tryon";
    window.TRYON_WIDGET_URL = "https://tryyonyou.online";
    window.TRYON_CUSTOM_IMAGE_SELECTOR = ".product-main-photo";
    window.TRYON_POSITION        = "custom";
    window.TRYON_CUSTOM_SELECTOR = ".add-to-cart-btn";
  </script>
  <script defer src="https://tryyonyou.online/widget/tryon-widget.js"></script>
</body>
</html>

All Configuration Options

All options are set as window.TRYON_* globals in a <script> block before the widget script tag.

VariableRequiredDescription & Values
TRYON_API_KEYrequiredYour API key from the dashboard. Format: vto_xxxxxxxx
TRYON_API_URLrequiredAlways set to: https://tryyonyou.online/api/generate-tryon
TRYON_WIDGET_URLrequiredAlways set to: https://tryyonyou.online — used to load the CSS file.
TRYON_BUTTON_TEXToptionalText shown on the trigger button. Default: "Try On Virtually"
TRYON_PRIMARY_COLORoptionalHex color for the button and modal accents. Default: "#6366f1"
TRYON_BUTTON_STYLEoptionalButton shape. Values: rounded (default) | pill | square | outline | minimal
TRYON_FONT_FAMILYoptionalFont family for the button. Use "inherit" (default) to match your store, or any Google Font name e.g. "Inter".
TRYON_FONT_WEIGHToptionalFont weight. Values: 400 | 500 | 600 (default) | 700
TRYON_POSITIONoptionalWhere to inject the Try On button relative to the ATC button. Values: afterCart (default) | beforeCart | custom. Must be "custom" to use TRYON_CUSTOM_SELECTOR.
TRYON_CUSTOM_SELECTORoptionalCSS selector for your Add to Cart button or any element to inject the Try On button next to. Only active when TRYON_POSITION = "custom".
TRYON_CUSTOM_IMAGE_SELECTORoptionalCSS selector for your product image <img> element. When set, this is used first before any built-in selectors. Works on all platforms regardless of TRYON_POSITION.

API Reference

💡
The widget calls the API automatically. You only need this section if you want to call the API directly from your own backend or build a custom integration.
POSThttps://tryyonyou.online/api/generate-tryon

Generates a virtual try-on image by compositing a person photo with a garment image using the IDM-VTON AI model. Returns a base64-encoded PNG.

Request Headers

X-API-Key: vto_your_api_key
Content-Type: application/json

Request Body

json
{
  "person_image": "<base64 data URL or https:// URL of the person photo>",
  "garment_image": "<base64 data URL or https:// URL of the clothing item>",
  "page_url": "https://yourstore.com/products/blue-shirt"  // optional, for analytics
}
FieldRequiredDescription
person_imagerequiredPhoto of the person. Base64 data URL (data:image/jpeg;base64,...) or a public HTTPS image URL. Max 10 MB. JPEG / PNG / WebP.
garment_imagerequiredPhoto of the clothing item. Same format as person_image.
page_urloptionalThe product page URL. Logged in your analytics dashboard.

Success Response 200

json
{
  "success": true,
  "image": "<raw base64 string — no data: prefix>",
  "usage": {
    "current":   3,
    "limit":     50,
    "remaining": 47
  }
}

To display the image: <img src={`data:image/png;base64,${data.image}`}>

Error Responses

400{ "success": false, "error": "Both person_image and garment_image are required" }
401{ "success": false, "error": "API key is required / Invalid API key" }
403{ "success": false, "error": "Store account is inactive or suspended" }
429{ "success": false, "error": "Monthly usage limit exceeded. Please upgrade your plan." }
500{ "success": false, "error": "AI processing failed / Internal server error" }

cURL Example

bash
curl -X POST https://tryyonyou.online/api/generate-tryon \
  -H "Content-Type: application/json" \
  -H "X-API-Key: vto_YOUR_API_KEY" \
  -d '{
    "person_image": "data:image/jpeg;base64,/9j/4AAQ...",
    "garment_image": "https://yourstore.com/images/shirt.jpg",
    "page_url": "https://yourstore.com/products/blue-shirt"
  }'

Authentication

All requests to the API are authenticated with your API key sent in the X-API-Key header.

Getting your API key

  1. Log in at tryyonyou.online/login
  2. Go to Dashboard → Installation
  3. Click the eye icon to reveal your key, then copy it

API key format

vto_<48 random characters>

Example: vto_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4

Regenerating your key

On the Installation page, click "Regenerate Key". Your old key stops working immediately — update your widget snippet with the new key.

⚠️
Your API key is embedded in your page's HTML and is visible in the page source. This is expected and unavoidable for a client-side widget. The key is scoped to your store and tied to your monthly usage limit — it cannot be used to access any other store's data. If you believe your key has been misused, regenerate it immediately from the dashboard.

Troubleshooting

Open browser DevTools → Console (F12) on your product page. The widget logs helpful messages to guide you.

Button doesn't appear at all

Check the Console for errors. Make sure the script and CSS <link> tags loaded correctly (check the Network tab — both files should return 200). Verify your TRYON_API_KEY is set before the widget script tag.

Console says "Product image not found, retrying..."

Your TRYON_CUSTOM_IMAGE_SELECTOR is wrong or not set. Open DevTools → Elements, right-click your product image → Copy → Copy selector, and paste it as TRYON_CUSTOM_IMAGE_SELECTOR. Then verify: document.querySelector("YOUR_SELECTOR").src returns a URL.

Console says "Could not find button container"

Your TRYON_CUSTOM_SELECTOR is wrong, or you forgot to set TRYON_POSITION = "custom". Both must be set together. Verify: document.querySelector("YOUR_SELECTOR") returns an element.

Button appears but in the wrong position

Use TRYON_POSITION = "beforeCart" to inject above the ATC button, or "afterCart" (default) to inject below. For a specific spot, set TRYON_POSITION = "custom" and point TRYON_CUSTOM_SELECTOR at the exact element you want the button placed next to.

"Invalid API key" error in the modal

Double-check the API key value in your snippet matches exactly what's shown in your Dashboard → Installation page. Keys are case-sensitive. Try regenerating the key and updating the snippet.

"Monthly usage limit exceeded" error

You've used all your try-ons for this month. Go to Dashboard → Settings to upgrade your plan, or wait for the monthly reset.

The widget loads but the garment image is wrong (wrong product)

The widget is picking up an image from another section of the page. Narrow down TRYON_CUSTOM_IMAGE_SELECTOR to uniquely target only the main product image.

Widget works on desktop but not mobile

Some mobile themes lazy-load images with data-src instead of src. The widget retries up to 5 times waiting for the image to load. If it still fails, check if the img.src is populated on mobile using mobile DevTools.

Still stuck?

Send us your platform name, the URL of your product page, and a screenshot of the browser Console — we'll get your widget working within 24 hours.

Email Support