Skip to main content

Customization

The Router OGA Swap/Bridge Widget offers extensive customization options to match your application's design and brand identity.

Theme Options​

Pre-configured Themes​

Choose from built-in themes:

  • light: Light theme with bright colors
  • dark: Dark theme with dark background
  • auto: Automatically adapts to user's system preference

Note: Use the mode parameter instead of theme in the URL.

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

Dark Mode Support​

The widget fully supports dark mode and can automatically adapt to your application's theme:

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

Color Customization​

Primary Color​

Set your brand's primary color:

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

Background Color​

Customize the background color:

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

Text Colors​

Set the primary and secondary text colors:

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

Complete Color Scheme​

Combine multiple color options:

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

Border and Shape Customization​

Border Radius​

Customize the border radius for cards and buttons separately:

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

Common border radius values:

  • 0px - Sharp corners
  • 8px - Slightly rounded
  • 12px - Medium rounded
  • 16px - Highly rounded
  • 24px - Very rounded

You can set different values for cards and buttons:

  • cardBorderRadius - Controls border radius for card elements
  • buttonBorderRadius - Controls border radius for buttons

Container Styling​

CSS Styling​

Style the iframe container with CSS:

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

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

Responsive Design​

Make the widget responsive:

.widget-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.widget-container iframe {
  width: 100%;
  height: 600px;
}

@media (max-width: 768px) {
  .widget-container iframe {
    height: 500px;
  }
}

Brand Integration​

Matching Your Brand Colors​

Use your brand's color palette:

<iframe
  src="https://app.routerprotocol.com/?widget=true&apiKey=YOUR_API_KEY&primaryColor=YOUR_BRAND_COLOR&backgroundColor=YOUR_BG_COLOR&textColorPrimary=YOUR_TEXT_COLOR&cardBorderRadius=YOUR_CARD_BORDER_RADIUS&buttonBorderRadius=YOUR_BUTTON_BORDER_RADIUS"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-read; clipboard-write"
></iframe>

Example: Router Protocol Branding​

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

Advanced Customization​

Combining All Options​

Here's an example with all customization options:

<iframe
  src="https://app.routerprotocol.com/?widget=true&apiKey=YOUR_API_KEY&mode=dark&primaryColor=b82877&backgroundColor=1a1a1a&textColorPrimary=ffffff&textColorSecondary=cccccc&modalColor=000000&cardBorderRadius=16px&buttonBorderRadius=12px&showHeader=true&integrator=your-app"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-read; clipboard-write"
  style="border: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
></iframe>

Best Practices​

  1. Consistency: Match your application's design system
  2. Contrast: Ensure sufficient contrast for accessibility
  3. Responsive: Test on different screen sizes
  4. Brand Alignment: Use your brand colors consistently
  5. User Experience: Keep customization subtle and functional

Next Steps​