Finance Widget

The Finance Widget exposes the protocol treasury for a seller (and for buyers / dispute resolvers / agents who have funds locked up): per-token available balances, deposit, withdraw. Embed it where sellers manage their account — a dashboard, a back-office page, or a settings modal.

Under the hood it's @bosonprotocol/react-kit's <FinanceWidget />, surfaced through the hosted build at widgets.bosonprotocol.io.

Quickest embed: script + button

<script async type="text/javascript" src="https://widgets.bosonprotocol.io/scripts/boson-widgets.js"></script>
 
<button id="boson-finance"
  data-config-id="production-137-0"
  data-seller-id="12">
  Manage funds
</button>

The widget filters to the connected wallet by default. To force a specific seller (e.g. when the connected wallet is the assistant and you want to manage a different seller's treasury), pass data-seller-id together with data-with-external-signer="true".

Attributes

Attribute	Required?	Notes
`data-config-id`	Yes	See Networks → ConfigIds matrix.
`data-seller-id`	Together with `data-with-external-signer`	On-chain entity ID to manage. Without it, the widget falls back to the connected wallet's entity.
`data-with-external-signer`	Together with `data-seller-id`	`"true"` means you'll sign transactions externally and pass them through — useful when the seller is a smart account or held in custody.
`data-look-and-feel`	No	`"modal"` (default) or `"regular"`.
`data-theme-overrides`	No	JSON-encoded CSS variable overrides.

Iframe form (no JS loader)

<iframe
  src="https://widgets.bosonprotocol.io/#/finance?configId=production-137-0&sellerId=12&withExternalSigner=true"
  width="100%" height="800"
  allow="clipboard-write; web-share">
</iframe>

Every data-* attribute maps 1:1 to a URL query param of the same name (camelCase, without the data- prefix).

What the widget shows

For a seller account (or any account-holding entity):

Available balances per token — only what's withdrawable, not what's locked in active exchanges (COMMITTED, REDEEMED, DISPUTED).
Deposit — top up the treasury per token; needed for offers with sellerDeposit > 0, for pre-minted offers, and for buyer-side prepayment under buyer-initiated offers.
Withdraw — pull tokens out to the entity's treasury address. Batched by token.

Funds locked in active escrow are intentionally omitted — withdrawing them isn't possible until the corresponding exchanges finalise. To inspect locked funds, query the subgraph directly (see Concepts → Funds, escrow & payouts).

React Kit — when you want full control

import { FinanceWidget } from "@bosonprotocol/react-kit"
 
<FinanceWidget
  configId="production-137-0"
  envName="production"
  sellerId="12"
  withExternalSigner
  withReduxProvider
  withWeb3React
  withGlobalStyle
  walletConnectProjectId={WC_PROJECT_ID}
  // …
/>

See the widgets repo for the complete prop list.

Common gotchas

Treasury vs. wallet. Withdrawal goes to the treasury address configured on the entity, not the wallet that signed the withdraw. To redirect, call updateSeller first.
Per-token withdrawal. One withdrawFunds call takes an array of (tokenAddress, amount) pairs — the widget batches the user's selection into a single transaction.
Native vs. ERC-20. Native gas tokens appear as 0x0000…0000 in balances and don't need approvals. ERC-20s show the symbol resolved via the supported-tokens config.
Gas isn't free. Even when the widget hides it (most flows use meta-tx where possible), some chains require the signer to hold gas. Surface that requirement to the user when balance is empty.
DR and agent treasuries work the same way. Set data-seller-id to the DR or agent ID and the widget renders their balances; the protocol treats all entity-holders uniformly under FundsHandlerFacet.