🎇Quick Start

Getting Start with Rango Widget

Examples

Here you could explore different examples of using widget for different frameworks:

• Parcel

• Vite

• Next.JS

• React App Rewired (JS)

• React App Rewired (TS)

• Vue.js

• IFrame

Installation

First you need to add @rango-dev/widget-embedded dependency.

# using yarn
yarn add @rango-dev/widget-embedded

# or using npm
npm install --save @rango-dev/widget-embedded

Then you could use this code snippet to easily add widget to your project.

import { Widget, WidgetConfig } from "@rango-dev/widget-embedded";

export default function App() {

  const config = {
    // This API key is only for test purpose. Don't use it in production.
    apiKey: 'c6381a79-2817-4602-83bf-6a641a409e32',
    // This project id is only for test purpose. Don't use it in production.
    // Get your Wallet Connect project id from https://cloud.walletconnect.com/
    walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b',
  }       
  return (
    <div className="App">
      <Widget config={config} />
    </div>
  );
}

Get Your API KEY

Our service is currently free. But to use our API, SDK or Widget, you need to open a ticket in users-support channel of Rango official Discord server. Describe what your project does, what is the website and what are the social media handles in the ticket, the blockchains you like to connect to, and your dApp domain if it's a website to enable CORS headers for your API key.

IFrame Version

If you want to use Rango widget directly in your html codes using IFrame, you code use code snippet below.

<div id="rango-widget-container"></div>

<script src="https://api.rango.exchange/widget/iframe.bundle.min.js"></script>

<script defer type="text/javascript">
  const config = {
    // This API key is only for test purpose. Don't use it in production.
    apiKey: 'c6381a79-2817-4602-83bf-6a641a409e32',
    // This project id is only for test purpose. Don't use it in production.
    // Get your Wallet Connect project id from https://cloud.walletconnect.com/
    walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b',
  }
  rangoWidget.init(config)
</script>

IFrame Limitations

Although using the iframe version is quite straightforward, we recommend utilizing the JavaScript package directly instead. This is because certain wallets, such as Phantom and MetaMask Mobile on iOS, have limitations when working with iframes due to security concerns, which may cause issues for users.