🎇Quick Start

Getting Start with Rango Widget

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'
  }
              
  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 request an API key, describing your dApp, the blockchains you like to connect to, and your dApp domain if it's a website to enable CORS headers for your API key.

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)

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'
  }
  rangoWidget.init(config)
</script>