Embeddable Widget

The SuperStyle widget lets any website add virtual try-on functionality with minimal code. Users can upload a selfie and see themselves wearing your products.

Quick start

Add the script tag and initialize:

<script src="https://docs.meriedith.com/superstyle-widget.js"></script>
<script>
  SuperStyle.init({
    apiKey: 'ss_your_key_here',
    theme: 'dark',
    clothingImageUrl: 'https://example.com/jacket.jpg',
    clothingDescription: 'Black leather jacket',
    onResult: (imageBase64) => {
      console.log('Try-on complete!');
    }
  });
</script>

This adds a floating “Try On” button to your page. When clicked, it opens a modal that guides users through the try-on flow.

Configuration options

Option	Type	Required	Default	Description
apiKey	string	Yes	—	Your SuperStyle API key
theme	string	No	"light"	"light" or "dark"
clothingImageUrl	string	No	—	URL of the clothing item image
clothingDescription	string	No	—	Text description of the clothing
onResult	function	No	—	Callback with base64 result image

Widget flow

1. Floating button — A “Try On” button appears on your page
2. Upload selfie — User uploads or drags a photo of themselves
3. Confirm clothing — Pre-filled from config, or user enters a description
4. Loading — “Generating your try-on…” spinner (10-30 seconds)
5. Result — Shows the generated image with a download button

E-commerce integration example

On a product page, you can pre-fill the clothing details:

<div class="product-page">
  <h1>Oversized Denim Jacket</h1>
  <img src="/products/denim-jacket.jpg" alt="Denim jacket" />
  <p>$89.99</p>
</div>

<script src="https://docs.meriedith.com/superstyle-widget.js"></script>
<script>
  SuperStyle.init({
    apiKey: 'ss_your_key_here',
    clothingImageUrl: '/products/denim-jacket.jpg',
    clothingDescription: 'Oversized denim jacket in medium wash',
    onResult: (imageBase64) => {
      // Show result in a modal or save to user's account
      document.querySelector('#tryon-result').src =
        'data:image/jpeg;base64,' + imageBase64;
    }
  });
</script>

Styling

The widget uses its own scoped styles and won’t conflict with your site’s CSS. The floating button and modal are rendered inside a shadow DOM.

Security note

The widget makes API calls directly from the browser using your API key. For production use, consider:

• Using a restricted API key with limited permissions
• Implementing rate limiting on your backend
• Monitoring usage in the Developer Portal