Configuration (iframe)

The hosted swap app is configured with a JSON object—the same shape you get from the Widget Playground. Pass it on the swap URL, typically as a single query parameter:

https://app.routerprotocol.com/swap?config=<URL_ENCODED_JSON>

Build config in JavaScript and set the iframe src:

const embedConfig = {
  /* your JSON (see reference below) */
};
const src = `https://app.routerprotocol.com/swap?config=${encodeURIComponent(JSON.stringify(embedConfig))}`;

Long URLs

selectedNodes and theme fields can make the URL long. Prefer setting iframe.src from JavaScript (as above) instead of hard-coding a giant src attribute in HTML.

Reference embed config

Example configuration (theme, integrator, features, routing nodes, initial swap state):

{
  "isWidget": true,
  "theme": {
    "mode": "dark",
    "primaryColor": "#e4357a",
    "cardBorderRadius": "10px",
    "buttonBorderRadius": "10px",
    "backgroundColor": "#6a2a2a",
    "textColorPrimary": "#a63a3a",
    "textColorSecondary": "#d65151",
    "modalColor": "#832525"
  },
  "integrator": "Router Playground",
  "features": {
    "showHeader": true
  },
  "selectedNodes": [
    "relay",
    "debridge",
    "across",
  ],
  "initialState": {
    "fromChainId": "1",
    "fromTokenAddress": "0x0000000000000000000000000000000000000000",
    "toChainId": "10",
    "toTokenAddress": "0x0000000000000000000000000000000000000000"
  }
}

Top-level fields

Field	Type	Description
isWidget	boolean	Must be true for embed mode.
theme	object	Optional. See Theme below.
integrator	string	Integrator / origin label (e.g. analytics).
features	object	Optional. UI toggles; see Features.
selectedNodes	string[]	Optional. Node / bridge ids allowed for routing.
initialState	object	Optional. Default chains and tokens; see Initial state.

Theme

Path	Type	Description
theme.mode	string	light, dark, or auto.
theme.primaryColor	string	Primary accent (e.g. hex).
theme.backgroundColor	string	Page / shell background.
theme.textColorPrimary	string	Primary text color.
theme.textColorSecondary	string	Secondary text color.
theme.modalColor	string	Modal / overlay surface color.
theme.cardBorderRadius	string	CSS value for card corners.
theme.buttonBorderRadius	string	CSS value for button corners.

Features

Path	Type	Description
features.showHeader	boolean	Show or hide the widget header.

Initial state

Path	Type	Description
initialState.fromChainId	string	Default source chain id.
initialState.fromTokenAddress	string	Default source token address (0x000…0000 often means native on EVM).
initialState.toChainId	string	Default destination chain id.
initialState.toTokenAddress	string	Default destination token address.

Legacy flat query parameters

Older iframe integrations sometimes used flat query keys (widgetId, fromChain, toToken, …). Prefer the JSON config format above for parity with the Widget Playground. If you rely on legacy keys, confirm behavior with your Router integration contact.

Security

Treat integrator and any ids as public embed surface data. Do not put secrets in the JSON or URL.

Next steps

• Examples — build src with encodeURIComponent(JSON.stringify(...))
• Customization — iframe sizing and outer wrapper CSS