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

The recommended path: the iframe SDK

For the vast majority of integrations, use @swapper-finance/deposit-sdk. It loads the hosted widget (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 — mount inline in a container you control.

• SwapperModal / openSwapperModal — a centered popup with a backdrop.

• SwapperEmbed — preload hidden, then reveal over a placeholder for an instant open.

Decision guide

• Want the fastest path to a working deposit? → Quick Start with openSwapperModal.

• Embedding in a page layout? → SwapperIframe in a container, or SwapperEmbed if you want instant open.