From 41919024c3f5ddcfd252c35d69dd21d4495d8bc7 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 10 Dec 2025 17:53:09 +0000
Subject: [PATCH] Add bridge widget iframe docs, update path, link to docs
 (#8528)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `Bridge` and `Bridge Widget` functionalities, improving UI elements, adding new features, and updating documentation. It includes modifications to components, styling adjustments, and expanded capabilities for currency selection.

### Detailed summary
- Updated `Sidebar.tsx` to remove padding.
- Changed `page.mdx` headers from "Key Features" to "Features".
- Enhanced `reportBridgePageLinkClick` to include "integrate-bridge-widget".
- Modified `page.tsx` to include client ID instructions.
- Adjusted header font sizes in `header.tsx`.
- Improved `bridgeRedirects` to include new paths.
- Updated `bridge-widget` links in `sidebar.tsx`.
- Added `persistTokenSelections` and `currency` props to `UniversalBridgeEmbed`.
- Created `IframeCodePreview` component for iframe integration documentation.
- Added a new `BadgeLink` component for better user interaction.
- Expanded `BuyAndSwapEmbed` props to support currency and token selections.
- Updated documentation for `BridgeWidget` and `Iframe` integrations with examples.
- Enhanced `BridgePageUI` to include the new `AddBridgeWidgetLink`.
- Introduced multiple currency options for fiat values in widget interfaces.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Bridge widget available via Iframe, Script, and React component
  * Fiat currency selection for buy/swap widgets
  * Token selection persistence option
  * "Add Bridge widget" integration link added to Bridge page

* **Documentation**
  * New detailed guides and examples for Iframe, Script, and React integration
  * Code preview and embedding examples added

* **Style**
  * Typography, spacing, and layout refinements across Bridge pages
  * Navigation reorganized into a Bridge Widget group

* **Chores**
  * Added redirects for Bridge widget paths

<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/dashboard/src/@/analytics/report.ts      |   2 +-
 .../@/components/blocks/BuyAndSwapEmbed.tsx   |  11 +-
 .../(general)/components/bridge-page.tsx      |  13 +-
 .../client/UniversalBridgeEmbed.tsx           |   5 +
 .../components/client/badge-link.tsx          |  34 ++++
 .../bridge/(general)/components/header.tsx    |   4 +-
 .../src/app/bridge/(general)/page.tsx         |   2 +-
 .../app/bridge/{embed => widget}/layout.tsx   |   0
 .../{embed => widget}/opengraph-image.png     | Bin
 .../src/app/bridge/{embed => widget}/page.tsx |  40 +++++
 apps/portal/redirects.mjs                     |   5 +
 .../bridge-widget-dark.png                    | Bin
 .../bridge-widget-light.png                   | Bin
 .../iframe/iframe-code-preview.tsx            |  33 ++++
 .../app/bridge/bridge-widget/iframe/page.mdx  | 153 ++++++++++++++++++
 .../src/app/bridge/bridge-widget/page.mdx     |  61 +++++++
 .../app/bridge/bridge-widget/react/page.mdx   |  83 ++++++++++
 .../script}/page.mdx                          |  17 +-
 apps/portal/src/app/bridge/page.mdx           |   3 +-
 apps/portal/src/app/bridge/sidebar.tsx        |  18 ++-
 apps/portal/src/app/bridge/swap/page.mdx      |   2 +-
 apps/portal/src/components/others/Sidebar.tsx |   2 +-
 packages/thirdweb/src/exports/react.ts        |   1 +
 .../ui/Bridge/bridge-widget/bridge-widget.tsx |   6 -
 24 files changed, 467 insertions(+), 28 deletions(-)
 create mode 100644 apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx
 rename apps/dashboard/src/app/bridge/{embed => widget}/layout.tsx (100%)
 rename apps/dashboard/src/app/bridge/{embed => widget}/opengraph-image.png (100%)
 rename apps/dashboard/src/app/bridge/{embed => widget}/page.tsx (80%)
 rename apps/portal/src/app/bridge/{bridge-widget-script => bridge-widget}/bridge-widget-dark.png (100%)
 rename apps/portal/src/app/bridge/{bridge-widget-script => bridge-widget}/bridge-widget-light.png (100%)
 create mode 100644 apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx
 create mode 100644 apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx
 create mode 100644 apps/portal/src/app/bridge/bridge-widget/page.mdx
 create mode 100644 apps/portal/src/app/bridge/bridge-widget/react/page.mdx
 rename apps/portal/src/app/bridge/{bridge-widget-script => bridge-widget/script}/page.mdx (95%)

diff --git a/apps/dashboard/src/@/analytics/report.ts b/apps/dashboard/src/@/analytics/report.ts
index 22b6bec7b38..c054a150872 100644
--- a/apps/dashboard/src/@/analytics/report.ts
+++ b/apps/dashboard/src/@/analytics/report.ts
@@ -683,7 +683,7 @@ export function reportProductFeedback(properties: {
  *
  */
 export function reportBridgePageLinkClick(params: {
-  linkType: "bridge-docs" | "trending-tokens";
+  linkType: "bridge-docs" | "trending-tokens" | "integrate-bridge-widget";
 }) {
   posthog.capture("bridge page link clicked", params);
 }
diff --git a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
index 3ffadd77679..d41b0d6479e 100644
--- a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
+++ b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
@@ -4,7 +4,11 @@
 import { useTheme } from "next-themes";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { defineChain } from "thirdweb";
-import { BuyWidget, SwapWidget } from "thirdweb/react";
+import {
+  BuyWidget,
+  type SupportedFiatCurrency,
+  SwapWidget,
+} from "thirdweb/react";
 import type { Wallet } from "thirdweb/wallets";
 import {
   reportAssetBuyCancelled,
@@ -34,6 +38,7 @@ import { getConfiguredThirdwebClient } from "../../constants/thirdweb.server";
 type PageType = "asset" | "bridge" | "chain" | "bridge-iframe";
 
 export type BuyAndSwapEmbedProps = {
+  persistTokenSelections?: boolean;
   buyTab:
     | {
         buyToken:
@@ -65,6 +70,7 @@ export type BuyAndSwapEmbedProps = {
     | undefined;
   pageType: PageType;
   wallets?: Wallet[];
+  currency?: SupportedFiatCurrency;
 };
 
 export function BuyAndSwapEmbed(props: BuyAndSwapEmbedProps) {
@@ -118,6 +124,7 @@ export function BuyAndSwapEmbed(props: BuyAndSwapEmbedProps) {
 
       {tab === "buy" && (
         <BuyWidget
+          currency={props.currency || "USD"}
           amount={props.buyTab?.buyToken?.amount || "1"}
           chain={
             props.buyTab?.buyToken?.chainId
@@ -241,6 +248,8 @@ export function BuyAndSwapEmbed(props: BuyAndSwapEmbedProps) {
 
       {tab === "swap" && (
         <SwapWidget
+          currency={props.currency || "USD"}
+          persistTokenSelections={props.persistTokenSelections}
           client={client}
           theme={themeObj}
           className="!rounded-2xl !border-none"
diff --git a/apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx b/apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
index 86194992650..bb77205a655 100644
--- a/apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
+++ b/apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
@@ -8,6 +8,7 @@ import RoutesImage from "../assets/routes.png";
 import TokensImage from "../assets/tokens.png";
 import { bridgeStats, bridgeStatsNumbers } from "../data";
 import { AnimatedNumbers } from "./client/animated-numbers";
+import { AddBridgeWidgetLink } from "./client/badge-link";
 import { UniversalBridgeEmbed } from "./client/UniversalBridgeEmbed";
 import { BridgePageHeader } from "./header";
 
@@ -29,6 +30,12 @@ export function BridgePageUI(props: {
         />
       </div>
 
+      <div className="container max-w-2xl flex justify-center">
+        <AddBridgeWidgetLink />
+      </div>
+
+      <div className="h-10" />
+
       <HeadingSection title={props.title} />
 
       <div className="h-20 lg:h-40" />
@@ -43,7 +50,7 @@ export function BridgePageUI(props: {
 function HeadingSection(props: { title: React.ReactNode }) {
   return (
     <div className="container">
-      <div className="mb-3 lg:mb-6">{props.title}</div>
+      <div className="mb-3 lg:mb-5">{props.title}</div>
 
       <p className="text-muted-foreground text-sm text-pretty text-center lg:text-lg mb-6 lg:mb-8">
         Seamlessly move your assets across {bridgeStats.supportedChains} chains
@@ -81,9 +88,9 @@ function DataSquare(props: {
   imageClassName?: string;
 }) {
   return (
-    <div className="py-2 lg:py-0 size-full lg:size-[220px] rounded-xl border hover:bg-card bg-card/50 relative shrink-0 overflow-hidden">
+    <div className="py-2 lg:py-0 size-full lg:size-[200px] rounded-2xl border hover:bg-card bg-card/50 relative shrink-0 overflow-hidden">
       <div className="p-4">
-        <div className="flex items-center gap-1 text-3xl lg:text-5xl font-medium tracking-tight font-mono mb-1 h-[45px] lg:h-[56px]">
+        <div className="flex items-center gap-1 text-3xl lg:text-4xl font-semibold tracking-tight mb-1 h-[45px]">
           <AnimatedNumbers
             value={props.data}
             format={props.format}
diff --git a/apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx b/apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx
index 9adced4f7bc..79fb15a551d 100644
--- a/apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx
+++ b/apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import type { SupportedFiatCurrency } from "thirdweb/react";
 import { createWallet } from "thirdweb/wallets";
 import {
   BuyAndSwapEmbed,
@@ -19,12 +20,16 @@ export const bridgeWallets = [
 ];
 
 export function UniversalBridgeEmbed(props: {
+  persistTokenSelections?: boolean;
   buyTab: BuyAndSwapEmbedProps["buyTab"];
   swapTab: BuyAndSwapEmbedProps["swapTab"];
   pageType: "bridge" | "bridge-iframe";
+  currency?: SupportedFiatCurrency;
 }) {
   return (
     <BuyAndSwapEmbed
+      persistTokenSelections={props.persistTokenSelections}
+      currency={props.currency}
       buyTab={props.buyTab}
       swapTab={props.swapTab}
       pageType={props.pageType}
diff --git a/apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx b/apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx
new file mode 100644
index 00000000000..49c78c0ed1b
--- /dev/null
+++ b/apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx
@@ -0,0 +1,34 @@
+"use client";
+import { ArrowUpRightIcon } from "lucide-react";
+import Link from "next/link";
+import { reportBridgePageLinkClick } from "@/analytics/report";
+
+export function AddBridgeWidgetLink() {
+  return (
+    <BadgeLink
+      href="https://portal.thirdweb.com/bridge/bridge-widget"
+      label="Add Bridge widget in your app"
+      onClick={() => {
+        reportBridgePageLinkClick({ linkType: "integrate-bridge-widget" });
+      }}
+    />
+  );
+}
+
+function BadgeLink(props: {
+  href: string;
+  label: string;
+  onClick?: () => void;
+}) {
+  return (
+    <Link
+      href={props.href}
+      className="text-sm text-foreground bg-accent/50 rounded-full px-4 py-2 border hover:bg-accent flex items-center gap-2"
+      target="_blank"
+      onClick={props.onClick}
+    >
+      {props.label}
+      <ArrowUpRightIcon className="size-4 text-foreground" />
+    </Link>
+  );
+}
diff --git a/apps/dashboard/src/app/bridge/(general)/components/header.tsx b/apps/dashboard/src/app/bridge/(general)/components/header.tsx
index fdf785aebe5..635696b226e 100644
--- a/apps/dashboard/src/app/bridge/(general)/components/header.tsx
+++ b/apps/dashboard/src/app/bridge/(general)/components/header.tsx
@@ -13,10 +13,10 @@ import { bridgeWallets } from "./client/UniversalBridgeEmbed";
 
 export function BridgePageHeader(props: { containerClassName?: string }) {
   return (
-    <div className="border-b border-border/70">
+    <div>
       <header
         className={cn(
-          "container flex max-w-7xl justify-between py-3 lg:py-4",
+          "container flex max-w-5xl justify-between py-3 lg:py-5",
           props.containerClassName,
         )}
       >
diff --git a/apps/dashboard/src/app/bridge/(general)/page.tsx b/apps/dashboard/src/app/bridge/(general)/page.tsx
index b2f8877db8e..f2383681f1a 100644
--- a/apps/dashboard/src/app/bridge/(general)/page.tsx
+++ b/apps/dashboard/src/app/bridge/(general)/page.tsx
@@ -60,7 +60,7 @@ export default async function Page(props: {
           : undefined,
       }}
       title={
-        <h1 className="text-3xl md:text-6xl font-semibold tracking-tighter text-balance text-center">
+        <h1 className="text-3xl md:text-5xl font-semibold tracking-tighter text-balance text-center">
           Bridge and Swap tokens <br className="max-sm:hidden" /> across any
           chain, instantly
         </h1>
diff --git a/apps/dashboard/src/app/bridge/embed/layout.tsx b/apps/dashboard/src/app/bridge/widget/layout.tsx
similarity index 100%
rename from apps/dashboard/src/app/bridge/embed/layout.tsx
rename to apps/dashboard/src/app/bridge/widget/layout.tsx
diff --git a/apps/dashboard/src/app/bridge/embed/opengraph-image.png b/apps/dashboard/src/app/bridge/widget/opengraph-image.png
similarity index 100%
rename from apps/dashboard/src/app/bridge/embed/opengraph-image.png
rename to apps/dashboard/src/app/bridge/widget/opengraph-image.png
diff --git a/apps/dashboard/src/app/bridge/embed/page.tsx b/apps/dashboard/src/app/bridge/widget/page.tsx
similarity index 80%
rename from apps/dashboard/src/app/bridge/embed/page.tsx
rename to apps/dashboard/src/app/bridge/widget/page.tsx
index 3bee0a0c9dc..815686bbe1b 100644
--- a/apps/dashboard/src/app/bridge/embed/page.tsx
+++ b/apps/dashboard/src/app/bridge/widget/page.tsx
@@ -3,6 +3,7 @@ import { isAddress, NATIVE_TOKEN_ADDRESS } from "thirdweb";
 import { UniversalBridgeEmbed } from "../(general)/components/client/UniversalBridgeEmbed";
 import { bridgeStats } from "../(general)/data";
 import "@workspace/ui/global.css";
+import type { SupportedFiatCurrency } from "thirdweb/react";
 import { NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_ID } from "@/constants/public-envs";
 import { BridgeProviders } from "../(general)/components/client/Providers.client";
 
@@ -38,15 +39,28 @@ export default async function Page(props: {
   const buyChain = parse(searchParams.outputChain, onlyNumber);
   const buyCurrency = parse(searchParams.outputCurrency, onlyAddress);
 
+  const persistTokenSelections =
+    parse(searchParams.persistTokenSelections, (v) =>
+      v === "false" ? "false" : "true",
+    ) || "true";
+
   const theme =
     parse(searchParams.theme, (v) => (v === "light" ? "light" : "dark")) ||
     "dark";
 
+  const currency = parse(searchParams.currency, (v) =>
+    VALID_CURRENCIES.includes(v as SupportedFiatCurrency)
+      ? (v as SupportedFiatCurrency)
+      : undefined,
+  );
+
   return (
     <Providers theme={theme}>
       <div className="flex items-center justify-center min-h-screen py-6 bg-background">
         <UniversalBridgeEmbed
+          persistTokenSelections={persistTokenSelections === "true"}
           pageType="bridge-iframe"
+          currency={currency}
           buyTab={{
             buyToken: buyChain
               ? {
@@ -75,6 +89,32 @@ export default async function Page(props: {
   );
 }
 
+const VALID_CURRENCIES: SupportedFiatCurrency[] = [
+  "USD",
+  "EUR",
+  "GBP",
+  "JPY",
+  "KRW",
+  "CNY",
+  "INR",
+  "NOK",
+  "SEK",
+  "CHF",
+  "AUD",
+  "CAD",
+  "NZD",
+  "MXN",
+  "BRL",
+  "CLP",
+  "CZK",
+  "DKK",
+  "HKD",
+  "HUF",
+  "IDR",
+  "ILS",
+  "ISK",
+];
+
 function parse<T>(
   value: string | string[] | undefined,
   fn: (value: string) => T | undefined,
diff --git a/apps/portal/redirects.mjs b/apps/portal/redirects.mjs
index ac62178ca3c..1a87cbb4eab 100644
--- a/apps/portal/redirects.mjs
+++ b/apps/portal/redirects.mjs
@@ -1093,6 +1093,10 @@ const walletRefactorRedirects = {
   "/typescript/v5/supported-wallets/:path*": "/wallets/external-wallets",
 };
 
+const bridgeRedirects = {
+  "/bridge/bridge-widget-script": "/bridge/bridge-widget/script",
+};
+
 /**
  * @type {import('next').NextConfig['redirects']}
  */
@@ -1115,6 +1119,7 @@ export const redirects = async () => {
     ...createRedirects(glossaryRedirects),
     ...createRedirects(payRedirects),
     ...createRedirects(walletRefactorRedirects),
+    ...createRedirects(bridgeRedirects),
   ];
 };
 
diff --git a/apps/portal/src/app/bridge/bridge-widget-script/bridge-widget-dark.png b/apps/portal/src/app/bridge/bridge-widget/bridge-widget-dark.png
similarity index 100%
rename from apps/portal/src/app/bridge/bridge-widget-script/bridge-widget-dark.png
rename to apps/portal/src/app/bridge/bridge-widget/bridge-widget-dark.png
diff --git a/apps/portal/src/app/bridge/bridge-widget-script/bridge-widget-light.png b/apps/portal/src/app/bridge/bridge-widget/bridge-widget-light.png
similarity index 100%
rename from apps/portal/src/app/bridge/bridge-widget-script/bridge-widget-light.png
rename to apps/portal/src/app/bridge/bridge-widget/bridge-widget-light.png
diff --git a/apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx b/apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx
new file mode 100644
index 00000000000..b390253c997
--- /dev/null
+++ b/apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx
@@ -0,0 +1,33 @@
+import { CodeBlock, Tabs, TabsContent, TabsList, TabsTrigger } from "@doc";
+
+export function IframeCodePreview(props: { src: string }) {
+  return (
+    <Tabs defaultValue="code">
+      <TabsList>
+        <TabsTrigger value="code">Code</TabsTrigger>
+        <TabsTrigger value="preview">Preview</TabsTrigger>
+      </TabsList>
+      <TabsContent value="code">
+        <CodeBlock
+          code={`\
+<iframe
+  src="${props.src}"
+  height="750px"
+  width="100%"
+  style="border: 0;"
+/>`}
+          lang="html"
+        />
+      </TabsContent>
+      <TabsContent value="preview">
+        <iframe
+          title="Bridge widget iframe"
+          src={props.src}
+          height="750px"
+          width="100%"
+          style={{ border: 0 }}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx b/apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx
new file mode 100644
index 00000000000..f7d0daf0ebc
--- /dev/null
+++ b/apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx
@@ -0,0 +1,153 @@
+import {
+  Details,
+  createMetadata,
+  DocImage
+} from "@doc";
+import bridgeWidgetDark from "../bridge-widget-dark.png";
+import bridgeWidgetLight from "../bridge-widget-light.png";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@doc";
+import { IframeCodePreview } from "./iframe-code-preview";
+
+export const metadata = createMetadata({
+  image: {
+    title: "Bridge widget iframe",
+    icon: "payments",
+  },
+  title: "Bridge widget iframe",
+  description: "Add a widget to add cross chain swaps and fiat onramp to your app using an iframe",
+});
+
+# Bridge widget iframe
+
+The Bridge widget iframe makes it easy to embed cross-chain swaps and fiat onramp UI into your app. Just add an iframe to your HTML and get a fully customizable widget - no build setup required.
+
+## Features
+- Cross-chain token swaps across 85+ blockchains
+- Fiat onramp support to buy tokens with credit/debit cards
+- dark and light mode support
+- Set custom default token selections using query parameters
+- Display fiat values in multiple currencies
+
+
+<div className='dark-only'>
+<DocImage src={bridgeWidgetDark} />
+</div>
+<div className='light-only'>
+<DocImage src={bridgeWidgetLight} />
+</div>
+
+
+## Iframe Integration
+
+<IframeCodePreview src="https://thirdweb.com/bridge/widget" />
+
+
+## Options
+
+You can customize theme, currencies, token selections etc using query parameters as mentioned below
+
+### Theme
+
+By default the widget uses the "dark" theme.
+
+You can set the light theme by passing the `theme=light` query parameter.
+
+<IframeCodePreview src="https://thirdweb.com/bridge/widget?theme=light" />
+
+
+### Change default token selections
+
+By default no tokens are selected in the widget UI.
+
+You can change the default token selections by using query parameters mentioned below:
+
+* `inputCurrency`, `inputChain` to set sell token.
+* `outputCurrency`, `outputChain` to set buy token.
+
+Chain parameter should be the chain id (eg. 1 for Ethereum Mainnet, 137 for Polygon Mainnet, 8453 for Base Mainnet, etc.)
+and currency parameter should be the token address. You can use [thirdweb chainlist](https://thirdweb.com/chainlist?service=pay) to find the chain id for a chain.
+
+To set native token of the chain,
+only specify the chain parameter and omit the currency parameter.
+
+
+#### Examples
+
+<Details summary="Change default Sell Token to ERC20 Token">
+
+Set USDC on Base as the default sell token.
+
+<IframeCodePreview src="https://thirdweb.com/bridge/widget?inputCurrency=0x833589fcd6edb6e08f4c7c32d4f71b54bda02913&inputChain=8453" />
+
+</Details>
+
+<Details summary="Change default Sell Token to Native Token">
+
+Set Base native token as the default sell token.
+
+
+<IframeCodePreview src="https://thirdweb.com/bridge/widget?inputChain=8453" />
+
+</Details>
+
+<Details summary="Change default Sell and Buy Tokens">
+
+
+Set USDC on Base as the default sell token and USDC on Polygon as the default buy token.
+
+<IframeCodePreview src="https://thirdweb.com/bridge/widget?inputCurrency=0x833589fcd6edb6e08f4c7c32d4f71b54bda02913&inputChain=8453&outputCurrency=0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359&outputChain=137" />
+
+</Details>
+
+
+### Persist Token Selections
+
+By default, the widget saves the last used token selections to localStorage so that if the user revisits the widget later, last used tokens are selected by default. To disable this feature, you can set the `persistTokenSelections` query parameter to `false`.
+
+if the custom default token selection is specified using the query params mentioned above, it overrides the last used tokens to ensure that configuration specified in query params is always respected.
+
+<IframeCodePreview src="https://thirdweb.com/bridge/widget?persistTokenSelections=false" />
+
+
+### Currency
+
+By default the fiat value of the token amounts is displayed in USD.
+
+You can change the currency by setting the `currency` query parameter to the desired currency.
+
+<Details summary="Supported Currencies">
+
+- `USD` - US Dollar (default)
+- `EUR` - Euro
+- `GBP` - British Pound
+- `JPY` - Japanese Yen
+- `KRW` - Korean Won
+- `CNY` - Chinese Yuan
+- `INR` - Indian Rupee
+- `NOK` - Norwegian Krone
+- `SEK` - Swedish Krona
+- `CHF` - Swiss Franc
+- `AUD` - Australian Dollar
+- `CAD` - Canadian Dollar
+- `NZD` - New Zealand Dollar
+- `MXN` - Mexican Peso
+- `BRL` - Brazilian Real
+- `CLP` - Chilean Peso
+- `CZK` - Czech Koruna
+- `DKK` - Danish Krone
+- `HKD` - Hong Kong Dollar
+- `HUF` - Hungarian Forint
+- `IDR` - Indonesian Rupiah
+- `ILS` - Israeli New Sheqel
+- `ISK` - Icelandic Krona
+
+</Details>
+
+
+#### Example
+
+Show fiat values in Japanese Yen (JPY) in the widget.
+
+<IframeCodePreview src="https://thirdweb.com/bridge/widget?currency=JPY" />
+
+
diff --git a/apps/portal/src/app/bridge/bridge-widget/page.mdx b/apps/portal/src/app/bridge/bridge-widget/page.mdx
new file mode 100644
index 00000000000..84c413117c8
--- /dev/null
+++ b/apps/portal/src/app/bridge/bridge-widget/page.mdx
@@ -0,0 +1,61 @@
+import {
+  Details,
+  createMetadata,
+  DocImage
+} from "@doc";
+import bridgeWidgetDark from "./bridge-widget-dark.png";
+import bridgeWidgetLight from "./bridge-widget-light.png";
+import { ArticleIconCard, Grid } from "@doc";
+import { CodeIcon, FrameIcon } from "lucide-react";
+import { ReactIcon } from "@/icons";
+
+export const metadata = createMetadata({
+  image: {
+    title: "Bridge widget",
+    icon: "payments",
+  },
+  title: "Bridge widget",
+  description: "Add a widget to add cross chain swaps and fiat onramp to your app",
+});
+
+# Bridge widget
+
+The Bridge widget makes it easy to embed cross-chain swaps and fiat onramp UI into your app.
+
+
+<div className='dark-only'>
+<DocImage src={bridgeWidgetDark} />
+</div>
+<div className='light-only'>
+<DocImage src={bridgeWidgetLight} />
+</div>
+
+
+## Get Started
+
+You can integrate the bridge widget into your website using an iframe, a script tag, or a React component
+
+<div className="space-y-4">
+
+<ArticleIconCard
+	title="Iframe"
+  icon={FrameIcon}
+	description="Integrate bridge widget into your website using an iframe"
+	href="/bridge/bridge-widget/iframe"
+/>
+
+<ArticleIconCard
+	title="Script"
+  icon={CodeIcon}
+	description="Integrate bridge widget into your website using a script tag"
+	href="/bridge/bridge-widget/script"
+/>
+
+<ArticleIconCard
+	title="React Component"
+  icon={ReactIcon}
+	description="Integrate bridge widget into your app using a React component"
+	href="/bridge/bridge-widget/react"
+/>
+
+</div>
\ No newline at end of file
diff --git a/apps/portal/src/app/bridge/bridge-widget/react/page.mdx b/apps/portal/src/app/bridge/bridge-widget/react/page.mdx
new file mode 100644
index 00000000000..a7ea3d25ac9
--- /dev/null
+++ b/apps/portal/src/app/bridge/bridge-widget/react/page.mdx
@@ -0,0 +1,83 @@
+import {
+  Details,
+  createMetadata,
+  DocImage
+} from "@doc";
+import bridgeWidgetDark from "../bridge-widget-dark.png";
+import bridgeWidgetLight from "../bridge-widget-light.png";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@doc";
+import { ReactIcon } from "@/icons";
+import { ArticleIconCard } from "@doc";
+
+export const metadata = createMetadata({
+  image: {
+    title: "Bridge widget component",
+    icon: "payments",
+  },
+  title: "Bridge widget component",
+  description: "Add a widget to add cross chain swaps and fiat onramp to your app using a React component",
+});
+
+# 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)
+
+
+<div className='dark-only'>
+<DocImage src={bridgeWidgetDark} />
+</div>
+<div className='light-only'>
+<DocImage src={bridgeWidgetLight} />
+</div>
+
+## 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](https://thirdweb.com/team).
+
+```tsx
+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.
+
+```tsx
+import { ThirdwebProvider } from "thirdweb/react";
+
+function Example() {
+  return (
+    <ThirdwebProvider>
+      <YourApp />
+    </ThirdwebProvider>
+  );
+}
+```
+
+## API Reference
+
+<ArticleIconCard
+  title="BridgeWidget Component"
+  description="View the API reference for the BridgeWidget component"
+  icon={ReactIcon}
+  href="/references/typescript/v5/BridgeWidget"
+/>
\ No newline at end of file
diff --git a/apps/portal/src/app/bridge/bridge-widget-script/page.mdx b/apps/portal/src/app/bridge/bridge-widget/script/page.mdx
similarity index 95%
rename from apps/portal/src/app/bridge/bridge-widget-script/page.mdx
rename to apps/portal/src/app/bridge/bridge-widget/script/page.mdx
index d8ab12a9b5d..6073fbe374a 100644
--- a/apps/portal/src/app/bridge/bridge-widget-script/page.mdx
+++ b/apps/portal/src/app/bridge/bridge-widget/script/page.mdx
@@ -3,24 +3,23 @@ import {
   createMetadata,
   DocImage
 } from "@doc";
-import bridgeWidgetDark from "./bridge-widget-dark.png";
-import bridgeWidgetLight from "./bridge-widget-light.png";
-
+import bridgeWidgetDark from "../bridge-widget-dark.png";
+import bridgeWidgetLight from "../bridge-widget-light.png";
 
 export const metadata = createMetadata({
   image: {
-    title: "BridgeWidget Script",
+    title: "Bridge widget script",
     icon: "payments",
   },
-  title: "Bridge Widget",
-  description: "Add a widget to add cross swaps and fiat onramp to your app",
+  title: "Bridge widget script",
+  description: "Add a widget to add cross chain swaps and fiat onramp to your app using a script tag",
 });
 
-# BridgeWidget Script
+# Bridge widget script
 
-The BridgeWidget Script makes it easy to embed cross-chain swaps and fiat onramp UI into your app. Just add a script tag to your HTML and get a fully customizable widget — no build setup required.
+The Bridge widget script makes it easy to embed cross-chain swaps and fiat onramp UI into your app. Just add a script tag to your HTML and get a fully customizable widget — no build setup required.
 
-## Key Features
+## 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
diff --git a/apps/portal/src/app/bridge/page.mdx b/apps/portal/src/app/bridge/page.mdx
index a8016ee3794..d2b6c73a93b 100644
--- a/apps/portal/src/app/bridge/page.mdx
+++ b/apps/portal/src/app/bridge/page.mdx
@@ -127,7 +127,8 @@ const preparedQuote = await Bridge.Buy.prepare({
 
     ### Create a Client
 
-    First, create a client file for reuse throughout your app:
+    First, create a client file for reuse throughout your app. You can get your clientId by creating a project in the [thirdweb dashboard](https://thirdweb.com/team)
+
 
     ```typescript
     // thirdwebClient.ts
diff --git a/apps/portal/src/app/bridge/sidebar.tsx b/apps/portal/src/app/bridge/sidebar.tsx
index d9312f1d428..41de118b6d5 100644
--- a/apps/portal/src/app/bridge/sidebar.tsx
+++ b/apps/portal/src/app/bridge/sidebar.tsx
@@ -26,8 +26,22 @@ export const sidebar: SideBar = {
           name: "Swap Tokens",
         },
         {
-          href: `${bridgeSlug}/bridge-widget-script`,
-          name: "BridgeWidget Script",
+          name: "Bridge Widget",
+          href: `${bridgeSlug}/bridge-widget`,
+          links: [
+            {
+              href: `${bridgeSlug}/bridge-widget/iframe`,
+              name: "Iframe",
+            },
+            {
+              href: `${bridgeSlug}/bridge-widget/script`,
+              name: "Script",
+            },
+            {
+              href: `${bridgeSlug}/bridge-widget/react`,
+              name: "React Component",
+            },
+          ],
         },
         {
           href: `${bridgeSlug}/fund`,
diff --git a/apps/portal/src/app/bridge/swap/page.mdx b/apps/portal/src/app/bridge/swap/page.mdx
index 43f30106c98..64a2d163122 100644
--- a/apps/portal/src/app/bridge/swap/page.mdx
+++ b/apps/portal/src/app/bridge/swap/page.mdx
@@ -307,7 +307,7 @@ async function swapEthToMatic(amount: string, userAccount: Account) {
 </Tabs>
 
 
-## Key Features
+## Features
 
 - **Cross-chain swaps** - Exchange tokens across 50+ supported chains
 - **Real-time quotes** - Get up-to-date pricing and execution estimates
diff --git a/apps/portal/src/components/others/Sidebar.tsx b/apps/portal/src/components/others/Sidebar.tsx
index 8728f1dbe38..863c0b5b92c 100644
--- a/apps/portal/src/components/others/Sidebar.tsx
+++ b/apps/portal/src/components/others/Sidebar.tsx
@@ -203,7 +203,7 @@ function DocSidebarCategory(props: {
         "text-muted-foreground hover:text-foreground",
       )}
     >
-      <div className="flex gap-2 py-1.5 px-3" ref={triggerRef}>
+      <div className="flex gap-2" ref={triggerRef}>
         {icon && <SidebarIcon icon={icon} />}
         {name}
       </div>
diff --git a/packages/thirdweb/src/exports/react.ts b/packages/thirdweb/src/exports/react.ts
index 47e57990081..593b7628e8b 100644
--- a/packages/thirdweb/src/exports/react.ts
+++ b/packages/thirdweb/src/exports/react.ts
@@ -1,3 +1,4 @@
+export type { SupportedFiatCurrency } from "../pay/convert/type.js";
 export {
   AccountProvider,
   type AccountProviderProps,
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
index 8ab960dc71b..48162c8aee6 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
@@ -210,12 +210,6 @@ export type BridgeWidgetProps = {
  *   client={client}
  *   currency="USD"
  *   theme="dark"
- *   showThirdwebBranding
- *   buy={{
- *     // Buy 0.1 native tokens on Base
- *     amount: "0.1",
- *     chainId: 8453,
- *   }}
  * />
  * ```
  *