# WEARFITS Storefront Modal Integration

Use the widget when a store wants to add a virtual try-on modal without building a full frontend integration.

## Script

```html
<script src="https://api.wearfits.com/widget/tryon.js" data-api-key="wf_public_or_proxy_token"></script>
```

## Open The Modal

```html
<button id="wearfits-tryon">Try on</button>
<script>
  document.getElementById('wearfits-tryon').addEventListener('click', function () {
    Wearfits.openTryOn({
      products: [
        {
          id: 'sku-123',
          name: 'White Cotton Shirt',
          category: 'top',
          images: ['https://shop.example/shirt.jpg'],
          sizes: ['S', 'M', 'L']
        }
      ],
      customer: { gender: 'female', height: 170 }
    });
  });
</script>
```

## Product Categories

- `top` maps to `topGarment`
- `bottom` maps to `bottomGarment`
- `full-body` maps to `fullBodyGarment`
- `shoe` maps to `shoes`

## Production Security

For production Shopify and WooCommerce stores, prefer a backend or app proxy that keeps service API keys server-side. The browser widget can point to a proxy by setting `apiBase` in `Wearfits.openTryOn(config)`.

## Customer State

Store the returned `digitalTwinId` in customer account metadata, a secure session, or browser storage when appropriate. Reusing this value makes later try-ons faster.