Quick Start

Integrating the Swapper Finance Widget into your website

Quick Start Integration Guide

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 integratorIdprovided 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 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.

<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.

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