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. To get one, open a ticket in Discord — see Support.

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) — works in any framework, or none:

npm install @swapper-finance/deposit-sdk

4. Embed the widget

As a modal (fastest to ship)

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

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

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 — 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:

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

See Styling & Theming for the full list.

Next steps

• Which embed style fits you? → Choosing an Integration

• Every option explained → Configuration Reference

• Track deposits server-side → Webhooks