# Introduction

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](https://swap.swapkit.dev/).

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

<figure><img src="/files/VEH6UNSIvVvcmrUYOdxv" alt="" width="375"><figcaption><p>One of the widget's default themes</p></figcaption></figure>

### 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](/monetization.md) for the full setup instructions, it is the same setup used for SwapKit's regular API integration.

### How a typical integration goes

1. [**Create your widget keys**](/swapkit-widget/creating-your-widget-keys.md)**:** register your domain in the dashboard and get a Widget ID and Widget Key.
2. [**Configure in Widget Studio**](/swapkit-widget/widget-studio.md)**:** set your theme, wallets, and default assets with a live preview. See Settings & Configuration.
3. [**Integrate**](/swapkit-widget/integrating-swapkits-widget.md)**:** copy the generated snippet, or install the React package, and place it on your site.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.swapkit.dev/swapkit-widget/introduction.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.