JavaScript Widget
Add virtual try-on to any website with a single line of code. No coding required.
Overview
The WillItFit Widget is a lightweight, self-contained JavaScript module that automatically detects product images on your website and adds a "Try On" button overlay. When users click the button, a modal opens where they can upload their photo and see the virtual try-on result.
Installation
Add the following script tag to your website, ideally before the closing </body> tag:
<script src="https://cdn.willitfit.ai/widget.js" data-api-key="YOUR_API_KEY"></script>That's it! The widget will automatically detect product images on your page and add the "Try On" button. Replace YOUR_API_KEY with your actual API key from your dashboard.
Configuration Options
Customize the widget behavior using data attributes on the script tag:
<script
src="https://cdn.willitfit.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-theme="#6366f1"
data-button-text="Virtual Try-On"
data-position="bottom-left"
data-modal-width="520"
data-locale="en"
></script>| Attribute | Type | Required | Default | Description |
|---|---|---|---|---|
| data-api-key | string | Required | - | Your WillItFit API key |
| data-theme | string | Optional | #10b981 | Primary theme color (hex) |
| data-button-text | string | Optional | Try On | Text displayed on the button |
| data-position | string | Optional | bottom-right | Button position: top-right, top-left, bottom-right, bottom-left |
| data-selector | string | Optional | auto-detect | CSS selector for product images |
| data-modal-width | number | Optional | 480 | Modal width in pixels |
| data-locale | string | Optional | en | Language code: en, es, hi |
Customization
Match the widget to your brand by setting a custom theme color:
#10b981#6366f1#f43f5e#f59e0b<!-- Green theme (default) -->
<script src="https://cdn.willitfit.ai/widget.js" data-api-key="KEY" data-theme="#10b981"></script>
<!-- Purple theme -->
<script src="https://cdn.willitfit.ai/widget.js" data-api-key="KEY" data-theme="#6366f1"></script>
<!-- Rose theme -->
<script src="https://cdn.willitfit.ai/widget.js" data-api-key="KEY" data-theme="#f43f5e"></script>Localization
The widget supports multiple languages. Set the language using the data-locale attribute:
<!-- Spanish -->
<script src="https://cdn.willitfit.ai/widget.js" data-api-key="KEY" data-locale="es"></script>
<!-- Hindi -->
<script src="https://cdn.willitfit.ai/widget.js" data-api-key="KEY" data-locale="hi"></script>JavaScript API
For advanced use cases, you can interact with the widget programmatically:
// The widget exposes a global API after loading
const widget = window.WillItFitWidget;
// Get version
console.log(widget.version); // "1.0.0"
// Create a new widget instance with custom config
const customWidget = widget.create({
apiKey: 'YOUR_API_KEY',
theme: '#6366f1',
selector: '.my-custom-product-images',
position: 'top-right',
onTryOnComplete: (result) => {
console.log('Try-on result:', result);
// Send to analytics, etc.
}
});