Bridge

Swap widget iframe

The Swap widget iframe makes it easy to add cross-chain token swaps to your app. Just add an iframe to your HTML and get a fully customizable swap widget - no build setup required.

• Cross-chain token swaps across 90+ blockchains
• Route optimization to find the best path for any token pair
• Dark and light mode support
• Display fiat values in multiple currencies

The swap widget supports various query parameters to customize the default token selection. All parameters are optional - if not set, the widget will display without any pre-selected tokens.

Swap Widget Playground

Try out the Swap Widget in our live playground

You can customize the swap widget using query parameters as mentioned below.

You can prefill the buy and sell token selections using the following parameters:

By default the widget uses the "dark" theme. You can set the light theme by passing the theme=light query parameter.

By default the fiat value of the token amounts is displayed in USD. You can change the currency by setting the currency query parameter.

Show fiat values in Euro (EUR) in the widget.

By default, the widget displays thirdweb branding at the bottom. You can hide this by setting the showThirdwebBranding query parameter to false.

The swap widget iframe sends events to the parent window using postMessage when a swap succeeds or fails.

You can listen for these events to handle the swap result in your application.

window.addEventListener("message", (event) => {
  // verify that message is from thirdweb swap widget iframe
  if (
    event.origin === "https://thirdweb.com" &&
    event.data.source === "swap-widget"
  ) {
    if (event.data.type === "success") {
      console.log("Swap successful!");
    }
 
    if (event.data.type === "error") {
      console.error("Swap failed with error:", event.data.message);
    }
  }
});