WEARFITS Integration Guide

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 with URL parameters for products, direct step navigation, and pre-loaded avatar

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

Product Categories

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.

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

Processing Status Notifications (Coming Soon)

The iframe will send postMessage notifications during processing to keep the parent page informed about the try-on status:

// Listen for processing status updates
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://tryon.wearfits.com') return;

  const { type, payload } = event.data;

  switch (type) {
    case 'WEARFITS_PROCESSING_START':
      // Try-on processing has started
      // payload: { jobId, jobType: 'twin' | 'fitting' }
      break;

    case 'WEARFITS_PROCESSING_PROGRESS':
      // Progress update during processing
      // payload: { jobId, progress: 0-100, stage: string }
      break;

    case 'WEARFITS_PROCESSING_COMPLETE':
      // Processing finished successfully
      // payload: { jobId, jobType, resultImageUrl }
      break;

    case 'WEARFITS_PROCESSING_ERROR':
      // Processing failed
      // payload: { jobId, jobType, error }
      break;
  }
});

These notifications allow you to show custom loading indicators, track analytics, or trigger actions when processing completes.

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. Job Persistence

The app automatically persists in-progress jobs across page reloads:

• If a user refreshes the page during digital twin creation or virtual fitting, the job will automatically resume
• Pending jobs are stored in localStorage with a 15-minute expiration
• Once the job completes or fails, the pending state is cleared
• This ensures users don't lose their progress if they accidentally navigate away

5. 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"

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

View AR Shoes Try-On Integration Guide

📄 View as Markdown