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

# Quick Start

Embed a working deposit widget in about five minutes.

## 1. Get an `integratorId`

Every integration is tied to a registered integrator id. It scopes the widget session to your configuration and links your [webhook](/tracking-deposits/webhooks.md). To get one, open a ticket in [Discord](https://discord.gg/y8eevERxBz) — see [Support](/resources/support.md).

You can build against the examples below with a placeholder id, but a real deposit needs a registered one.

## 2. Decide your destination

Pick the three values that describe **what you want to receive and where**:

* `dstChainId` — e.g. `"8453"` (Base)
* `dstTokenAddr` — e.g. `"0x833…913"` (USDC on Base)
* `depositWalletAddress` — the wallet that should receive it

The zero address (`0x0000000000000000000000000000000000000000`) means the chain's native token.

## 3. Install the SDK

Swapper embeds through the **iframe SDK** ([`@swapper-finance/deposit-sdk`](https://www.npmjs.com/package/@swapper-finance/deposit-sdk)) — works in any framework, or none:

```bash
npm install @swapper-finance/deposit-sdk
```

## 4. Embed the widget

### As a modal (fastest to ship)

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

document.querySelector("#fund").addEventListener("click", () => {
  openSwapperModal({
    integratorId: "your-integrator-id",
    dstChainId: "8453",
    dstTokenAddr: "0x833…913",
    depositWalletAddress: "0x2A0…28A",
    onEvent: (event) => console.log("widget event:", event),
  });
});
```

### Inline, in a container

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

const swapper = new SwapperIframe({
  container: "#swapper-container", // CSS selector or HTMLElement
  integratorId: "your-integrator-id",
  dstChainId: "8453",
  dstTokenAddr: "0x833…913",
  depositWalletAddress: "0x2A0…28A",
});
```

That's it — the widget loads [`https://deposit.swapper.finance`](https://deposit.swapper.finance) in a sandboxed iframe and renders your branded deposit flow.

## 5. React to a completed deposit

Pass an `onEvent` callback to react in the browser the moment a deposit lands:

```typescript
import { WidgetEventName } from "@swapper-finance/deposit-sdk";

openSwapperModal({
  integratorId: "your-integrator-id",
  dstChainId: "8453",
  dstTokenAddr: "0x833…913",
  depositWalletAddress: "0x2A0…28A",
  onEvent: (event) => {
    if (event.type === WidgetEventName.TRANSACTION_SUCCESS) {
      console.log("Deposit complete:", event.data);
      // update your UI here
    }
  },
});
```

For reliable, server-side crediting, also set up a [webhook](/tracking-deposits/webhooks.md) — it's the source of truth even if the user closes the tab.

## 6. Make it yours

Add a `styles` object to match your brand:

```typescript
openSwapperModal({
  // ...required params
  styles: {
    themeMode: "dark",
    componentStyles: {
      primaryColor: "#836FFF",
      backgroundColor: "#111111",
    },
  },
});
```

See [Styling & Theming](/widget-integration/styling.md) for the full list.

## Next steps

* **Which embed style fits you?** → [Choosing an Integration](/widget-integration/choosing-an-integration.md)
* **Every option explained** → [Configuration Reference](/widget-integration/configuration.md)
* **Track deposits server-side** → [Webhooks](/tracking-deposits/webhooks.md)