Solutions
Virtual Try-On SDK
Developer-first JavaScript SDK — integrate in minutes with a single script tag, no backend required to get started.
Simple SDK integration
Load tryonixs-sdk.js from a CDN script tag, call Tryonixs.init({ apiKey }) once per page, then Tryonixs.open({ productId, imageUrl, productName }) whenever a shopper clicks a "Try On" button. The SDK handles key validation, camera permissions, face tracking, and rendering — you just supply a product ID and a transparent PNG image URL.
SDK architecture
- init() and open()
- Modal iframe
- Session validation
init() registers your public API key for the page session. open() validates that key and your domain against the Tryonixs backend, records an analytics session, and launches a fullscreen modal with an iframe pointed at the try-on experience — isolating the camera and rendering code from your storefront's own JavaScript.
Code example
A minimal integration is two script blocks: load the SDK, then wire a button click handler. See the code sample below and our full API reference for every parameter.
Framework support
- React / Next.js
- Plain HTML
- WordPress / WooCommerce
- Shopify Liquid
Because the SDK is a plain script tag with a global Tryonixs object, it works identically whether you're calling it from a React useEffect, a Next.js client component, a static HTML page, a WordPress shortcode, or a Shopify Liquid snippet — no framework-specific wrapper required.
Which category modules are available
Eyewear and lipstick try-on are production-ready today. Foundation shade matching is in beta (uses on-device AI skin segmentation for shade accuracy). Makeup, jewelry, and fashion/accessories modules are on the roadmap — contact us if you want early access as they roll out.
Frequently asked questions
Do I need a backend to use the SDK?
No. The public API key validates client-side against Tryonixs's servers. Server-side validation via the REST API is available if you want stricter control, but isn't required to get started.
Does the SDK work with React and Next.js?
Yes. Load the script via next/script or a standard <script> tag and call Tryonixs.open() from a client component's event handler — the SDK doesn't depend on any specific frontend framework.
Can I customize the "Try On" button myself?
Yes. The SDK doesn't render any button for you — you build your own button with your own styling and call Tryonixs.open() in its onClick handler, so it matches your site's design exactly.
What image format does the SDK expect?
A transparent PNG for the imageUrl parameter — a frame image without a model's face for eyewear, or a shade swatch for beauty products. Images with a model face baked in produce distorted AR results.
Launch virtual try-on today
Free Starter plan — 15 products, unlimited try-on sessions, no credit card required.
Create free account