> For the complete documentation index, see [llms.txt](https://docs.swapkit.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.swapkit.dev/swapkit-widget/integrating-swapkits-widget.md).

# Integrating SwapKit's Widget

The widget ships in two equivalent forms. Both render the same interface and behave identically at runtime, so pick the one that matches your stack.

| Form                                    | Best for                                       | Distribution       |
| --------------------------------------- | ---------------------------------------------- | ------------------ |
| `<swapkit-widget>` **web component**    | Plain HTML, WordPress, or any non-React stack. | CDN script tag     |
| `<SwapKitWidget />` **React component** | React / Next.js apps, with TypeScript types.   | npm: `@swapkit/ui` |

### Web component (CDN)

Load the bundle once, then place the `<swapkit-widget>` element where you want it. Wrap it in a container that controls its size, since the widget fills the width and height of its host element.

```html
<!-- SwapKit Widget -->
<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>
```

The script self-registers the `<swapkit-widget>` element and injects the widget's styles into the page once. Styles are scoped (under the `sk-ui-*` class prefix and a scoped preflight) so they won't collide with your site's CSS.

#### Use the snippet from Widget Studio

In practice you should not hand-build this snippet. Configure the widget in **Widget Studio** and copy the snippet from the **Integrate** tab, which fills in your credentials, selected wallets, theme, default assets, and any wallet-provider configuration for you. A generated snippet looks like this:

```html
<script type="module" src="https://cdn.swapkit.dev/widget/latest/swapkit-widget.js"></script>

<swapkit-widget
  widget-id="YOUR_WIDGET_ID"
  widget-key="YOUR_WIDGET_KEY"
  wallets="METAMASK,PHANTOM,WALLETCONNECT"
  color-primary="220 18% 8%"
  color-accent="155 86% 62%"
  config='{"apiKeys":{"walletConnectProjectId":"YOUR_PROJECT_ID"}}'
></swapkit-widget>
```

Paste it anywhere in your page and wrap it in your own sizing container. The attributes have no required order and you can edit them freely. See Settings & Configuration for what each one does.

<figure><img src="/files/YHgeJicuGNWUJT0qa8p2" alt="" width="368"><figcaption></figcaption></figure>

### React (npm)

Install `@swapkit/ui`, import the stylesheet once at your app root, then render the component:

```tsx
import "@swapkit/ui/swapkit.css";
import { SwapKitWidget } from "@swapkit/ui/react";

export function SwapWidget() {
  return (
    <SwapKitWidget
      widgetId={process.env.NEXT_PUBLIC_SWAPKIT_WIDGET_ID!}
      widgetKey={process.env.SWAPKIT_WIDGET_KEY!}
      inputAsset="BTC.BTC"
      outputAsset="ETH.USDT-0xdAC17F958D2EE523A2206206994597C13D831EC7"
    />
  );
}
```

<figure><img src="/files/6BTWqIUpL11F8xsbCA90" alt="" width="337"><figcaption></figcaption></figure>

Notes:

* Importing `@swapkit/ui/swapkit.css` is required. Without it the widget renders unstyled.
* The widget fills its parent, so place it inside a container that sets the width and height you want.
* React 19 is a peer dependency, and your bundler must support ESM.

See [Settings & Configuration](/swapkit-widget/configuring-in-code.md) for the full list of props.


---

# 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/integrating-swapkits-widget.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.