Rango Docs
API SwaggerWidget PlaygroundAppWebsite
  • 👋Welcome to Rango
  • 🏠Introduction
  • 💁How It Works
  • ✅Integrations
  • ⚖️Rango vs. Competitors
  • 🔐Security
  • 🛣️Roadmap
  • 🦎Tokenomics
  • 💰Airdrop
  • ❓FAQ
  • 🐞Bug Bounty
  • API Integration
    • 🔡Terminology
    • 🚄API Key & Rate Limits
    • 🤝Choosing the Right API
    • 🦄Basic API - Single Step
      • 🛝API Flow
      • ⚙️API Reference
        • Get Blockchains & Tokens
        • Get Quote
        • Create Transaction (Swap)
        • Check Transaction Status
        • Check Approve Transaction Status
        • Get Address Assets & Balances
        • Get Token Balance
        • Report Transaction Failure
        • Get Direct Tokens
        • Get Custom Token
        • Message Passing
      • 🎓Tutorial
        • 🍰SDK Example
      • 💰Monetization
      • 🎹Sample Transactions
      • ✅Integration Checklist
    • 🦎Main API - Multi Step
      • 🛝API Flow
      • ⚙️API Reference
        • Get Blockchains & Tokens
        • Get Best Route
        • Get All Possible Routes
        • Confirm Route
        • Create Transaction
        • Check Transaction Status
        • Check Approve Transaction Status
        • Report Transaction Failure
        • Get Custom Token
        • Get Address Token Balance
      • 🎓Tutorial
        • 🍰SDK Example
      • 💰Monetization
      • 🎹Sample Transactions
  • ℹ️API Troubleshooting
  • Technical Docs
    • 🍔Swap Aggregation
    • 💰Monetization
    • ⛽Fee Structure
    • ⛽Network Fees and Gas Estimates
    • ⌛Stuck Transactions
  • Widget Integration
    • 🧩Overview
    • 🎇Quick Start
    • ⚙️Customization
    • 💰Monetization
    • 🛣️React Router
    • 🎵Events
    • 💳External Wallets
  • Smart Contracts
    • 👩‍💼Architecture
    • 🔎Audit Reports
    • 🏗️Deployment Addresses
    • 📩Message Passing
  • Ask for Integration
    • 🙋‍♂️DEXs & DEX Aggregators
    • 📱Rango Mobile SDK
  • Useful Links
    • Twitter
    • Discord Server
    • TG Announcements
    • TG Group
  • Terms of Use
  • Privacy policy
Powered by GitBook
On this page
  • Overview
  • 1. Core Configuration
  • 2. Blockchain & Token Configuration
  • 3. Theme Configuration
  • 4. Routing Configuration
  • 5. Wallet & Signers Configuration
  • 6. Affiliate Configuration
  • 7. Feature Toggles
  • Sample Configuration Code

Was this helpful?

  1. Widget Integration

Customization

Rango Widget Config

PreviousQuick StartNextMonetization

Last updated 3 months ago

Was this helpful?

Overview

The WidgetConfig object allows you to customize your widget to fit your application's needs. The following sections provide a detailed breakdown of all available properties, organized by category.

You can customize your widget in the and use the "Export Code" button at the top to obtain the final configuration.


1. Core Configuration

  • apiKey (string) - Required

    • Your API key for accessing the Rango API. This key is required to make widget requests.

  • apiUrl (string) - Optional

    • The base API URL for custom API endpoints.

  • walletConnectProjectId (string) - Optional

    • The Wallet Connect Project ID used for integrating WalletConnect. Obtain it from .

  • title (string) - Optional

    • The title that appears on top of the widget.

  • variant (WidgetVariant) - Optional

    • The layout variant of the widget.

      • 'default': Standard view.

      • 'expanded': Expanded view showing multiple routes.

      • 'full-expanded': Full route information visible on the homepage.

  • amount (number) - Optional

    • The default value to be displayed in the swap input field.


2. Blockchain & Token Configuration

  • from (BlockchainAndTokenConfig) - Optional

    • Configuration for the source blockchain and token.

      • blockchains (string[]): A list of allowed source blockchains.

      • blockchain (string): The default blockchain.

      • token (Asset): The default token configuration.

  • to (BlockchainAndTokenConfig) - Optional

    • Configuration for the destination blockchain and token.

      • blockchains (string[]): A list of allowed destination blockchains.

      • blockchain (string): The default blockchain.

      • token (Asset): The default token configuration.

  • liquiditySources (string[]) - Optional

    • A list of allowed DEXes and bridges used for routing liquidity.

  • excludeLiquiditySources (boolean) - Optional

    • If set to true, the liquidity sources defined in liquiditySources will be excluded instead of included.

  • customDestination (boolean) - Optional

    • Enables the user to enter a custom blockchain address as the destination.


3. Theme Configuration

  • theme (WidgetTheme) - Optional

    • Customize the visual appearance of the widget.

      • mode ('auto' | 'light' | 'dark'): Defines the theme mode.

      • fontFamily (string): Sets the font for the widget. To do this, please also include your preferred font in your HTML file.

      • colors (object): Customize colors for both light and dark modes. (Please check playground to play with different colors and presets.)

        • dark: Color configuration for dark mode.

        • light: Color configuration for light mode.

      • borderRadius (number): The border radius for the widget container.

      • secondaryBorderRadius (number): The border radius for buttons within the widget.

      • singleTheme (boolean): If set to true, limits the widget to one theme (dark or light) based on the mode value.


4. Routing Configuration

  • routing (Routing) - Optional

    • maxLength (number): limit the maximum acceptable length of a route

    • avoidNativeFee ('enabled' | 'disabled'): Enable/disable avoid native fee.

    • experimental ('enabled' | 'disabled'): Enable/disable experimental routing.

    • enableCentralizedSwappers ('enabled' | 'disabled'): Enable/disable centralized swappers.


5. Wallet & Signers Configuration

  • wallets (string[]) - Optional

    • A list of supported wallet types for connecting to the widget. Example: ['metamask', 'phantom'].

  • multiWallets (boolean) - Optional

    • If set to true, the user can connect multiple wallets. Otherwise, he could only connect one wallet at the same time. (Not recommended)

  • externalWallets (boolean) - Optional

    • Allows external wallet integration.

  • signers (SignersConfig) - Optional

    • Custom RPC configuration for specific blockchains.

      • customSolanaRPC (string): Custom Solana RPC endpoint URL.

  • trezorManifest (TrezorManifest) - Optional

    • Required for integrating Trezor wallets. Provide your app's URL and a contact email.

      • email (string): your email address

      • appUrl (string): your application URL

  • tonConnect (TonConnectConfig) - Optional

    • Required for integrating Ton wallets.


6. Affiliate Configuration

  • affiliate (WidgetAffiliate) - Optional

      • ref (string): Your affiliate referral code.

      • percent (number): The percentage of fees charged per transaction.

      • wallets (object): A map of blockchain names to affiliate wallet addresses.


7. Feature Toggles

  • features (Features) - Optional

    • Controls the visibility of various features. For example, you could hide the theme or language settings in widget if you want to control it from your dApp.

      • theme ('visible' | 'hidden'): Show/hide the theme feature.

      • language ('visible' | 'hidden'): Show/hide the language selector.

      • connectWalletButton ('visible' | 'hidden'): Show/hide the connect wallet button.

      • notification ('visible' | 'hidden'): Show/hide the notification icon.

      • liquiditySource ('visible' | 'hidden'): Show/hide liquidity source information.

      • customTokens ('visible' | 'hidden'): Show/hide the custom token feature.


Sample Configuration Code

javascriptCopy codeconst config = {
  apiKey: 'c6381a79-2817-4602-83bf-6a641a409e32',
  walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b',
  title: 'My Custom Widget',
  amount: 1,
  from: {
    blockchains: ['BTC', 'LTC', 'BCH'],
    blockchain: 'BTC',
    token: {
      blockchain: 'BTC',
      symbol: 'BTC'
    }
  },
  to: {
    blockchains: ['ETH'],
    blockchain: 'ETH',
    token: {
      blockchain: 'ETH',
      symbol: 'ETH'
    }
  },
  theme: {
    mode: 'dark',
    colors: {
      dark: {
        background: '#000',
        primary: '#1C3CF1'
      },
      light: {
        background: '#FFF',
        primary: '#1C3CF1'
      }
    },
    borderRadius: 10
  },
  wallets: ['metamask', 'wallet-connect-2'],
  affiliate: {
    ref: 'your-affiliate-code',
    percent: 1,
    wallets: { 'ETH': '0x123...', 'BSC': '0xabc...' }
  },
  liquiditySources: ['Uniswap', 'SushiSwap'],
  excludeLiquiditySources: false,
  language: 'en',
  multiWallets: true,
  customDestination: true
};

manifestUrl (string): The link to your app URL containing your app URL, name and iconUrl. Sample:

Configuration for charging affiliate fees. Please check widget .

⚙️
Playground
WalletConnect Cloud
https://app.rango.exchange/tonconnect-manifest.json
monetization guide