Skip to main content

Getting Started (iframe)

Prerequisites​

  • The swap app URL: https://app.routerprotocol.com/swap
  • A JSON embed configuration object (same shape as the Widget Playground); see Configuration for the full reference.

Minimal flow​

  1. Add an <iframe> to your page (optionally with empty src initially).
  2. Build your embed config object (isWidget: true, plus theme, initialState, etc.).
  3. Set
    iframe.src = 'https://app.routerprotocol.com/swap?config=' + encodeURIComponent(JSON.stringify(embedConfig))

Minimal HTML + JavaScript​

<iframe
  id="router-swap-widget"
  title="Router Swap"
  height="610"
  width="420"
  style="border: none; border-radius: 11px; box-shadow: 3px 3px 10px 4px rgba(0, 0, 0, 0.05);">
</iframe>
<script>
  const baseUrl = 'https://app.routerprotocol.com/swap';
  const embedConfig = {
    isWidget: true,
    theme: { mode: 'dark', primaryColor: '#e4357a' },
    integrator: 'MySite',
    features: { showHeader: true },
    initialState: {
      fromChainId: '1',
      fromTokenAddress: '0x0000000000000000000000000000000000000000',
      toChainId: '10',
      toTokenAddress: '0x0000000000000000000000000000000000000000',
    },
  };
  document.getElementById('router-swap-widget').src =
    baseUrl + '?config=' + encodeURIComponent(JSON.stringify(embedConfig));
</script>

Expand embedConfig using the full example in Configuration when you need theme, selectedNodes, and other fields.

Widget Playground​

Use the Widget Playground to tune theme, nodes, and defaults, then mirror the resulting JSON in your embed.

Next steps​