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

# Embed (iframe)

> Drop a deposit/withdraw UI into your app with one line of HTML.

The fastest path to live yield in your product: one iframe, end users can deposit, accrue, and withdraw against your `BarkerEngine` contract. The iframe handles wallet connection, gas, transaction confirmations, and APY display.

If you'd rather build your own UI on top of the REST API and call the engine contract directly, see [Headless API integration](/integration-api). Both modes share the same engines, the same key, the same fee split — only the UI surface differs. See [Choosing an integration mode](/integration-modes) if you're undecided.

## One-line integration

```html theme={null}
<iframe
  src="https://app.barker.money/embed/your-product-slug"
  width="100%"
  height="640"
  frameborder="0"
  allow="clipboard-write"
></iframe>
```

Replace `your-product-slug` with the slug of the product you have provisioned (visible in [Portal → Products](https://portal.barker.money/products) — there's a copy-embed button on each card).

That's it. No API key in the iframe URL — slugs are public, the embed authenticates against the on-chain engine, not the API.

## Sizing

| Mode                        | Recommended height                                     |
| --------------------------- | ------------------------------------------------------ |
| Desktop card on a dashboard | `640px`                                                |
| Mobile full-screen          | `100vh` (mind the browser toolbar)                     |
| Tight modal                 | `560px` minimum — under that, the deposit form scrolls |

If your container can flex, set `min-height: 640px` and `height: 100%`. We don't auto-resize via `postMessage` today — the iframe content fits whatever height you give it.

## Theming (Portal-configured, recommended)

Theme is configured **per-product, in the Portal**, not via the URL. Open [Portal → Theme](https://portal.barker.money/theme) and pick the product — color, logo, and brand text are saved on our side and applied to every render. Same iframe URL renders consistently across hosts.

## Theming (URL override, for testing)

For ad-hoc preview or A/B testing, these query params take precedence over the saved theme:

| Param          | Type                              | Example                                       |
| -------------- | --------------------------------- | --------------------------------------------- |
| `primaryColor` | CSS color (hex / `rgb()` / named) | `?primaryColor=%23FF6600`                     |
| `partnerName`  | Display name shown in the header  | `?partnerName=Acme%20Pay`                     |
| `logo`         | URL to your logo (https only)     | `?logo=https%3A%2F%2Fcdn.acme.com%2Flogo.svg` |

URL-encode the values — `#FF6600` becomes `%23FF6600`.

```html theme={null}
<iframe
  src="https://app.barker.money/embed/acme-usdc-base?primaryColor=%23FF6600&partnerName=Acme%20Pay&logo=https%3A%2F%2Fcdn.acme.com%2Flogo.svg"
  width="100%"
  height="640"
  frameborder="0"
></iframe>
```

For anything beyond color/logo/name (custom CTA copy, per-locale strings, hide-section toggles), use Portal Theme — it covers more surfaces and survives the URL.

## Sandbox vs production

* **Sandbox**: any product slug from your sandbox tier in the Portal. Wired to a testnet `BarkerEngine` with mintable mock USDC — point the iframe at it during development.
* **Production**: production-tier slug. Real chain, real USDC.

Same URL pattern, just swap the slug.

## Wallet UX

The embed uses Reown AppKit (formerly WalletConnect). End users:

1. See your branding (logo, color, name)
2. Click "Connect Wallet" → standard WalletConnect modal
3. Connect MetaMask / Rabby / Coinbase Wallet / mobile via QR
4. Approve USDC spend → deposit → receive engine shares
5. APY accrues passively in the same view
6. Withdraw any time — burn shares, receive USDC + accrued yield

Gas is paid by the end user from their connected wallet.

## Production checklist

* Product status is `active` (not `pending_deploy`) in [Portal → Products](https://portal.barker.money/products)
* Theme configured in [Portal → Theme](https://portal.barker.money/theme)
* Your CSP allows `frame-src https://app.barker.money` (or `frame-src *` while you're testing)
* Mobile viewport tested — the deposit form scrolls under 560px height

## When iframe is the wrong choice

Build with [headless API](/integration-api) instead if:

* The flow needs to be inline in a multi-step form (KYC → deposit → confirmation)
* You want native mobile UI (iframe works in WebView but loses native feel)
* You want one screen to choose among several Barker products with custom comparison UI (one iframe = one product, so 3 tiers = 3 iframes)
* You need server-side rendering with zero client JS

See [Multi-tier products](/multi-tier-products) for the 3-tier case specifically — both modes can deliver it, headless gives more layout control.