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: 'brc20:0:xwel', branch: swap };
</script>
<script src="https://widget-demo.brotocol.xyz/v1.js"></script>Token format: brc20:CHAIN_ID:TOKEN_TICKER
<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.
Last updated