# Add BroWidget

## 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**](https://widget-demo.brotocol.xyz/)!

## Integration

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

1. A configuration script
2. The widget loader script

### Examples

{% tabs %}
{% tab title="Runes" %}
{% code lineNumbers="true" %}

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

{% endcode %}

Token format: `runes:CHAIN_ID:RUNE_ID:RUNE_NUMBER`
{% endtab %}

{% tab title="BRC20" %}
{% code lineNumbers="true" %}

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

{% endcode %}

Token format: `brc20:CHAIN_ID:TOKEN_TICKER`
{% endtab %}

{% tab title="Stacks" %}
{% code lineNumbers="true" %}

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

{% endcode %}

Token format: `stacks:CHAIN_ID:CONTRACT_ADDRESS.TOKEN_NAME`
{% endtab %}

{% tab title="EVM" %}
On Ethereum:

{% code lineNumbers="true" %}

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

{% endcode %}

Token format: `evm:CHAIN_ID:TOKEN_CONTRACT_ADDRESS`

For more EVM Chains examples, checkout [here](https://widget-demo.brotocol.xyz/).
{% endtab %}
{% endtabs %}

## Need Help?

For additional support, contact our team on [Discord](https://discord.com/invite/brotocol).