# Customizing The KyberSwap Widget

## Overview

Below you’ll find a few examples showing how you can [customize the widget theme](https://docs.kyberswap.com/Aggregator/swap-widget/customize-widget) to match the look and feel of your dApp. All of them can be integrated using the following code snippet where you can set your `theme`:

```javascript
import { Widget } from "@kyberswap/widgets";

const theme: Theme = {
  // Check out the theme examples below
}

<Widget
  client="yourCompanyNameHere"
  theme={theme}
  tokenList={[]}
  provider={ethersProvider}
  defaultTokenOut={defaultTokenOut[chainId]}
/>
```

## Customizing the title

Integrators are free to set their own widget title using ReactNode or just a `string` value.

```javascript
  import { Widget } from "@kyberswap/widgets";

  <Widget
    title={
      <div>Custom Title</div>
    }
  />
```

## Customizing the width

Widget has a fixed height of 360px and a default width of 360px. You cannot modify the height of the widget. You can modify the width up to a minimum width of 300px.

You can customize the width by passing a valid CSS number or width to the widget's width holder.

```javascript
  import { Widget } from "@kyberswap/widgets";

  <Widget
    width={360}
  />
```

## Customizing the fees

The KyberSwap Widget makes it easy to configure a transaction facilitation fee by passing additional parameters to the widget. Information about parameters you can refer to [KyberSwap Aggregator APIs](/developer-guide/aggregator-api/aggregator-api-specification/evm-swaps.md).

```javascript
import { Widget } from "@kyberswap/widgets";

<Widget  feeSetting={
    feeAmount: 100,
    feeReceiver: "0xDcFCD5dD752492b95ac8C1964C83F992e7e39FA9",
    chargeFeeBy: "currency_in",
    isInBps: true,
} />
```

## Customizing the themes

You can set optional parameters to tailor the appearance and functionality of the swap widget to fit your app.

All attributes below are color codes, except `buttonRadius` (number), `borderRadius` (number between 0 and 1), and `fontFamily` (string).

You can check out examples of the swap widget, and the [Figma](https://www.figma.com/file/xXVDyWzLPrJgzrQ4GMroRp/Kyber-Widget?node-id=1%3A2) file if you want to mock it up first!

![Widget](https://docs.kyberswap.com/assets/images/darkmode-4d3902ec1c47620fdefd19b3d3722f71.png)

<table><thead><tr><th width="206">Properties</th><th width="161">Prop Type</th><th width="149">Example</th><th>Description</th></tr></thead><tbody><tr><td><code>primary</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>primary background color of swap form</td></tr><tr><td><code>secondary</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>secondary background color of swap form</td></tr><tr><td><code>dialog</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>color of dialog</td></tr><tr><td><code>borderRadius</code></td><td><code>string</code></td><td><code>30px</code></td><td>border-radius of swap form and swap button (same border-radius)</td></tr><tr><td><code>buttonRadius</code></td><td><code>string</code></td><td><code>5px</code></td><td>border-radius of swap button</td></tr><tr><td><code>stroke</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>color of the stroke</td></tr><tr><td><code>interactive</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>color of interactive button(Swap icon and token picker)</td></tr><tr><td><code>accent</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>swap button and link color</td></tr><tr><td><code>success</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>success color</td></tr><tr><td><code>warning</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>warning color</td></tr><tr><td><code>error</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>error color</td></tr><tr><td><code>text</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>primary text color</td></tr><tr><td><code>subtext</code></td><td><code>string</code></td><td><code>#F1FFEE</code></td><td>secondary text color</td></tr><tr><td><code>fontFamily</code></td><td><code>string</code></td><td><code>Roboto</code></td><td>font-family of Swap form</td></tr></tbody></table>

## Customizing the Trade Route

The KyberSwap Widget can be configured to also return the trade route by setting the `enableRoute` parameter to `true`.

Moreover, you can also specify the list of DEXs which trades via the widget will be routed to using the `enableDexes` parameter. The full list of DEX IDs can be found [here](/developer-guide/aggregator-api/dex-ids.md).

## Customizing the Token Lists

```javascript
import { Widget } from "@kyberswap/widgets";

// You can also pass a list of tokens as JSON, as long as the format is correct
const MY_TOKEN_LIST = [
    {
    "name": "KNC",
    "address": "0x1C954E8fe737F99f68Fa1CCda3e51ebDB291948C",
    "symbol": "KNC",
    "decimals": 18,
    "chainId": 1,
    "logoURI": "https://s2.coinmarketcap.com/static/img/coins/64x64/9444.png"
  },
    {
    "name": "Tether USD",
    "address": "0xdAC17F958D2ee523a2206206994597C13D831ec7",
    "symbol": "USDT",
    "decimals": 6,
    "chainId": 1,
    "logoURI": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xdAC17F958D2ee523a2206206994597C13D831ec7/logo.png"
  },
  {
    "name": "USD Coin",
    "address": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
    "symbol": "USDC",
    "decimals": 6,
    "chainId": 1,
    "logoURI": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
  },
]

<Widget
    theme={theme}
    tokenList={MY_TOKEN_LIST}
    provider={ethersProvider}
    defaultTokenOut={defaultTokenOut[chainId]}
/>
```


---

# Agent Instructions: 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.kyberswap.com/developer-guide/aggregator-api/how-to-guides/kyberswap-widget/customizing-the-kyberswap-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.