The frontend engine for virtual fashion.
TryOnKit couples ultra-low latency canvas operations with server-side AI. Use our drop-in SDK to embed photo-realistic try-on flows directly on your product pages in days.
Configuration
TryOnKit Live Variables
Live preview
T-Shirt
demo-clothes-tshirt
Authentication
Use the demo key or paste your own embed key.
Leave as YOUR_EMBED_KEY for the demo key, or paste your tk_emb_ key.
Product
Garment image for the try-on job. productId is auto-generated here.
productId is generated as demo-clothes-tshirt in this demo. Use your store SKU when integrating on your site.
Taxonomy
Maps your product to the correct AI model family.
Appearance
Button copy and brand accent color.
<!-- Load TryOnKit embed SDK (embedKey required in URL) -->
<script src="https://your-api.tryonkit.ai/api/v1/embed/embed.js?embedKey=YOUR_EMBED_KEY&primaryColor=39D98A&buttonText=Try%20On%20Virtually&category=clothes&subCategory=tshirt"></script>
<img id="product-image" src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=600&h=600&q=80" alt="Product" />
<div id="tk-tryon-container"></div>
<script>
TryOnKit.init({
apiKey: "YOUR_EMBED_KEY",
targetElement: "#tk-tryon-container",
productId: "demo-clothes-tshirt",
productImage: document.getElementById("product-image").src,
category: "clothes",
subCategory: "tshirt",
buttonText: "Try On Virtually",
primaryColor: "#39D98A",
extraDescription: "upper_wear · tshirt"
});
</script>High Resolution API References
The client side initialization takes key properties defining the user experience, security, product taxonomy mappings, and visually adaptive elements.
| Property | Type | Required | Description |
|---|---|---|---|
| apiKey | string | Yes | Your tk_emb_ embed key from the client dashboard (API Keys → Embed). Also pass as embedKey in the script URL. |
| productId | string | Yes | Merchant inventory SKU ID used by TryOnKit AI vectors to match target apparel silhouettes. |
| productImage | string (URL) | Yes | Public URL of the garment image on your product page. Passed to the try-on job as the garment reference. |
| category | "clothes" | "footwear" | "accessories" | Yes | Top-level product taxonomy that selects which AI synthesizer model family handles the render. |
| subCategory | "tshirt" | "shirt" | "pant" | "dress" | ... | No | Granular garment type used to refine fit warping and drape simulation. |
| targetElement | string | Element | No (Deferred) | The CSS selector path (e.g. #tk-tryon-container) or reference container. If empty, you can call renderButton manually. |
| buttonText | string | No | Label on the try-on CTA button. Can also be set via the embed script URL query param. |
| primaryColor | string (hex) | No | Brand accent color for the try-on button and modal highlights. |
Ultralight Bundle Size
Under 25KB gzipped. We minimize the impact on your initial LCP while providing a rich, high-performance try-on modal that loads asynchronously inside sandboxed targets.
- ✓ Code-split asynchronous loader
- ✓ Tree-shakable ES6 exports
- ✓ Zero external CSS code library bloat
Complete UI Adaptability
Customize every pixel of the try-on button, portrait capture frame, and synthesized output canvas to match your store's unique layouts.
- ✓ Custom CSS layout definitions
- ✓ Multi-language localized tags (i18n)
- ✓ Complete transactional hook mappings
One SDK. One button.
Endless possibilities.
Integrate TryOnKit in minutes. Pass the product image, SKU, and category—our SDK handles the modal, upload flow, AI communication, and state management automatically.
- Lightweight bundle (< 25kb gzipped)
- Fully customizable UI themes
- WebHooks for conversion tracking
- Support for React, Vue, and vanilla JS
<script src="https://cdn.tryonkit.ai/sdk.js"></script
<div id="tryon-button"></div
<script>
TryOnKit.init({
apiKey: "MERCHANT_API_KEY",
productId: "SKU-1001",
productImage: "https://store.com/product.png",
targetElement: "#tryon-button",
category: "upper_wear",
buttonText: "Try On Virtually"
});
</scriptSDK_v2.0.4
STABLE PRODUCTION
Need assistance
getting started?
Book a live sandbox tour with our integration team. We help define custom webhook infrastructures, optimize LCP scores, and customize multi-gender portrait parameters.