# 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 [request an API key](https://t.me/Rango_Marketing), 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.&#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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.