ChainBridge

Add Crypto Swaps to Your App in 3 Minutes

Embed a fully-featured swap widget on your website. Your users can trade tokens at the best rates from 7 DEX aggregators, and you earn revenue on every swap.

1Drop-in Widget

Add two lines of HTML to your page. The script finds all elements with the data-chainbridge-swap attribute and renders an iframe widget inside each one.

<style="color:#e06c75">script src=style="color:#98c379">"https:style="color:#5c6370style="color:#98c379">">//www.chainbridge.trading/widget.js" defer></style="color:#e06c75">script>

<style="color:#e06c75">div
  data-chainbridge-swap
  data-sell-token=style="color:#98c379">"USDC"
  data-buy-token=style="color:#98c379">"ETH"
  data-chain-id=style="color:#98c379">"style="color:#d19a66">1"
  data-theme=style="color:#98c379">"dark-blue"
  data-fee-recipient=style="color:#98c379">"0xYourWalletAddress"
  data-fee-bps=style="color:#98c379">"style="color:#d19a66">30"
></style="color:#e06c75">div>

2React Component

For React or Next.js apps, use a simple iframe component with typed props.

function ChainBridgeWidget({
  sellToken = 'USDC',
  buyToken = 'ETH',
  chainId = 1,
  theme = 'dark-blue',
  feeRecipient,
  feeBps,
  width = 420,
  height = 520,
}) {
  const params = new URLSearchParams({
    sellToken,
    buyToken,
    chainId: String(chainId),
    theme,
    ...(feeRecipient ? { feeRecipient } : {}),
    ...(feeBps ? { feeBps: String(feeBps) } : {}),
  });

  return (
    <iframe
      src={`https://www.chainbridge.trading/widget?${params}`}
      width={width}
      height={height}
      style={{ border: 'none', borderRadius: 16, overflow: 'hidden' }}
      allow="clipboard-write"
      loading="lazy"
      title="ChainBridge Swap Widget"
    />
  );
}

3Configuration

Customize the widget with data attributes. All parameters are optional.

AttributeTypeDefaultDescription
data-sell-tokenstringETHDefault sell token symbol (e.g., USDC, WETH, DAI)
data-buy-tokenstringUSDCDefault buy token symbol
data-chain-idnumber1Chain ID — 1 (Ethereum), 42161 (Arbitrum), 8453 (Base), 10 (Optimism)
data-themestringlightTheme variant — light, dark-blue, dark-orange, dark-green
data-modestringsimpleInterface mode — simple or advanced
data-fee-recipientaddress—Your wallet address to receive partner fees
data-fee-bpsnumber—Partner fee in basis points (100 bps = 1%)
data-widthstring420pxWidget iframe width
data-heightstring520pxWidget iframe height

4Revenue Sharing

Earn on Every Swap

Set your wallet address as data-fee-recipient and specify a fee in basis points with data-fee-bps. Your fee is collected on top of the platform fee and sent directly to your wallet on each swap transaction.

Example: setting data-fee-bps="30" means you earn 0.30% on every swap routed through your widget. Fees are non-custodial — they are built into the swap transaction and settled on-chain.

Live Demo

This is the actual widget running in an iframe, just as it would appear on your website.

Get Started — Copy Embed Code

No API key required. No sign-up needed.