Skip to main content

Examples

This page provides practical examples for integrating the Router OGA Swap/Bridge Widget in different frameworks and scenarios.

Basic Examples​

Perfect for sidebars or smaller spaces:

<iframe
  src="https://app.routerprotocol.com/?widget=true&apiKey=YOUR_API_KEY&mode=dark"
  width="400"
  height="500"
  frameborder="0"
  allow="clipboard-read; clipboard-write"
></iframe>

Full-Width Layout​

Full-width layout for dedicated swap pages:

<iframe
  src="https://app.routerprotocol.com/?widget=true&apiKey=YOUR_API_KEY&mode=light"
  width="100%"
  height="700"
  frameborder="0"
  allow="clipboard-read; clipboard-write"
></iframe>

Modal/Overlay Layout​

Modal or overlay implementation:

<iframe
  src="https://app.routerprotocol.com/?widget=true&apiKey=YOUR_API_KEY&primaryColor=b82877&cardBorderRadius=16px&buttonBorderRadius=12px"
  width="100%"
  height="100%"
  frameborder="0"
  allow="clipboard-read; clipboard-write"
></iframe>

Framework Examples​

React​

Basic React Component​

import { useState } from 'react';

function SwapWidget() {
  const [apiKey] = useState('YOUR_API_KEY');
  const [mode] = useState('dark');
  const [primaryColor] = useState('b82877');

  const widgetUrl = `https://app.routerprotocol.com/?widget=true&apiKey=${apiKey}&mode=${mode}&primaryColor=${primaryColor}`;

  return (
    <div className="widget-container">
      <iframe
        src={widgetUrl}
        width="100%"
        height="600"
        frameBorder="0"
        allow="clipboard-read; clipboard-write"
        style={{ border: 'none', borderRadius: '12px' }}
        title="Router OGA Swap Widget"
      />
    </div>
  );
}

export default SwapWidget;

React with Environment Variables​

import { useState } from 'react';

function SwapWidget() {
  const apiKey = process.env.REACT_APP_ROUTER_API_KEY;
  const [mode] = useState('dark');
  const [primaryColor] = useState('b82877');
  const [integrator] = useState('your-app-name');

  const params = new URLSearchParams({
    widget: 'true',
    apiKey,
    mode,
    primaryColor,
    integrator,
  });

  return (
    <iframe
      src={`https://app.routerprotocol.com/?${params.toString()}`}
      width="100%"
      height="600"
      frameBorder="0"
      allow="clipboard-read; clipboard-write"
      title="Router OGA Swap Widget"
    />
  );
}

React with Dynamic Configuration​

import { useState, useMemo } from 'react';

function SwapWidget({ config }) {
  const [apiKey] = useState('YOUR_API_KEY');
  
  const widgetUrl = useMemo(() => {
    const params = new URLSearchParams({
      widget: 'true',
      apiKey,
      mode: config.mode || 'dark',
    });

    if (config.primaryColor) {
      params.append('primaryColor', config.primaryColor);
    }
    if (config.backgroundColor) {
      params.append('backgroundColor', config.backgroundColor);
    }
    if (config.cardBorderRadius) {
      params.append('cardBorderRadius', config.cardBorderRadius);
    }
    if (config.buttonBorderRadius) {
      params.append('buttonBorderRadius', config.buttonBorderRadius);
    }
    if (config.integrator) {
      params.append('integrator', config.integrator);
    }

    return `https://app.routerprotocol.com/?${params.toString()}`;
  }, [apiKey, config]);

  return (
    <iframe
      src={widgetUrl}
      width="100%"
      height="600"
      frameBorder="0"
      allow="clipboard-read; clipboard-write"
      title="Router OGA Swap Widget"
    />
  );
}

Vue.js​

Basic Vue Component​

<template>
  <div class="widget-container">
    <iframe
      :src="widgetUrl"
      width="100%"
      height="600"
      frameborder="0"
      allow="clipboard-read; clipboard-write"
      title="Router OGA Swap Widget"
    />
  </div>
</template>

<script>
export default {
  name: 'SwapWidget',
  data() {
    return {
      apiKey: 'YOUR_API_KEY',
      mode: 'dark',
      primaryColor: 'b82877',
    };
  },
  computed: {
    widgetUrl() {
      return `https://app.routerprotocol.com/?widget=true&apiKey=${this.apiKey}&mode=${this.mode}&primaryColor=${this.primaryColor}`;
    },
  },
};
</script>

Vanilla JavaScript​

<!DOCTYPE html>
<html>
<head>
  <title>Router OGA Widget</title>
  <style>
    .widget-container {
      max-width: 600px;
      margin: 0 auto;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .widget-container iframe {
      border: none;
      display: block;
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <div class="widget-container">
    <iframe
      id="router-widget"
      width="100%"
      height="600"
      frameborder="0"
      allow="clipboard-read; clipboard-write"
      title="Router OGA Swap Widget"
    ></iframe>
  </div>

  <script>
    const apiKey = 'YOUR_API_KEY';
    const mode = 'dark';
    const primaryColor = 'b82877';
    
    const widgetUrl = `https://app.routerprotocol.com/?widget=true&apiKey=${apiKey}&mode=${mode}&primaryColor=${primaryColor}`;
    
    document.getElementById('router-widget').src = widgetUrl;
  </script>
</body>
</html>

Advanced Examples​

With Node Selection​

<iframe
  src="https://app.routerprotocol.com/?widget=true&apiKey=YOUR_API_KEY&mode=light&nodes=relay,deBridge,stargate"
  width="100%"
  height="700"
  frameborder="0"
  allow="clipboard-read; clipboard-write"
></iframe>

With Full Customization​

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

Custom Theme Configuration​

<iframe
  src="https://app.routerprotocol.com/?widget=true&apiKey=YOUR_API_KEY&primaryColor=b82877&backgroundColor=1a1a1a&textColorPrimary=ffffff&textColorSecondary=cccccc&cardBorderRadius=16px&buttonBorderRadius=12px"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-read; clipboard-write"
></iframe>

Next Steps​