> 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 automatically fills in your credentials, selected wallets, theme, default assets, and any wallet-provider configuration. 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](/swapkit-widget/configuring-in-code.md) 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 set to your desired width and height.
* 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.