Skip to main content
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. Both modes share the same engines, the same key, the same fee split — only the UI surface differs. See Choosing an integration mode if you’re undecided.

​
One-line integration

<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 — 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

ModeRecommended height
Desktop card on a dashboard640px
Mobile full-screen100vh (mind the browser toolbar)
Tight modal560px 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. Theme is configured per-product, in the Portal, not via the URL. Open Portal → 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:
ParamTypeExample
primaryColorCSS color (hex / rgb() / named)?primaryColor=%23FF6600
partnerNameDisplay name shown in the header?partnerName=Acme%20Pay
logoURL to your logo (https only)?logo=https%3A%2F%2Fcdn.acme.com%2Flogo.svg
URL-encode the values — #FF6600 becomes %23FF6600. 
<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
  • Theme configured in Portal → 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 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 for the 3-tier case specifically — both modes can deliver it, headless gives more layout control.