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 OGA Swap/Bridge Widget supports extensive configuration through URL parameters. Use the Widget Playground to customize and preview your widget configuration before integrating it.

Required Parameters

Parameter	Type	Description
apiKey	string	Your Router OGA API key (required)

Swap Configuration

Configure initial swap parameters for the widget.

Parameter	Type	Description
fromChainId	string	Default source chain Id
fromTokenAddress	string	Default source token address or symbol
toChainId	string	Default destination chain Id
toTokenAddress	string	Default destination token address or symbol
disableSourceTokenSelector	boolean	Disable the source chain and token selector (users cannot change from chain and token)
disableDestinationTokenSelector	boolean	Disable the destination chain and token selector (users cannot change to chain and token)

Swap Configuration Examples

Set default tokens:

fromChainId : 137,
fromTokenAddress": 0x0000000000000000000000000000000000000000,

Disable token selectors:

disableSourceTokenSelector=true&disableDestinationTokenSelector=true

Theme Configuration

Customize the widget's appearance to match your application's design.

Parameter	Type	Options	Description
mode	string	light, dark, auto	Widget theme mode
primaryColor	string	Hex color code	Primary brand color (e.g., b82877 or #b82877)
backgroundColor	string	Hex color code	Background color
textColorPrimary	string	Hex color code	Primary text color
textColorSecondary	string	Hex color code	Secondary text color
modalColor	string	Hex color code	Modal/overlay background color

Theme Examples

Dark theme with custom colors:

mode=dark&primaryColor=b82877&backgroundColor=1a1a1a&textColorPrimary=ffffff&textColorSecondary=cccccc

Light theme:

mode=light&primaryColor=b82877&backgroundColor=ffffff&textColorPrimary=000000&textColorSecondary=666666

Border Configuration

Customize border radius for cards and buttons.

Parameter	Type	Description
cardBorderRadius	string	Border radius for cards (e.g., 12px, 16px, 8px)
buttonBorderRadius	string	Border radius for buttons (e.g., 8px, 12px, 4px)

Border Examples

Rounded corners:

cardBorderRadius=16px&buttonBorderRadius=12px

Sharp corners:

cardBorderRadius=0px&buttonBorderRadius=0px

Features Configuration

Toggle widget features on or off.

Parameter	Type	Description
showHeader	boolean	Show or hide the widget header

Features Examples

Hide header:

showHeader=false

Show header (default):

showHeader=true

Nodes Configuration

Select which nodes/bridges are available for routing.

Parameter	Type	Description
nodes	string	Comma-separated list of available node/bridge keys (e.g., relay,deBridge,stargate)

Nodes Examples

Allow specific nodes:

nodes=relay,deBridge,stargate,across

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

Settings Configuration

Configure additional widget settings.

Parameter	Type	Description
integrator	string	Integrator identifier for tracking and analytics

Complete Configuration Example

Here's an example with all configuration options:

<iframe
  src="https://app.routerprotocol.com/?widget=true&apiKey=YOUR_API_KEY&mode=dark&primaryColor=b82877&backgroundColor=1a1a1a&textColorPrimary=ffffff&textColorSecondary=cccccc&modalColor=000000&cardBorderRadius=16px&buttonBorderRadius=12px&showHeader=true&nodes=relay,deBridge,stargate&integrator=your-app-name"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-read; clipboard-write"
></iframe>

Using the Widget Playground

The easiest way to configure your widget is using the Widget Playground:

1. Customize your widget using the visual interface
2. Preview your changes in real-time
3. Copy the generated iframe code with all your configuration parameters
4. Integrate the code directly into your application

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

Security Considerations

• Always use HTTPS for the widget URL
• Keep your API key secure and never expose it in client-side code if possible
• Use environment variables for API keys in production
• Consider implementing rate limiting on your backend
• Configure allowed domains in your Router OGA dashboard

Next Steps

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