Skip to main content

Examples (iframe)

Use the same JSON shape as Configuration, then URL-encode it into the config query parameter:

<iframe
  id="router-swap-iframe"
  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>
const baseUrl = 'https://app.routerprotocol.com/swap';

const embedConfig = {
  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',
  },
};

const iframe = document.getElementById('router-swap-iframe');
iframe.src = `${baseUrl}?config=${encodeURIComponent(JSON.stringify(embedConfig))}`;

Responsive wrapper​

Keep a similar aspect ratio to 420×610 while shrinking on small screens:

<div class="router-widget-frame">
  <iframe id="router-swap-iframe" title="Router Swap" loading="lazy"></iframe>
</div>
.router-widget-frame {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 420 / 610;
}

.router-widget-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 11px;
  display: block;
}

Set iframe.src with the same config= pattern as in the first example after the DOM is ready.

Next steps​