> 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/widget-studio.md).

# Widget Studio

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

You can also test the widget studio [on this page](https://widget.swapkit.dev/studio) without the need to register, however this link isn't directly filled with your widget credentials.

<figure><img src="/files/rb8rFO5bafQBRTdNHk7k" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/cUiwhvzRHOu9U0iy9N98" alt="" width="375"><figcaption></figcaption></figure>

### 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 what assets are first displayed to your users. By default, SwapKit picks them based on popularity of the assets between the chains that are enabled but you can toggle this off and pick what you think is most relevant to your site.

<figure><img src="/files/sVgrt27oVfbC4MjV4hEZ" alt="" width="375"><figcaption></figcaption></figure>

#### Enabled chains

Select what chains you will show as swapping options. Use the pre-sets to select preferences such as EVM-Only or BTC+ETH among others, or individually add and remove chains.

<figure><img src="/files/5sVVYrcPtNoAUvCxhMMg" alt="" width="563"><figcaption></figcaption></figure>

#### 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 fo help on how to get access to the specific wallets.

<figure><img src="/files/G7XtSrJuhdT4JlYZKVLK" alt="" width="375"><figcaption></figcaption></figure>

All selected wallets will be available to the user when they try connecting to the widget to swap.&#x20;

<figure><img src="/files/jMZQzy9vfDTDKMmeGkef" alt="" width="563"><figcaption><p>Connecting a wallet to use with the widget</p></figcaption></figure>

### Design

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

<figure><img src="/files/co5d3Ph0PI6baXietsqC" alt="" width="375"><figcaption></figcaption></figure>

Besides the color theme, you can also modify two different settings for the shape: the border radius and the font style.

<figure><img src="/files/Zrnzur7hVtS7tXe5zoEb" alt="" width="375"><figcaption></figcaption></figure>

### 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 taylor the experience to the user on the go, check out the [documentation on how to edit the widget with code](/swapkit-widget/configuring-in-code.md). 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.


---

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