# Quick Start

### Quick Start Integration Guide <a href="#quick-start-integration-guide" id="quick-start-integration-guide"></a>

Integrating the Swapper Finance Widget into your website or application is straightforward. This guide will walk you through the minimal steps to get the widget up and running.

### Prerequisites

1. **Obtain your `integratorId`**: You will need a unique `integratorId`provided by the Swapper Finance team. This ID identifies your integration and is mandatory.
2. **Widget Base URL**: The Swapper Finance Widget is hosted at: `https://app.swapper.finance`

### Integration Steps

The core of the integration involves embedding an `<iframe>` and providing the query params in the URL. Our CSP does not allow embedding the widget in a local file. If you wish to open it in a simple HTML file, you will need to use a tool  [`http-serve`](https://www.npmjs.com/package/http-server) to host it. If you are using a framework like React, it will work without any changes.

### 1. HTML Structure (Basic Iframe)

First, add an `<iframe>` element to your HTML where you want the widget to appear.

```html
<iframe
  src="https://app.swapper.finance?integratorId=..."
  width="100%"
  title="Swapper Finance Widget"
  allow="camera"
  sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation"
></iframe>
```

* `width` : Adjust it as needed for your layout. `560px` is a fixed height.
* `title`: Important for accessibility.

### 2. Constructing the Iframe `src` URL

The `src` attribute of the iframe needs to include your `integratorId` as a query parameter.

* **Base URL:** `https://app.swapper.finance`
* **Query Parameter:** `integratorId=YOUR_INTEGRATOR_ID`

So, the full `src` URL with only the required params will look like this:\
`https://app.swapper.finance?integratorId=YOUR_INTEGRATOR_ID`

You can either set this directly in the HTML or dynamically using JavaScript. More about configuring the widget on the following [page](/swapper-widget/styling-widget.md).

### 3. Domain whitelisting

To make the widget fully functional, please send us the exact domain where it will be embedded. We will validate it and then add it to the whitelist before full functionality is available.\
\
To run a functional app on a localhost, set a `development` to `true` and the widget will be functional as long as it is run on one of the following URLs:

* `http://localhost:3000`
* `http://localhost:3001`
* `http://localhost:5173`


---

# 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.swapper.finance/swapper-widget/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.