Skip to main content
The @souldi/try-on widget is a lightweight, drop-in JavaScript button that adds AI virtual try-on to any e-commerce site. It handles the entire end-user flow — login, photo upload, generation, and result display — and talks only to the Souldi API, never directly to any third-party service.
Because every request flows through the Souldi API, your customers’ photos stay private and your store never has to manage authentication, storage, or AI infrastructure.

What the widget does

Passwordless login

One-time-code email login (OTP) — no passwords. The session is remembered, so returning customers skip straight to generating.

Photo upload

Customers upload a single base photo, which is automatically preprocessed before generation.

AI try-on in seconds

Generates a realistic image of the customer wearing your garment in just a few seconds.

Live result swap

Optionally auto-replaces a product <img> on the page with the generated try-on, right where the customer is shopping.

Outfit combinator

Layer additional garments onto a previous try-on result to build a complete look.

Full theming control

Dark and light modes, custom colors, and fonts to match your brand — see the Customization page.

Shadow DOM isolation

The widget’s UI is fully encapsulated. Your site’s CSS never leaks in, and the widget never breaks your styling.

Event callbacks

React in your own UI with onGenerationStart, onGenerationSuccess, onError, and onLogout.

Works anywhere

The widget is framework-agnostic. It runs on any website — plain HTML, Shopify, WooCommerce, custom storefronts, React, Vue, and everything in between — because it ships as a standard script (a UMD global named VirtualTryOn) or an NPM ES module.
No build tooling is required for the script-tag route. Drop in one <script> tag and you’re ready to go.

Install it

Pick whichever fits your stack. The CDN route is the fastest way to try it out; NPM is the best fit for build-tooling projects.
The current published version is 0.1.12.

Builds shipped

Browser support

Next steps

Quickstart

Get the widget running and run your first try-on.

Customization

Match your brand with custom colors, fonts, and themes.