Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.rhino.fi/llms.txt

Use this file to discover all available pages before exploring further.

​
Embedding the Rhino.fi SDA Widget (iframe)

You can easily embed the Rhino.fi SDA Widget into any site using a simple <iframe>. It provides a complete UI for generating Smart Deposit Addresses and bridging into a destination address, with no installation or bundling required.

​
⚡ 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://address.rhino.fi/?apiKey=YOUR_API_KEY&chainIn=ETHEREUM&chainOut=BASE&token=USDC&recipient=0xYOUR_RECIPIENT_ADDRESS"
  style="width: 400px; height: 565px; border: none"
  scrolling="no"
/>
Replace YOUR_API_KEY with your actual Rhino.fi API key and 0xYOUR_RECIPIENT_ADDRESS with the destination address you want to receive funds at. Unlike the bridge widget, the SDA widget has no default configuration — chainIn, chainOut, token, and recipient are all required query params.

Visit the Rhino.fi Console

You can create a project and manage API keys there.

​
Customization

You can customize the widget’s appearance and default values using URL query parameters. Here’s a quick overview:
Query ParamRequiredDescriptionExample
apiKey✅API key to authenticateapiKey=YOUR_API_KEY
chainIn✅Source chainchainIn=ETHEREUM
chainOut✅Destination chainchainOut=BASE
token✅Source tokentoken=USDT
recipient✅Destination (recipient) addressrecipient=0x0
tokenOutDestination tokentokenOut=USDC
amountPre-fills the amount in the deposit QR codeamount=10
modeWidget mode (light or dark)mode=dark
themeTheme configuration in JSONtheme={...} (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
  googleFontFamily?: string        // Google Font family name to load and apply
}
Example with custom theme: 
<iframe
  src="https://address.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"
/>