User guide / integration

Website Integration Guide

Use this guide to add WEARFITS try-on to your website. It covers simple links, iframe embeds, dynamic object loading, API-based model upload, and the Clothing AI Try-On SDK.

Which product should you use?

Shoes, bags, backpacks

Use dev.wearfits.com/tryon for AR viewer-based integrations.

Apparel

Use tryon.wearfits.com for Clothing AI Try-On.

Recommended start

Start with a simple link or iframe first. Move to dynamic loading only if you need a more advanced product page flow.

For Shoes & Bags AR Try-On

Use one of these integration methods from Shoes & Bags AR Try-On: Overview and SDK & Integration Guide.

Important: if your integration uses the camera, always include allow="camera" in the iframe permissions. Without it, camera-based try-on will not work.

Method 01

Simple link or AR code

Put a try-on URL or QR code on your site that opens the viewer.

Method 02

Iframe embed

Embed the viewer directly on a page.

<iframe
  src="https://app.wearfits.com/tryon?object=YOUR_OBJECT_ID&pose=1&mm=3"
  allow="camera; display-capture; autoplay; clipboard-write; encrypted-media; fullscreen"
  style="width: 100%; height: 600px; border: none;"
  id="wearfits-viewer">
</iframe>

object = your 3D model ID
pose=1 = enable pose detection
mm=3 = mirror mode

Method 03

Dynamic loading with postMessage

If you want to load the object after the page loads, send a message to the iframe.

const iframe = document.getElementById('wearfits-viewer');
iframe.contentWindow.postMessage(
  JSON.stringify({ name: 'load_object', data: 'sneaker_v1', pose: false }),
  '*'
);

Method 04

Product model upload

First upload a .glb model via the API. Then use the returned viewer_url on your site.

curl -X POST https://dev.wearfits.com/tryon/api/upload_shoe \
  -H "Authorization: Bearer your_api_key_here" \
  -F "file=@shoe_model.glb"

For Clothing AI Try-On

Use the Clothing AI Try-On: SDK & Integration Guide.

Recommended

JavaScript modal SDK

<script src="https://tryon.wearfits.com/sdk/wearfits.js"></script>
const tryOn = new WearfitsTryOn({
  apiKey: 'wf_prod_abc123...',
  products: [
    {
      id: 'suit_01',
      name: 'Executive Suit',
      category: 'fullBody',
      images: ['https://cdn.example.com/suit_front.jpg']
    }
  ],
  onComplete: (result) => {
    console.log(result.resultImageUrl);
  }
});

tryOn.open();

Alternative

Iframe embed

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

For iframe integrations, initialize the app with WEARFITS_INIT via postMessage once the app sends WEARFITS_READY.

Which one should you use?

Shoes / bags / backpacks

Use dev.wearfits.com/tryon.

Apparel

Use tryon.wearfits.com.

Need a ready snippet?

We can prepare either a minimal iframe snippet for shoes or a production-safe embed example with postMessage handling.