Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Commit Widget · Boson Protocol
Skip to content

Commit Widget

The Commit Widget is the most-used widget. Place a button on your page; on click, it opens a modal that:

  1. Connects the buyer's wallet.
  2. Shows the offer details.
  3. Handles ERC-20 approval if needed.
  4. Calls commitToOffer.
  5. Confirms success and shows the new voucher (rNFT).

Embed

<script src="https://widgets.bosonprotocol.io/scripts/boson-widgets.js" async></script>
 
<button
  id="boson-commit"
  data-config-id="production-137-0"
  data-seller-id="12"
  data-product-uuid="ec00f1a5-2c96-4d22-9d80-2a7c12345678">
  Buy now
</button>

Key attributes

AttributeRequired?Notes
id="boson-commit"YesMarker so the widget script finds the button
data-config-idYesSee Networks → ConfigIds matrix
data-seller-idOne of theseTargets all offers from one seller
data-product-uuidOne of theseTargets a specific product (incl. variants)
data-bundle-uuidOne of theseTargets a bundle
data-offer-idOne of theseTargets a single offer
data-accountNoRestrict to one buyer wallet
data-look-and-feelNo"modal" (default) or "regular"

Full list at Reference → Widget URL params.

Variants & products

If you publish 3 variants under one productUuid, the widget lets the buyer pick a variant before committing. Each variant is its own offer underneath.

Programmatic open

If you don't want a button:

window.boson.openCommit({
  configId: "production-137-0",
  sellerId: "12",
  productUuid: "...",
})

Common gotchas

  • Wrong chain. The buyer's wallet must be on the chain that matches configId. The widget prompts a switch.
  • Iframe ancestors. If you embed inside another iframe, ensure the buyer's wallet provider supports nested-iframe access (some don't).
  • CSP. Allow widgets.bosonprotocol.io in script-src and frame-src.

Next