thirdwebDocs
Bridge

Bridge widget component

The Bridge widget component makes it easy to embed cross-chain swaps and fiat onramp UI into your app using thirdweb SDK.

Features

  • Cross-chain token swaps across 85+ blockchains
  • Fiat onramp support to buy tokens with credit/debit cards
  • Customizable UI - use prebuilt themes or override with your brand colors
  • Prefill token selections for a smoother user experience
  • Display fiat values in multiple currencies
  • Event callbacks to track user actions (success, error, cancel, disconnect)

Example

You will need a thirdweb project client id to use the BridgeWidget component. You can get your clientId by creating a project in the thirdweb dashboard.

import { BridgeWidget } from "thirdweb/react";
import { createThirdwebClient } from "thirdweb";
 
const client = createThirdwebClient({
  clientId: "YOUR_THIRDWEB_CLIENT_ID",
});
 
function Example() {
  return <BridgeWidget client={client} />;
}

Make sure to wrap component containing BridgeWidget with the ThirdwebProvider component.

import { ThirdwebProvider } from "thirdweb/react";
 
function Example() {
  return (
    <ThirdwebProvider>
      <YourApp />
    </ThirdwebProvider>
  );
}

API Reference

React

BridgeWidget Component

View the API reference for the BridgeWidget component

Try it out

Bridge Widget Playground

Try out the Bridge Widget in our live playground