Embed a commit button in 5 minutes

What you'll build: a working "Buy now" button on an existing webpage that triggers the Boson commit flow. No SDK, no React, no build step.

Time: 5 minutes. Stack: any HTML page. Network: staging (Base Sepolia) by default.

1. Find your seller ID and product UUID

If you already have a seller account, look up your sellerId and the productUuid of the offer you want to sell — for example via the Boson dApp or via:

const offers = await sdk.getOffers({ where: { seller: yourAddress } })

If you don't yet have a seller account, do Quickstart → Build a marketplace first, or use a public test seller / product (see staging seed data in the agent-builder repo).

2. Drop in the HTML

<!doctype html>
<html>
<head>
  <title>My drop</title>
  <script src="https://widgets.bosonprotocol.io/scripts/boson-widgets.js" async></script>
</head>
<body>
  <h1>Buy my thing</h1>
 
  <button
    id="boson-commit"
    data-config-id="staging-84532-0"
    data-seller-id="2"
    data-product-uuid="ec00f1a5-2c96-4d22-9d80-2a7c12345678">
    Buy now
  </button>
</body>
</html>

That's it. Open the page; click "Buy now"; the widget opens a modal that:

Asks the buyer to connect a wallet.
Shows the offer details and price.
Walks them through approval (if ERC-20) and commit.
Returns a voucher (rNFT) to their wallet.

Production switch

Swap staging-84532-0 for production-137-0 (Polygon mainnet) or any other production ConfigId. Full list at Networks → ConfigIds matrix.

Common gotchas

Wrong network. The buyer's wallet must be on the chain that matches configId. The widget prompts them to switch.
Insufficient gas / token balance. The widget surfaces the error inline; nothing breaks server-side.
CSP blocks. If your site has a strict Content Security Policy, allow https://widgets.bosonprotocol.io for scripts and frames.

What this doesn't do

Doesn't persist orders to your backend. Use a postback URL or listen via webhooks.
Doesn't customize the modal beyond theming options. For full customization, use the Core SDK directly.

Widgets → Commit Widget for all options.
Widgets → Embedding methods for <iframe> and Zoid alternatives.
Widgets → Postback URLs & deep links to hook into your backend.

1. Find your seller ID and product UUID

2. Drop in the HTML

Production switch

Common gotchas

What this doesn't do

Next