Integrating SwapKit's Widget

Add the widget to your site as a web component on any HTML page, or as a React component in a React or Next.js app.

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.

<!-- 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:

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

React (npm)

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

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"
    />
  );
}

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 for the full list of props.