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.

<script src="https://www.chainbridge.trading/widget.js" defer></script>

<div
  data-chainbridge-swap
  data-sell-token="USDC"
  data-buy-token="ETH"
  data-chain-id="1"
  data-theme="dark-blue"
  data-fee-recipient="0xYourWalletAddress"
  data-fee-bps="30"
></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.

Attribute	Type	Default	Description
data-sell-token	string	ETH	Default sell token symbol (e.g., USDC, WETH, DAI)
data-buy-token	string	USDC	Default buy token symbol
data-chain-id	number	1	Chain ID — 1 (Ethereum), 42161 (Arbitrum), 8453 (Base), 10 (Optimism)
data-theme	string	light	Theme variant — light, dark-blue, dark-orange, dark-green
data-mode	string	simple	Interface mode — simple or advanced
data-fee-recipient	address	—	Your wallet address to receive partner fees
data-fee-bps	number	—	Partner fee in basis points (100 bps = 1%)
data-width	string	420px	Widget iframe width
data-height	string	520px	Widget 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.