Skip to main content

Swap/Bridge Widget

The Router OGA Swap/Bridge Widget lets users swap and bridge tokens directly in your application. The recommended integration is via the npm package (router-widget-sdk), which exposes a native React component API and richer customization than iframe embedding.

Key Features​

Comprehensive Network Support​

Access all ecosystems, chains, bridges, exchanges, and solvers that Router OGA supports. The widget automatically connects to Router's programmable execution graph, giving users access to the most efficient routes across multiple blockchain networks.

Flexible Layout​

The widget adapts to your container size and can be embedded in any layout. You can control layout by sizing the container around the RouterWidget component or by using config.variant.

Granular Control Options​

Configure which tokens and nodes are available to users:

  • Default Selections: Pre-configure default source and destination tokens
  • Token Selector Control: Enable or disable token selection for source and destination
  • Node Selection: Choose which bridges/nodes are available for routing

Flexible Theming & Customization​

Match your application's look and feel with extensive customization options:

  • Pre-configured Themes: Choose from multiple built-in themes
  • Dark Mode Support: Full dark mode support that adapts to your application's theme
  • Custom Styling: Extensive customization options for colors, fonts, borders, and more
  • Brand Integration: Customize the widget to align with your brand identity

Widget Builder​

Use the Widget Playground to preview the SDK widget and build your RouterWidget config. The Widget Builder allows you to configure swap defaults, variant, themes, borders, feature toggles, and selected nodes/bridges for routing.

Quick Navigation​

Migration Note (iframe → npm package)​

Router Widget SDK

The Swap/Bridge Widget SDK is available on npm as router-widget-sdk and provides a native React component integration.

  • Install: npm install router-widget-sdk
  • Import: import { RouterWidget } from 'router-widget-sdk'
  • Styles: import 'router-widget-sdk/styles.css'
  • Configure via a single config object (theme, initial state, features, nodes)

See the Getting Started page for the minimal setup and the Configuration reference for all options.

Next Steps​