> For the complete documentation index, see [llms.txt](https://docs.rango.exchange/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rango.exchange/widget-integration/quick-start.md).

# Quick Start

## Examples

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

* [Parcel](https://github.com/rango-exchange/widget-examples/tree/main/parcel)
* [Vite](https://github.com/rango-exchange/widget-examples/tree/main/vite)
* [Next.JS](https://github.com/rango-exchange/widget-examples/tree/main/next)
* [React App Rewired (JS)](https://github.com/rango-exchange/widget-examples/tree/main/react-app-rewired-js)
* [React App Rewired (TS)](https://github.com/rango-exchange/widget-examples/tree/main/react-app-rewired-ts)
* [Vue.js](https://github.com/rango-exchange/widget-examples/tree/main/vue)
* [IFrame](https://github.com/rango-exchange/widget-examples/tree/main/iframe)

## Installation

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

```bash
# 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. 

```typescript
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>
  );
}
```

{% hint style="info" %}
**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](https://discord.gg/q3EngGyTrZ). 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.&#x20;
{% endhint %}

## IFrame Version

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

```html
<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](https://docs.phantom.app/resources/faq#why-cant-i-access-phantom-on-my-website) and MetaMask Mobile on iOS, have limitations when working with iframes due to security concerns, which may cause issues for users.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.rango.exchange/widget-integration/quick-start.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.