​
Embedding the Rhino.fi Widget (iframe)

You can easily embed the Rhino.fi Widget into any site using a simple <iframe>. This allows you to integrate our widget without needing to install or bundle anything into your app.

​
Live Preview

See the widget in action:

​
⚡ Quick Start

You can either customize your widget visually using our playground or use the example code below directly.

Customize Your Theme

Use our playground to visually design and preview your widget, then copy the embed code.

Paste the following HTML code where you want the widget to appear:

<iframe
  src="https://widget.rhino.fi/?apiKey=YOUR_API_KEY"
  style="width: 400px; height: 581px; border: none"
  scrolling="no"
/>

Replace YOUR_API_KEY with your actual Rhino.fi API key.

Reach out to us for an API key

We’ll get back to you as soon as possible!

​
Customization

You can customize the widget’s appearance using URL query parameters. Here’s a quick overview:

Query ParamDescriptionExample
apiKeyRequired API key to authenticateapiKey=YOUR_API_KEY
modeWidget mode (light or dark)mode=dark
themeTheme configuration in JSONtheme={...} (URL-encoded JSON)
chainInDefault source chainchainIn=ETHEREUM
chainOutDefault destination chainchainOut=BASE
tokenDefault tokentoken=USDT
recipientDefault recipientrecipient=0x0
amountDefault amountamount=10
excludeExclude chains or tokensexclude={...} (URL-encoded JSON)

​
🎨 Theming

You can customize the appearance of the widget by passing a theme query param in URL-encoded JSON format.

Supported Theme Properties

type WidgetTheme = {
  colors?: {
    primary?: string               // Primary color / CTA color
    primaryLight?: string          // Light variation of the primary color
    secondary?: string             // Secondary color
    widgetBackground?: string      // Background of the full widget
    select?: string                // Background of input/select fields
    textPrimary?: string           // Default widget text color
    textSecondary?: string         // Secondary or muted text
    textPrimaryCta?: string        // Text color for primary buttons
    textSecondaryCta?: string      // Text color for secondary buttons
    stroke?: string                // Border/stroke color
  }
  radius?: {
    widget?: string                // Border radius for main widget container
    actionElements?: string        // Radius for buttons and actions
    tokenSelect?: string           // Radius for token select
  }
  tokenInputStroke?: boolean       // Whether to show stroke or fill on token input
}

Example with custom theme:

<iframe
  src="https://widget.rhino.fi/?apiKey=YOUR_API_KEY&mode=light&theme=%7B%22colors%22%3A%7B%22primary%22%3A%22red%22%7D%7D"
  style="width: 400px; height: 581px; max-width: 100%; border: none"
  scrolling="no"
/>

​
🔒 Excluding Chains or Tokens

You can control which chains and tokens are available in the widget by using the exclude option. This allows you to fine-tune the user experience by disabling entire chains or specific tokens.

Exclude Option Type

type ChainExclude = Record<string, boolean | string[]>

How it works:

  • To disable an entire chain, set its value to false.
  • To disable specific tokens for a chain, provide an array of token symbols to exclude.

Examples:

Disable a whole chain:

{
  "ETHEREUM": false
}

This will disable Ethereum entirely from the widget.

Disable specific tokens:

{
  "ETHEREUM": ["USDT", "USDC"]
}

This will allow bridging from Ethereum but will hide USDT and USDC tokens.

Combined example:

{
  "ETHEREUM": ["USDT"],
  "POLYGON": false
}

This disables USDT on Ethereum and disables the Polygon chain entirely.

Note: Token symbols must match exactly as defined in the bridge configuration.