# Quick Start

### Prerequisites

**Obtain your `integratorId`**: You will need a unique `integratorId` provided by the Swapper Finance team. This ID identifies your integration and is mandatory.

**TypeScript SDK (embedded container)**

Install Swapper deposit SDK -Use Node Package Manager npm:

```
npm i @swapper-finance/deposit-sdk
```

Use the SwapperIframe class to attach the Iframe

```typescript
import { SwapperIframe } from '@swapper-finance/deposit-sdk';

const swapper = new SwapperIframe({
  container: '#swapper-container', // or HTMLElement
  integratorId: 'your-integrator-id',
  dstChainId: '8453',
  dstTokenAddr: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
  depositWalletAddress: '0x2A018F2506acaEEE2C10632514Fc5DCa9eE2c28A',
  // optional
  styles: { themeMode: 'light' },
  supportedDepositOptions: ["transferCrypto", "depositWithCash"]
});
```

**TypeScript SDK (modal popup)**

Install Swapper deposit SDK -Use Node Package Manager npm:

```
npm i @swapper-finance/deposit-sdk
```

Use the openSwapperModal to open a pop-up with an iframe

```typescript
import { openSwapperModal } from '@swapper-finance/deposit-sdk';

const modal = openSwapperModal({
  integratorId: 'your-integrator-id',
  dstChainId: '8453',
  dstTokenAddr: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
  depositWalletAddress: '0x2A018F2506acaEEE2C10632514Fc5DCa9eE2c28A',
  // optional
  styles: { themeMode: 'dark' },           
  supportedDepositOptions: ["transferCrypto", "depositWithCash"],
  modalStyle: { borderRadius: '16px' },     
  onClose: () => console.log('Closed'),     
});
```

**Embed via iframe (minimal)**

**Use a simple iframe with a base URL:**

```typescript
https://deposit.swapper.finance
```

**example integration**

```html
<iframe
  src="https://swapper-deposit-sdk.web.app?integratorId=YOUR_ID&dstChainId=8453&dstTokenAddr=0x...&depositWalletAddress=0x..."
  title="Swapper Deposits Widget"
  allow="camera"
  sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
></iframe>
```

Required query params:

* integratorId: your integrator identifier
* dstChainId: destination chain ID (e.g., 8453)
* dstTokenAddr: destination token address (ERC‑20)
* depositWalletAddress: wallet receiving deposits

Optional:

* styles: JSON string for theming (URL‑encoded), e.g. `styles=%7B%22themeMode%22%3A%22dark%22%7D`

Note:

Both the **`allow`** and **`sandbox`** properties must be included for the onRamp integration to work properly.


---

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