# Website widget & deep links

Brands can drive traffic from their own site into Drape with a **Shop on Drape**
button (and related deep links / QR). Shoppers try on and check out **in the Drape
app** — this is not an external cart embed and there is no CDN `widget.js`.

There is **no public web storefront**. `{slug}.drape.to` is the brand portal host
(login / dashboard). Shopper-facing bridge pages live under `/shop` and `/p/…`.

## What is ready today

| Capability | Status |
|---|---|
| HTML button linking to `{slug}.drape.to/shop` | **Ready** — generate in brand portal |
| Customize CTA text, color, position | **Basic / Premium** |
| Product QR landing `{slug}.drape.to/p/{code}` | **Ready** — rich product details + Open in app |
| Brand shop bridge `{slug}.drape.to/shop` | **Ready** — brand profile + Open in app |
| Hosted JS try-on widget on brand.com | **Not available** |

Portal path: **Website widget** at [brand.drape.to/widget](https://brand.drape.to/widget).

## Shopper URLs

| URL | Purpose |
|---|---|
| `https://{slug}.drape.to/shop` | Brand bridge → `drape://stores/{storeId}` |
| `https://{slug}.drape.to/p/{qr_code}` | Product bridge → `drape://product/{productId}` |
| `https://{slug}.drape.to/l/{location_code}` | In-store door check-in |

Bare `https://{slug}.drape.to/` is the **brand portal** (staff login), not a catalog.

## Install the website button

1. Approve your brand so `https://yourbrand.drape.to/shop` is live.
2. Open **Website widget** in the brand portal.
3. (Basic / Premium) set button text, primary color, and position → **Save settings**.
4. **Copy** the embed code.
5. Paste into your site HTML (footer, hero, Shopify custom Liquid block, WordPress custom HTML, etc.).
6. Publish and verify the button opens the shop bridge (and the Drape app on mobile).

### Example embed (shape)

The portal generates a snippet like:

```html
<!-- Shop on Drape — try-on and checkout stay on Drape. -->
<div style="position:fixed;bottom:24px;right:24px;z-index:9999;">
  <a href="https://yourbrand.drape.to/shop"
     style="display:inline-flex;align-items:center;justify-content:center;background:#000;color:#fff;padding:12px 20px;border-radius:999px;font:600 14px/1 system-ui,sans-serif;text-decoration:none;">
    Shop on Drape
  </a>
</div>
```

Use **Inline** position when the button should sit in a specific page section instead of floating.

## Positions

| Position | Behavior |
|---|---|
| Bottom right / left | Fixed corner floating CTA |
| Top right | Fixed top-corner CTA |
| Inline | No fixed positioning — place wherever you paste |

## Deep links (app)

| Scheme | Opens |
|---|---|
| `drape://stores/{storeId}` | Brand store screen |
| `drape://stores/{slug}` | Same screen (slug resolved) |
| `drape://product/{productId}` | Product detail / try-on |

## What this is not

- Not a Shopify / WooCommerce cart plugin
- Not an iframe or script that runs try-on on your domain
- Not a browsable web catalog or checkout
- Not related to the **iOS home-screen widget** in the Drape consumer app

Checkout and try-on always complete in the Drape app so catalog, inventory, and Stripe Connect stay consistent.

## Related

- Brand portal: [Integrations](https://brand.drape.to/integrations)
- Order webhooks (Premium): [API & webhooks](./webhooks.md)
- Product overview for brands: [For brands](./for-brands.md)
- Policy: website deep links / QR only (no external checkout)