Getting Started

The VTO SDK is product-centric: you create a THGVTO instance, hand it product metadata, and call generate() when the user clicks your trigger. The storefront owns all DOM interaction — the SDK only supplies the modal, the generation pipeline, and a few DOM helpers for injecting results.

API Environments

| Environment | Base URL | |-------------|----------| | Non-production | https://api-nonprod.thg.dev/agentic-commerce/v1/vto | | Production | https://api.thg.dev/agentic-commerce/v1/vto |

Quick Start

1. Get your API key

   Contact THG for provisioning. You’ll receive an API key scoped to your environment.

2. Load the SDK

   <script
     src="http://static.thcdn.com/vto-sdk.js"
     data-api-url="https://api-nonprod.thg.dev/agentic-commerce/v1/vto"
     data-api-key="your-api-key"
   ></script>

   The script exposes THGVTO as a global (and as an ES module export if you import the bundle directly).

3. Wire it up on your product page

   <button id="vto-trigger">Virtual Try-On</button>
   
   <script>
     const vto = new THGVTO({
       theme: { primaryColor: '#003942', primaryTextColor: '#fff' },
     });
   
     const product = vto.getProduct({
       image: 'https://cdn.example.com/products/shirt.jpg',
       url: window.location.href,
       title: 'Blue Oxford Shirt',
       price: '£35.00',
       id: 'SKU-12345',
     });
   
     document.getElementById('vto-trigger').addEventListener('click', async () => {
       const imageUrl = await product.generate();
       if (imageUrl) {
         // inject `imageUrl` wherever you want in your gallery
       }
     });
   </script>

   That’s the whole integration. generate() opens the modal, walks the user through upload and generation, and resolves with the result URL (or null if they close it).

How It Works

1. User clicks your trigger — you call product.generate()
2. Modal opens — uploads a photo (or selects a predefined model)
3. Pipeline runs — flat-lay extraction, garment description, and Nano Banana generation
4. Modal resolves — returns the result URL; you inject it into the gallery

The cached result persists across page loads (keyed on product image + person photo), so repeat clicks for the same product return instantly.

Showing cached results on page load

If the user has already tried this product on, show the result immediately:

const cached = await product.getImage();
if (cached) {
  // inject cached into your gallery before the user even clicks
}

Prerequisites

• An API key (contact THG for provisioning)
• A product detail page with a product image URL you can pass to getProduct()
• A trigger element you control (button, link, etc.)

Next Steps

SDK API Full THGVTO / product / DOM helper reference

Core Client Raw API access for custom modals

Theming Match your brand colours

GDPR Consent Integrate with your consent management