Embeddable Widget

The SuperStyle widget automatically scans your page for product images and adds a “Try on with superstyle” button on hover. Customers upload a selfie and see themselves wearing your products — no backend work required.

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',
  });
</script>

That’s it. The widget will find all <img> elements on your page and add a hover overlay with a “Try on with superstyle” button.

How it works

1. Auto-detect images — The widget scans the page for <img> elements (filtered by selector and minSize)
2. Hover overlay — A “Try on with superstyle” button appears when customers hover over a product image
3. Upload selfie — Customer uploads a photo of themselves (saved to localStorage for repeat visits)
4. AI generation — SuperStyle generates a realistic try-on image (10-30 seconds)
5. Download — Customer sees the result and can download it

Configuration options

Option	Type	Default	Description
apiKey	string	—	Your SuperStyle API key (required)
theme	string	"light"	"light" or "dark" for the modal
selector	string	"img"	CSS selector to target specific images
minSize	number	80	Minimum image dimension (px) to add overlay
onResult	function	—	Callback with the result image URL

E-commerce integration

Target only your product images with the selector option:

<div class="product-grid">
  <div class="product-card">
    <img class="product-img" src="/products/denim-jacket.jpg" alt="Denim jacket" />
    <h3>Oversized Denim Jacket</h3>
    <p>$89.99</p>
  </div>
  <div class="product-card">
    <img class="product-img" src="/products/leather-jacket.jpg" alt="Leather jacket" />
    <h3>Black Leather Moto Jacket</h3>
    <p>$149.99</p>
  </div>
</div>

<script src="https://docs.meriedith.com/superstyle-widget.js"></script>
<script>
  SuperStyle.init({
    apiKey: 'ss_your_key_here',
    theme: 'dark',
    selector: '.product-img',
  });
</script>

Returned methods

SuperStyle.init() returns an object with methods you can call programmatically:

const widget = SuperStyle.init({ apiKey: 'ss_your_key_here' });

// Manually open the try-on modal for a specific image
widget.open('https://example.com/jacket.jpg');

// Re-scan page for new images (after AJAX content loads)
widget.refresh();

// Remove all overlays and clean up
widget.destroy();

Selfie persistence

When a customer uploads a selfie, it’s saved to localStorage so they don’t have to re-upload on every visit. They can remove their saved photo from the modal at any time.

Styling

The widget uses its own scoped CSS and won’t conflict with your site’s styles. The hover overlay uses a gradient fade and the modal is self-contained.

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
• Monitoring usage in the Developer Portal
• All endpoints are rate-limited to 20 requests/day per key