> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wearo.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How Wearo works

> Understand the Wearo virtual try-on architecture before integrating.

# How Wearo works

## The try-on flow

1. **Shopper lands on a product page** — Wearo's widget script loads and finds your product image using a CSS selector.
2. **"Try it on" button appears** — injected automatically next to the product image.
3. **Shopper uploads a photo** — the widget opens a modal where they can take or upload a photo.
4. **Generation happens** — the photo and product image are sent to Wearo's AI. This consumes 1 credit.
5. **Result is displayed** — the shopper sees themselves wearing the product, inside the modal.
6. **Result is stored** — the generated image is permanently stored at a public URL.

## Components

| Component                | What it does                                          |
| ------------------------ | ----------------------------------------------------- |
| **Widget** (`widget.js`) | Drop-in JS that injects the button and handles the UI |
| **API**                  | REST endpoint that runs the AI generation             |
| **Dashboard**            | Where you manage keys, credits, and analytics         |

## Credits

* 1 successful generation = 1 credit
* `productType: "wedding-dress"` (bridal train rendering) = 2 credits
* Credits are only consumed on success — failed generations are refunded automatically
* Credits never expire

## Widget vs Direct API

|                    | Widget                 | Direct API                        |
| ------------------ | ---------------------- | --------------------------------- |
| Integration effort | Low (4 lines of HTML)  | Higher (custom UI + server calls) |
| Best for           | Standard product pages | Headless / custom flows           |
| Who handles the UI | Wearo                  | You                               |
| Pricing            | Same credit cost       | Same credit cost                  |

For most stores, the **Widget** is the right choice. Use the **Direct API** only if you need full control over the UI or are running a headless architecture.