Skip to main content

Getting Started

This guide will help you quickly integrate the Router OGA Swap/Bridge Widget into your application.

Prerequisites​

  • A Router OGA API key (get one from Router Protocol)
  • Basic knowledge of HTML and JavaScript
  • Your application's domain (for security configuration)

Basic Integration​

The simplest way to integrate the widget is using an iframe:

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

Step-by-Step Setup​

1. Get Your API Key​

First, obtain your Router OGA API key from the Router Protocol dashboard.

2. Configure the Widget​

Customize the widget using URL parameters. Use the Widget Playground to visually configure and preview your widget.

3. Embed the Widget​

Add the iframe to your HTML:

<div class="widget-container">
  <iframe
    src="https://app.routerprotocol.com/?widget=true&apiKey=YOUR_API_KEY&mode=dark&primaryColor=b82877"
    width="100%"
    height="600"
    frameborder="0"
    allow="clipboard-read; clipboard-write"
  ></iframe>
</div>

4. Style the Container (Optional)​

Add CSS to style the widget container:

.widget-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.widget-container iframe {
  border: none;
  display: block;
  width: 100%;
  height: 600px;
}

React Integration​

For React applications:

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;

Next Steps​