# WEARFITS Virtual Try-On Widget

Add a virtual try-on modal to any website with one script tag — no build step,
no dependencies. The widget handles the API calls for you; you only provide
product data. For the underlying REST contract see https://api.wearfits.com/doc.

## Install

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

This defines `window.Wearfits.openTryOn(config)`.

## 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'],
          variants: [{ id: 'v1', size: 'M' }]
        }
      ],
      customer: { gender: 'female', height: 170 }
    });
  });
</script>
```

## openTryOn config

| Field | Purpose |
| --- | --- |
| `products` | Array of product objects (see below). `product` accepts a single object. |
| `apiKey` | Overrides the `data-api-key` attribute. |
| `apiBase` | Point at a backend proxy instead of calling the API directly. |
| `customer` | Optional `{ gender, height }` to prefill the form. |
| `webhookUrl` | Optional server-to-server completion callback. |

## Product object

`{ id, name, category, images[], sizes[], variants[] }`

Category maps to a garment slot:

- `top` -> topGarment
- `bottom` -> bottomGarment
- `full-body` / `dress` -> fullBodyGarment
- `shoe` / `shoes` -> shoes

At least one of top/bottom/full-body must be present per try-on; `shoes` is an
add-on. For footwear-only AR try-on, use the shoe-3d API instead.

## What the widget does

1. Renders product cards plus an avatar-input form (saved digitalTwinId, face
   image, silhouette image, or height).
2. Validates input client-side, submits the virtual fitting, and polls the job.
3. Persists the returned `digitalTwinId` in `localStorage` for repeat visits.
4. Shows the result image, or a clear error message.

## Security

The widget calls the API directly from the browser with the supplied key. For
production, use a short-lived/scoped token, or set `apiBase` to a backend proxy
that injects a service key server-side. The virtual-fitting and job-status
endpoints are CORS-enabled for cross-origin storefront use.

For a backend / non-browser integration, see the `wearfits-api-integration`
skill and the OpenAPI spec at https://api.wearfits.com/doc.