AI integration
Integration of AI Try-On for apparel and shoes
Integrate WEARFITS Gen AI Try-On easily via iframe, JavaScript Modal SDK, or a standalone page.
Main options
Iframe
Fastest full UI embed with moderate control.
JavaScript Modal SDK
Best recommended integration for production UX and dynamic product syncing.
Standalone page
Simplest link-out experience, lowest integration effort, least control over surrounding UI.
If you are rolling out through Shopify, use the dedicated Shopify Virtual Try-On App guide for the merchant-facing setup flow and embedded storefront activation.
1. Iframe integration
What it is
You embed https://tryon.wearfits.com in an <iframe> and pass parameters like products, avatarId, or step.
Pros
- Very quick to launch.
- Keeps users on your page.
- Good if you want a contained try-on panel or modal.
- Supports dynamic initialization via
postMessagewithWEARFITS_INITandWEARFITS_SET_PRODUCTS.
What to remember
- You must allow camera access:
allow="camera"is required. - Third-party cookie behavior can affect digital twin resume-session features.
- More limited control than the modal SDK over lifecycle and host-page UX.
- You need to handle
postMessagesecurity correctly by validating origin.
Best for
- Embedding the experience inside an existing product page or custom modal.
- Teams that want a direct iframe and are okay managing message passing.
Docs: Clothing AI Try-On SDK & Integration Guide - Direct Iframe Integration, PostMessage Communication API, Best Practices.
2. JavaScript Modal SDK
What it is
A JS SDK that opens a WEARFITS modal and handles lifecycle, product sync, and callbacks.
Pros
- Recommended integration path in the docs.
- Handles modal lifecycle and DOM mounting for you.
- Supports callbacks:
onComplete,onError,onClose. - Easier to keep your app state synchronized with WEARFITS.
- Better fit for ecommerce flows where you want a polished Try On modal.
What to remember
- Depends on browser camera permissions for twin creation.
- You need to provide and manage product data correctly.
- Your host app still needs to handle callback flow and product selection logic.
- External API key is part of initialization, so you need to manage that carefully in your frontend architecture.
Best for
- Production storefronts that want the smoothest UX.
- Teams that want the least amount of iframe or postMessage plumbing.
Docs: Clothing AI Try-On SDK & Integration Guide - JavaScript Modal SDK (Recommended).
3. Standalone page
What it is
You open https://tryon.wearfits.com in a new tab or route, passing product data in the URL as inline JSON, or a hosted JSON feed via products or legacy productsUrl.
Pros
- Simplest possible integration.
- Great for Try On links, campaigns, or quick experiments.
- No modal or iframe host-side complexity.
- Easy to share and reuse.
What to remember
- Not embedded in your product page unless you wrap it yourself.
- Less seamless than modal or iframe.
- URL length can become an issue for larger product catalogs, so hosted JSON is better.
Best for
- Open in new tab flows.
- Simple landing-page-style integrations.
- Very fast implementation.
To learn more about standalone integrations visit the WEARFITS Virtual Try-On API Documentation.
Comparison table
| Option | UX quality | Integration effort | Control | Best use case | Key limitation |
|---|---|---|---|---|---|
| Standalone page | Medium | Lowest | Low | Link-out / quick launch | Not embedded |
| Iframe | High | Medium | Medium | Embedded try-on panel | Camera + postMessage + cookies |
| JavaScript Modal SDK | Highest | Medium | High | Best storefront experience | Requires SDK wiring + callback handling |
Practical recommendation
Fastest proof of concept
Standalone page.
Simple embedded experience
Iframe.
Best production integration
JavaScript Modal SDK.
Effort: Standalone page = lowest effort. Iframe = moderate effort. Modal SDK = moderate effort, but usually the best long-term fit.