Add BroWidget

Customize and integrate the BroSwap and BroBridge widget for your dApp or website!

Overview

BroWidget makes it easy to integrate cross-chain functionality directly into your dApp or website — no complex setup required.

It supports two features:

• 🌉 BroBridge: Supports bridging between Bitcoin (including Runes and BRC20), Stacks, and EVM chains

• 🔄 BroSwap: Supports swapping within Bitcoin-based assets (BTC, Runes, and BRC20)

💻✨ See the widget in our interactive demo!

Integration

Integrate the widget by adding two script tags to your HTML:

1. A configuration script

2. The widget loader script

Examples

Runes

<script>
  window.__broWidgetConfig = { toToken: 'runes:0:897823:2026', branch: swap };
</script>
<script src="https://widget-demo.brotocol.xyz/v1.js"></script>

Token format: runes:CHAIN_ID:RUNE_ID:RUNE_NUMBER

BRC20

<script>
  window.__broWidgetConfig = { toToken: 'brc20:0:xwel', branch: swap };
</script>
<script src="https://widget-demo.brotocol.xyz/v1.js"></script>

Token format: brc20:CHAIN_ID:TOKEN_TICKER

Stacks

<script>
  window.__broWidgetConfig = {
    toToken: 'stacks:0:SP2XD7417HGPRTREMKF748VNEQPDRR0RMANB7X1NK.token-abtc',
    branch: bridge,
  };
</script>
<script src="https://widget-demo.brotocol.xyz/v1.js"></script>

Token format: stacks:CHAIN_ID:CONTRACT_ADDRESS.TOKEN_NAME

EVM

On Ethereum:

<script>
  window.__broWidgetConfig = {
    toToken: 'evm:1:0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599',
    branch: bridge,
  };
</script>
<script src="https://widget-demo.brotocol.xyz/v1.js"></script>

Token format: evm:CHAIN_ID:TOKEN_CONTRACT_ADDRESS

For more EVM Chains examples, checkout here.

Need Help?

For additional support, contact our team on Discord.