Widget

Install Widget

The OpenOcean Widget is our plug-and-play swap & bridge component, now supporting both same-chain and cross-chain transactions in one unified interface.

This powerful widget is built for seamless integration, allowing any app or platform to easily offer secure, multi-chain token swaps and bridging directly to users – without redirecting them elsewhere.

With full customization options, the widget can be styled to match your app's UI, helping you enhance your multi-chain strategy and retain users across EVM and Solana ecosystems.

There are multiple ways to embed OpenOcean swap widget into your protocols/Apps.

Demo repository: OpenOcean-Frontend-Examples / Widget_V2-demo

Configure your widget from here: Widget Playgroup.

Method #1 - NPM Package (Widget V2)

Install the latest version of OpenOcean Widget and required packages.

Terminal

1 npm install @openocean.finance/widget wagmi @bigmi/react @solana/wallet-adapter-react @tanstack/react-query

Wagmi — Type safe, extensible library for building Ethereum apps
Bigmi — TypeScript library for building Bitcoin applications
@solana/wallet-adapter-react — Wallet adapters for Solana applications
TanStack Query — Async state manager (v5.72.0+)

Basic example

Below is a basic example using OpenOcean Widget with container customization.

Terminal

1 import { OpenOceanWidget } from '@openocean.finance/widget';
2 
3 const widgetConfig = {
4   fromChain: 8453,  // Source chain ID
5   toChain: 8453,    // Destination chain ID (same as source in this case)
6   fromToken: '0x0000000000000000000000000000000000000000', // Address of the token you are sending (e.g., native token like ETH)
7   toToken: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',   // Address of the token you want to receive
8   fromAmount: '1',   // Amount to be swapped 
9   subvariant: 'bridge', // Set this only if you're enabling cross-chain functionality
10   theme: {
11     container: {
12       border: '1px solid rgb(234, 234, 234)',
13       borderRadius: '16px',
14     },
15   },
16   languages: {
17     allow: ['en'], // bn, de, en, es, fr, id, it, ja, ko, pt, th, tr, uk, vi, zh
18     // deny: ['uk'],
19   },
20 };
21 
22 export const WidgetPage = () => {
23   return (
24     <OpenOceanWidget integrator="Your dApp/company name" config={widgetConfig} />
25   );
26 };

Method #2 - iframe

Use <iframe> to inject the OpenOcean widget into your program.

Input <iframe> to your front-end code.
Change the iframe src to "https://widget.openocean.finance"
Refresh the page and check whether the component is installed.

Terminal

HTML

1 <iframe src="https://widget.openocean.finance"></iframe>

Recommendation

We highly recommend using the custom mode when integrating the widget to ensure it works properly across different environments.

Install Widget

Method #1 - NPM Package (Widget V2)

Basic example

Method #2 - iframe

Next Steps

Widget Variants

Configuration

1	import { OpenOceanWidget } from '@openocean.finance/widget';
2
3	const widgetConfig = {
4	fromChain: 8453, // Source chain ID
5	toChain: 8453, // Destination chain ID (same as source in this case)
6	fromToken: '0x0000000000000000000000000000000000000000', // Address of the token you are sending (e.g., native token like ETH)
7	toToken: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913', // Address of the token you want to receive
8	fromAmount: '1', // Amount to be swapped
9	subvariant: 'bridge', // Set this only if you're enabling cross-chain functionality
10	theme: {
11	container: {
12	border: '1px solid rgb(234, 234, 234)',
13	borderRadius: '16px',
14	},
15	},
16	languages: {
17	allow: ['en'], // bn, de, en, es, fr, id, it, ja, ko, pt, th, tr, uk, vi, zh
18	// deny: ['uk'],
19	},
20	};
21
22	export const WidgetPage = () => {
23	return (
24	<OpenOceanWidget integrator="Your dApp/company name" config={widgetConfig} />
25	);
26	};