What is WEARFITS Virtual Try-On?

WEARFITS Virtual Try-On is an AI-powered solution that allows online shoppers to see how clothing items will look on them before purchasing. It uses generative AI and digital twin technology to create a personalized avatar and render garments with photorealistic accuracy.

How do I integrate WEARFITS into my e-commerce website?

WEARFITS can be integrated via three methods: iframe embedding with postMessage communication, JavaScript modal overlay, or standalone page with URL parameters. All methods use a standardized product JSON format for passing product data.

What product categories does WEARFITS support?

WEARFITS supports tops (t-shirts, blouses, shirts, sweaters), full body items (dresses, jumpsuits), bottoms (pants, skirts, shorts), and shoes (all footwear).

What are the image requirements for products?

Product images should be high-quality (minimum 500x500px) with consistent lighting and white/neutral backgrounds. Both lifestyle and packshot images are recommended. All image URLs must use HTTPS.

How does the digital twin technology work?

Users provide a selfie and full-body photo. Our AI creates a personalized digital avatar (digital twin) that accurately represents their body shape and appearance. Clothing items are then virtually rendered onto this avatar using generative AI for photorealistic results.

Back to Try-On App

WEARFITS Integration Guide

Integrate AI-powered virtual try-on technology into your e-commerce website

About WEARFITS Virtual Try-On

WEARFITS is a cutting-edge generative AI virtual try-on solution that revolutionizes online fashion shopping. Our technology uses advanced digital twin technology to create a personalized 3D avatar from a simple selfie and full-body photo.

The AI then renders selected clothing items onto this digital twin with photorealistic accuracy, allowing customers to see exactly how garments will look on their unique body shape before purchasing.

Key benefits include reduced return rates, increased conversion, and an engaging shopping experience that builds customer confidence.

Generative AI Technology

State-of-the-art AI models render clothing with photorealistic quality and accurate fit visualization.

Digital Twin Creation

Create a personalized avatar from just a selfie and body photo - no special equipment needed.

Easy Integration

Multiple integration options: iframe, JavaScript modal, or standalone page with simple API.

Mobile Optimized

Fully responsive design with camera support for on-the-go virtual try-on experiences.

Overview

The WEARFITS Virtual Try-On application enables customers to visualize how clothing items would look on them using AI-powered digital twin technology. Our generative AI creates photorealistic renderings of garments on personalized avatars, helping customers make confident purchasing decisions.

The application can be integrated into any e-commerce website through three methods:

Iframe Embedding - Embed the app in an iframe and communicate via postMessage
JavaScript Modal - Open the app as a modal overlay using JavaScript
Standalone Page - Link to the app page with product data in URL parameters

How It Works

The WEARFITS virtual try-on process uses advanced AI in two main stages:

1. Digital Twin Creation

The customer provides a selfie (face photo) and a full-body photo. Our AI analyzes these images to create a personalized digital twin - a 3D avatar that accurately represents the customer's body shape, proportions, and appearance. This process takes approximately 30-60 seconds and the digital twin can be reused for multiple try-ons.

2. Virtual Garment Rendering

Once the digital twin is created, customers can select clothing items from your product catalog. Our generative AI renders each selected garment onto the digital twin with photorealistic accuracy, showing how the clothing would drape, fit, and look on their specific body type. The rendering considers fabric properties, fit, and realistic lighting.

Supported Product Categories

Tops - T-shirts, blouses, shirts, sweaters, jackets
Full Body - Dresses, jumpsuits, rompers, full outfits
Bottoms - Pants, jeans, skirts, shorts
Shoes - All types of footwear

Product JSON Format

Products are passed to the application using a standardized JSON format:

Basic Structure

{
  "products": [
    {
      "id": "product-123",
      "name": "Blue Cotton T-Shirt",
      "category": "top",
      "images": [
        "https://example.com/products/tshirt-lifestyle.jpg",
        "https://example.com/products/tshirt-packshot.jpg"
      ]
    }
  ]
}

Product Fields

Field	Type	Required	Description
`id`	string	Yes	Unique product identifier
`name`	string	Yes	Product display name
`category`	string	Yes	Product category (see below)
`images`	array	Yes	Array of image URLs (1-2 images)
`default`	boolean	No	If true, product is pre-selected on load

Product Categories

Category	Value	Description
Tops	`"top"`	T-shirts, blouses, shirts, sweaters
Full Body	`"fullBody"`	Dresses, jumpsuits, full outfits
Bottoms	`"bottom"`	Pants, skirts, shorts
Shoes	`"shoes"`	All footwear

Image Array

The images array should contain 1-2 URLs:

images[0] - Primary image (lifestyle/model view) used in result preview
images[1] - Secondary image (packshot/product view) used in selection carousel

If only one image is provided, it will be used for both purposes.

Integration Options

Choose the integration method that best fits your e-commerce platform:

Iframe Embedding

Embed the WEARFITS app in an iframe and use postMessage for communication. This is the recommended approach for maximum control and seamless integration.

HTML Setup

<iframe
  id="wearfits-frame"
  src="https://tryon.wearfits.com"
  style="width: 100%; height: 100vh; border: none;"
  allow="camera"
></iframe>

JavaScript Integration

// Get reference to iframe
const iframe = document.getElementById('wearfits-frame');

// Wait for iframe to be ready
window.addEventListener('message', (event) => {
  // Validate origin in production
  // if (event.origin !== 'https://tryon.wearfits.com') return;

  const { type, payload } = event.data;

  switch (type) {
    case 'WEARFITS_READY':
      // App is ready, send initialization
      initializeApp();
      break;

    case 'WEARFITS_COMPLETE':
      // Try-on completed successfully
      console.log('Result image:', payload.resultImageUrl);
      break;

    case 'WEARFITS_ERROR':
      // An error occurred
      console.error('Error:', payload);
      break;

    case 'WEARFITS_CLOSE':
      // User requested to close
      hideIframe();
      break;
  }
});

// Initialize the app with products
function initializeApp() {
  iframe.contentWindow.postMessage({
    type: 'WEARFITS_INIT',
    payload: {
      products: [
        {
          id: 'top-001',
          name: 'Classic White Blouse',
          category: 'top',
          default: true,
          images: [
            'https://cdn.example.com/products/blouse-model.jpg',
            'https://cdn.example.com/products/blouse-flat.jpg'
          ]
        }
      ]
    }
  }, '*'); // Replace '*' with specific origin in production
}

PostMessage Types Reference

Message Type	Direction	Description
`WEARFITS_READY`	App → Parent	App loaded and ready for initialization
`WEARFITS_INIT`	Parent → App	Initialize with products and config
`WEARFITS_SET_PRODUCTS`	Parent → App	Update product list
`WEARFITS_COMPLETE`	App → Parent	Try-on completed, includes result URL
`WEARFITS_ERROR`	App → Parent	Error occurred
`WEARFITS_CLOSE`	App → Parent	User requested to close

JavaScript Modal

Open the WEARFITS app as a modal overlay within your website. Great for product detail pages where you want a "Try On" button.

Open Modal with JavaScript

// Product data from your backend
const currentProduct = {
  id: 'top-001',
  name: 'Classic White Blouse',
  category: 'top',
  default: true,
  images: [
    'https://cdn.example.com/products/blouse-model.jpg',
    'https://cdn.example.com/products/blouse-flat.jpg'
  ]
};

// Configure the modal
window.__WEARFITS_CONFIG__ = {
  products: [currentProduct],
  onComplete: (result) => {
    console.log('Try-on complete!', result.resultImageUrl);
    // Show result to user, save to wishlist, etc.
  },
  onError: (error) => {
    console.error('Try-on failed:', error);
  },
  onClose: () => {
    console.log('Modal closed');
  }
};

window.__WEARFITS_MODAL_MODE__ = true;

// Create and load modal
const container = document.createElement('div');
document.body.appendChild(container);

// Load the modal from your WEARFITS deployment
import('https://tryon.wearfits.com/embed/modal.js')
  .then(({ mountModal }) => {
    mountModal(container, {
      onClose: () => window.__WEARFITS_CONFIG__.onClose?.()
    });
  });

Standalone Page with URL Parameters

Link directly to the WEARFITS app with product data encoded in URL parameters. Simplest integration - just create a link.

URL Format

https://tryon.wearfits.com/?products={encoded_json}

Encoding Products for URL

// Product data
const products = [
  {
    id: 'top-001',
    name: 'Classic White Blouse',
    category: 'top',
    default: true,
    images: ['https://cdn.example.com/products/blouse-model.jpg']
  }
];

// Create URL with encoded products
const url = new URL('https://tryon.wearfits.com/');
url.searchParams.set('products', JSON.stringify(products));

// Open in new tab
window.open(url.toString(), '_blank');

Event Communication

Handling Results

When a try-on is completed, you receive a result object:

{
  resultImageUrl: "https://api.wearfits.com/results/abc123.jpg",
  selectedProducts: [
    { id: "top-001", name: "Classic White Blouse", category: "top" },
    { id: "bottom-001", name: "Navy Dress Pants", category: "bottom" }
  ],
  timestamp: "2024-01-15T10:30:00Z"
}

Error Handling

// Error object format
{
  code: "TWIN_CREATION_FAILED",
  message: "Failed to create digital twin. Please try again.",
  details: { /* additional error context */ }
}

// Common error codes:
// - TWIN_CREATION_FAILED: Could not create digital twin
// - FITTING_FAILED: Virtual try-on processing failed
// - INVALID_IMAGE: Image format not supported
// - NETWORK_ERROR: Connection issue
// - TIMEOUT: Processing took too long

Best Practices

1. Image Requirements

Use high-quality product images (minimum 500x500px)
Ensure consistent lighting and white/neutral backgrounds
Include both lifestyle and packshot images when available
Use HTTPS URLs for all images

2. Security

Always validate postMessage origins in production
Use specific domains instead of '*' in production
Implement proper CORS headers on your image CDN

// Production-safe postMessage handler
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://tryon.wearfits.com') {
    return; // Ignore messages from unknown origins
  }
  // Process message...
});

3. Performance

Preload product images for faster loading
Consider lazy-loading the try-on iframe
Cache digital twin IDs when possible (handled automatically)

4. Mobile Considerations

The app is fully responsive and mobile-optimized
Camera access is required for creating digital twins
Ensure your iframe allows camera permissions: allow="camera"

5. Product Selection Logic

Top + Bottom OR Full Body is required for try-on
Shoes are optional
When Full Body is selected, Top and Bottom are cleared
When Top or Bottom is selected, Full Body is cleared

Need Help?

For technical support and API access, contact our support team