01
A complete swap app, without building one.
The SwapKit Swap Widget runs the whole swap: wallet connection, quoting and route selection, token approvals, transaction building, broadcasting and status tracking. It's powered by the same liquidity, routing and pricing as the SwapKit API.
Every swap is non-custodial. Users sign in their own wallet, and funds move directly from that wallet along the route.
Read the Swap Widget docs →02
Add the swap widget in three steps
- 1
Create widget keys
Add an app in the dashboard and create a Widget ID and key, locked to your domain.
- 2
Design it in Studio
Pick chains, wallets, default assets, colours and fonts in Widget Studio. No code needed.
- 3
Paste the snippet
Copy the generated HTML or React snippet into your site. That's the whole integration.
<script type="module" src="https://cdn.swapkit.dev/widget/latest/swapkit-widget.js"></script>
<div style="max-width: 560px; min-height: 640px;">
<swapkit-widget
widget-id="YOUR_WIDGET_ID"
widget-key="YOUR_WIDGET_KEY"
></swapkit-widget>
</div>03
What your users get
Any-to-any swaps
Pick a source and destination asset across chains, connect a wallet or paste a destination address.
Live quotes
Routes from every provider, with fees and estimated time shown before they confirm.
Built-in tracking
Each swap is tracked to completion, with recent swaps in a history view.
04
Make it yours
Set everything in Widget Studio, or configure it in code with the same options.
Your brand
Three preset designs for light and dark themes, with every colour, the border radius and the font editable.
Your chains
Every supported chain by default. Use presets such as EVM-only or BTC + ETH, or pick chains one by one.
Your wallets
MetaMask, Phantom, Coinbase, Ledger, Trezor, WalletConnect and more. Mobile users only see wallets that work on mobile.
Your defaults
Choose the assets the widget opens with, or let it pick by popularity across your enabled chains.
05
Embed with HTML or React
Both render the same interface and behave identically.
| Form | Best for | Install |
|---|---|---|
| Web component <swapkit-widget> | Plain HTML, WordPress or any non-React stack | One CDN script tag |
| React component <SwapKitWidget /> | React 19 and Next.js apps, with TypeScript types | npm package @swapkit/ui |
06
Turn swaps into revenue
Set your affiliate fee once in the dashboard's Affiliate Config and it applies to every swap through your widget, paid to your addresses automatically, with volume and earnings tracked per app.
- Your fee
- You choose
- Payout
- Automatic, on-chain
- SwapKit fee
- 0.10–0.15%
07
Questions
What is the SwapKit Swap Widget?
An embeddable, non-custodial cross-chain swap interface. Add it to a website with one HTML tag or a React component, and users swap native assets across 30+ chains from their own wallet, routed across 16+ liquidity providers.
How do I add the swap widget to my website?
Create a Widget ID and key in the SwapKit dashboard, configure the widget in Widget Studio, then paste the generated snippet: a script tag plus a <swapkit-widget> element, or the SwapKitWidget component from @swapkit/ui in React.
Does the widget need React?
No. It ships as a web component for any page, WordPress included, and as a React component in @swapkit/ui if you use React.
Which chains and wallets does it support?
Every chain the SwapKit API supports by default, including Bitcoin, Ethereum, Solana, BNB Chain, XRP, TRON, Zcash and THORChain. Wallets include MetaMask, Phantom, Coinbase, Ledger, Trezor, WalletConnect and Xaman.
Is it non-custodial?
Yes. Users sign every transaction in their own wallet, and SwapKit never holds their funds.
Do I expose an API key on my site?
No. The widget uses a Widget ID and key that only work on the domains you register, and you can rotate or disable them at any time.
Are my fees applied automatically?
Only once you set them. Configure your fee in the app's Affiliate Config in the dashboard and it applies to every widget swap from then on.
Can I try it before signing up?
Yes. Widget Studio works without an account, and the live demo at swap.swapkit.dev shows the widget in use.
Ship cross-chain swaps this week.
One integration for 10,000+ assets across 30+ chains, with limit orders and Hyperliquid deposits included. Non-custodial by design.