Embedding methods

The hosted widgets ship in three flavours: a loader script that finds tagged buttons on your page, an <iframe> you embed directly, and a Zoid cross-origin component for more advanced cases.

Script + button (recommended)

<script src="https://widgets.bosonprotocol.io/scripts/boson-widgets.js" async></script>
<button id="boson-commit" data-config-id="..." data-product-uuid="...">Buy now</button>

Pros: simplest. The loader handles modal lifecycle, wallet connection, and event bubbling.

Iframe

<iframe
  src="https://widgets.bosonprotocol.io/#/commit?configId=production-137-0&productUuid=..."
  width="600" height="800"
  allow="clipboard-write; web-share"
></iframe>

Pros: works in environments where you can't run scripts (some CMS / locked-down pages).

Cons: communication is harder (use postMessage for events; see Postback URLs instead for server-side).

Zoid (cross-origin component)

import { create } from "@krakenjs/zoid"
 
const Commit = create({
  tag: "boson-commit",
  url: "https://widgets.bosonprotocol.io/#/commit",
  dimensions: { width: "600px", height: "800px" },
})
 
Commit.render({
  configId: "production-137-0",
  productUuid: "...",
  onCommit: (exchangeId) => { /* … */ },
}, "#mount")

Pros: typed props, lifecycle callbacks, full DOM isolation.

Cons: more setup; one more dependency.

When to use which

Need	Use
Simplest possible	Script + button
No JS allowed	Iframe
Typed props and callbacks	Zoid

Script + button (recommended)

Iframe

Zoid (cross-origin component)

When to use which

Next