Introduction
A drop-in, non-custodial cross-chain swap interface for your site. The widget handles wallets, quoting, approvals, and execution so you don't have to.
The SwapKit Widget is a drop-in, embeddable swap interface for your website or app. It gives your users a complete cross-chain swapping experience (pick what they pay, pick what they receive, connect a wallet, and swap) without sending them to a third-party site, and without you having to build any of the swap flow yourself.
Under the hood it is powered by the same liquidity, routing, and pricing as SwapKit's API, so your users get full cross-chain coverage and you get none of the integration work.
You can try the potential of SwapKit's Widget in this demonstration page.
What your users can do
From a single embedded component, an end user can:
Choose a source asset and a destination asset across many chains.
Connect a wallet, or paste a destination address for the receiving chain.
See live quotes and routes, with fees and estimated time.
Approve token spending when a swap requires it.
Review, confirm, and broadcast the swap from their own wallet.
Track their recent swaps from a built-in history view.
Every swap is non-custodial. Funds move directly from the user's wallet along the route, and the user signs in their own wallet.
What's handled for you
The point of the widget is that the hard parts are abstracted away. You do not implement, and do not maintain:
Wallet connection and the many wallet SDKs across chains.
Quoting, route selection, and price discovery.
Token approvals and transaction building.
Broadcasting and swap status tracking.
Mobile vs desktop wallet handling, chain-support filtering, and other edge cases.
You bring a set of credentials and an optional bit of styling and asset selection; the widget brings the entire swap experience.
Make it yours
The widget is designed to sit inside your product, not look like a bolt-on:
Theming. Match your brand with your own colors. The widget exposes color tokens for background, surfaces, accent, buttons, text, and borders, but can also ship with sensible light and dark default theme options.
Wallets. Offer every supported wallet, or narrow the list to just the ones you want.
Default assets. Preselect the pay and receive assets your users are most likely to want.
Swapping options. Limit the swapping options to what is relevant to your users.
Sizing. The widget fills its container, so you decide where it sits and how large it is.
All of this is configured visually, with a live preview, in Widget Studio. No code is required to restyle or re-scope the widget.
Two ways to embed
The widget ships in two equivalent forms, so it fits any stack:
A web component
<swapkit-widget>you can drop into any HTML page, including no-code platforms like WordPress.A React component
<SwapKitWidget />for your React / Next.js app, with full TypeScript types.
Both render the same interface and behave identically at runtime. See the instructions on how to integrate SwapKit's Widget for the hands-on setup.
Charge affiliate fees
You can select to apply fees to every swap routet through your widget integration and monetize the swaps done on your site.
Affiliate fees are not applied automatically to widget swaps. To earn fees on swaps done through the widget, add your affiliate configuration in the app's Affiliate Config tab. Once configured, the fees are applied to every swap routed through that app's widget, so this step is required if you intend to charge fees. See the monetization page for the full setup instructions, it is the same setup used for SwapKit's regular API integration.
How a typical integration goes
Create your widget keys: register your domain in the dashboard and get a Widget ID and Widget Key.
Configure in Widget Studio: set your theme, wallets, and default assets with a live preview. See Settings & Configuration.
Integrate: copy the generated snippet, or install the React package, and place it on your site.
Last updated