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:

A configuration script
The widget loader script

Examples

<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

<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

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.

PreviousOverview NextAdd a New Chain

Last updated 8 months ago

hashtagOverview

hashtagIntegration

hashtagExamples

hashtagNeed Help?

Overview

Integration

Examples

Need Help?