configuration

sidebar_position: 2 title: Configuration description: Complete reference of Router OGA Swap/Bridge Widget configuration parameters, including swap defaults, theming, borders, feature toggles, nodes, and integrator settings.

Configuration

The Router Widget SDK (router-widget-sdk) is configured via a single config object passed to the RouterWidget component.

Required Parameters

The config object is optional, but you should set an integrator identifier.

import { RouterWidget } from 'router-widget-sdk';
import 'router-widget-sdk/styles.css';

<RouterWidget config={{ integrator: 'MyDApp' }} />;

Swap Configuration

Configure initial swap parameters using config.initialState.

Config Path	Type	Description
initialState.fromChainId	string	Default source chain ID (e.g. '1')
initialState.fromTokenAddress	string	Default source token address ('native' or zero-address supported)
initialState.toChainId	string	Default destination chain ID
initialState.toTokenAddress	string	Default destination token address

Swap Configuration Examples

Set default tokens:

<RouterWidget
  config={{
    initialState: {
      fromChainId: '137',
      fromTokenAddress: '0x0000000000000000000000000000000000000000',
    },
  }}
/>;

Theme Configuration

Customize the widget's appearance using config.theme.

Config Path	Type	Options	Description
theme.mode	string	light, dark, auto	Widget theme mode
theme.primaryColor	string	Hex color	Primary brand color
theme.backgroundColor	string	Hex color	Background color
theme.textColorPrimary	string	Hex color	Primary text color
theme.textColorSecondary	string	Hex color	Secondary text color
theme.mutedColor	string	Hex color	Muted background color (cards/inputs)
theme.cardBorderRadius	string	CSS value	Card border radius (applied when isWidget: true)
theme.buttonBorderRadius	string	CSS value	Button border radius
theme.fontFamily	string	CSS value	Font family

Theme Examples

Dark theme with custom colors:

<RouterWidget
  config={{
    theme: {
      mode: 'dark',
      primaryColor: '#b82877',
      backgroundColor: '#1a1a1a',
      textColorPrimary: '#ffffff',
      textColorSecondary: '#cccccc',
    },
  }}
/>;

Light theme:

<RouterWidget config={{ theme: { mode: 'light', primaryColor: '#b82877' } }} />;

Border Configuration

Border radius is configured via config.theme.cardBorderRadius and config.theme.buttonBorderRadius.

Features Configuration

Toggle widget features using config.features.

Config Path	Type	Description
features.showHeader	boolean	Show or hide the widget header
features.isSrcDisabled	boolean	Disable source chain/token selection
features.isDestDisabled	boolean	Disable destination chain/token selection

Features Examples

Hide header:

<RouterWidget config={{ features: { showHeader: false } }} />;

Disable selectors:

<RouterWidget config={{ features: { isSrcDisabled: true, isDestDisabled: true } }} />;

Nodes Configuration

Select which nodes/bridges are available for routing using config.selectedNodes.

Config Path	Type	Description
selectedNodes	string[]	List of node IDs to use for routing

Nodes Examples

Allow specific nodes:

<RouterWidget config={{ selectedNodes: ['router', 'stargate'] }} />;

Note: If not specified, all available nodes will be used for routing.

Settings Configuration

Configure additional widget settings.

Config Path	Type	Description
integrator	string	Integrator identifier for tracking and analytics
isWidget	boolean	Enable embedded-widget styling behavior
variant	'normal' | 'wide' | 'drawer'	Layout variant for the widget UI
wallet.onConnectClick	() => void	Connect wallet handler for external wallet providers

Complete Configuration Example

import { RouterWidget, type WidgetConfig } from 'router-widget-sdk';
import 'router-widget-sdk/styles.css';

const config: WidgetConfig = {
  theme: {
    mode: 'dark',
    primaryColor: '#e4357a',
    backgroundColor: '#0a0a0a',
    textColorPrimary: '#ffffff',
    textColorSecondary: '#a0a0a0',
    mutedColor: '#1a1a1a',
    cardBorderRadius: '10px',
    buttonBorderRadius: '4px',
    fontFamily: 'Inter, sans-serif',
  },
  initialState: {
    fromChainId: '1',
    fromTokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
    toChainId: '137',
    toTokenAddress: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174',
  },
  features: {
    showHeader: true,
    isSrcDisabled: false,
    isDestDisabled: false,
  },
  integrator: 'your-app-name',
  selectedNodes: ['router', 'stargate'],
  isWidget: true,
};

export default function App() {
  return <RouterWidget config={config} />;
}

Using the Widget Playground

The easiest way to explore options is using the Widget Playground, then mapping settings into the SDK config object.

1. Customize your widget using the visual interface
2. Preview your changes in real-time
3. Copy values for variant, theme, feature, node, and initial state settings
4. Integrate by passing those values into config

The playground provides a visual interface for all configuration options, making it easy to customize your widget without manually constructing URL parameters.

Security Considerations

• Treat any API keys/secrets as sensitive
• Prefer environment variables where applicable
• Configure allowed domains in your Router dashboard (if/where required)

Next Steps

• See Examples for real-world integration patterns
• Learn about Customization options
• Check the API Reference for backend integration