> 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/widget-integration/choosing-an-integration.md).

# Choosing an Integration

There is one deposit widget and a few ways to put it on your page. Pick by your stack and how much control you want over presentation.

## At a glance

| Approach                 | Package                                                                             | Best for                                                                                            |
| ------------------------ | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| **Iframe SDK**           | [`@swapper-finance/deposit-sdk`](/widget-integration/iframe-sdk.md)                 | Almost everyone. Any framework or no framework.                                                     |
| **Modal / Inline embed** | `@swapper-finance/deposit-sdk`                                                      | A focused popup, or a placeholder that fills in-place. Built on the iframe SDK.                     |
| **API v1**               | `@swapper-finance/deposit-sdk` ([`SwapperApiClient`](/api-v1/sdk.md)) or plain HTTP | Building your own UI. You handle wallets, signing, and tracking. See [API v1](/api-v1/overview.md). |

## The recommended path: the iframe SDK

For the vast majority of integrations, use [`@swapper-finance/deposit-sdk`](/widget-integration/iframe-sdk.md). It loads the hosted widget ([`https://deposit.swapper.finance`](https://deposit.swapper.finance)) inside a sandboxed iframe and gives you a small, typed API to configure it, listen for events, and update it on the fly.

Why the iframe SDK:

* **Framework-agnostic** — vanilla JS, React, Vue, Svelte, Angular, mobile WebViews.
* **Always current** — the widget is hosted, so wallet SDKs, chains, and on-ramp logic update without you shipping anything.
* **Isolated** — the widget's Web3 stack runs in the iframe, sandboxed from your app.

It comes in three shapes, all in the same package:

* [**`SwapperIframe`**](/widget-integration/iframe-sdk.md) — mount inline in a container you control.
* [**`SwapperModal` / `openSwapperModal`**](/widget-integration/modal-and-embed.md) — a centered popup with a backdrop.
* [**`SwapperEmbed`**](/widget-integration/modal-and-embed.md#inline-embed-swapperembed) — preload hidden, then reveal over a placeholder for an instant open.

## When to skip the widget entirely

If you're building a fully custom funding UI, use [API v1](/api-v1/overview.md): get a [quote](/api-v1/endpoints/quote.md), have the user sign the returned transaction, and [track the transfer](/api-v1/endpoints/status.md) yourself. The same `@swapper-finance/deposit-sdk` package ships [`SwapperApiClient`](/api-v1/sdk.md), a typed client for it. You take on wallet connection, signing, and progress UX.

## Decision guide

* **Want the fastest path to a working deposit?** → [Quick Start](/getting-started/quick-start.md) with `openSwapperModal`.
* **Embedding in a page layout?** → [`SwapperIframe`](/widget-integration/iframe-sdk.md) in a container, or [`SwapperEmbed`](/widget-integration/modal-and-embed.md#inline-embed-swapperembed) if you want instant open.
* **Rolling your own UI?** → [API v1](/api-v1/overview.md).