Widget Studio

Use our Widget Studio to configure SwapKit's Widget

Widget Studio is a UI to configure the widget to your needs and liking. It can be accessed from the dashboard through the Widget Studio button, or by selecting a specific Widget ID by the arrow symbol.

You can also test the widget studio on this page without the need to register, however this link isn't directly filled with your widget credentials.

The configuration is separated into three different tabs:

• Settings: default asset selection, chain configuration and wallet configuration.

• Design: tune the widget's visual design to adapt it to your needs.

• Integrate: copy the embedded snippet into your site.

Settings

Widget ID and Widget Key are the preferred method of authentication and chosen by default. Authentication by SwapKit's API Key can expose it to your users.

Default assets

You can choose which assets are displayed to your users first. By default, SwapKit selects them based on asset popularity across the enabled chains, but you can toggle this off and pick whichever you think are most relevant to your site.

Enabled chains

Select which chains you want to offer as swapping options. Use the presets to choose preferences like EVM-Only or BTC+ETH, among others, or add and remove chains individually.

Configuring wallets

Wallet configuration is separated between enabling and disabling, which is similar to chain configuration, and configuring wallet connection. You can follow the links to help on how to get access to the specific wallets.

All selected wallets will be available to users when they connect to the widget to swap.

Connecting a wallet to use with the widget

Design

The default widget color palette follows SwapKit's own, but all items can be customized to better fit your website. There are three preset designs for each of the dark and light themes, but you can edit the colors of every item to your preference.

Beyond the color theme, you can also adjust two shape-related settings: the border radius and the font style.

Integrate

The integration tab contains the snippets to copy into your application. It is shared as a HTML web component and in React as a configured react component. Remember that you need to have @swapkit/ui installed. Both options render the same interface and behave identically at runtime, so pick the one that matches your stack.

Configuring in code

If you want to tailor the experience for users on the go, check out the documentation on how to edit the widget with code. We recommend starting with an integration copied from the Widget Studio, but you can tweak details depending on your needs or on the specific page your users are visiting.