# KyberSwap Widget

## Overview

<figure><img src="https://1368568567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw1XgQJc40kVeGUIxgI7c%2Fuploads%2Fgit-blob-d087debe81a9bba96bca09d48e7723676df278f5%2FWidget_Intro.gif?alt=media" alt=""><figcaption><p>The KyberSwap Widget</p></figcaption></figure>

KyberSwap Widget provides users of your website with a handy tool for token swaps at superior rates. The KyberSwap Widget supports swaps across all Aggregator EVM chains. Please refer to [Supported Exchanges and Networks ](https://docs.kyberswap.com/getting-started/supported-exchanges-and-networks)for the full list of supported chains.

For guides on how to integrate the KyberSwap Widget into your app, you can refer to [Integrating The KyberSwap Widget](https://docs.kyberswap.com/developer-guide/aggregator-api/how-to-guides/kyberswap-widget/integrating-the-kyberswap-widget).

## Example use cases

* Building a custom front-end for KyberSwap
* Swapping assets in a Defi application

## Endlessly customizable

You can [customize](https://docs.kyberswap.com/developer-guide/aggregator-api/how-to-guides/kyberswap-widget/customizing-the-kyberswap-widget) the colors, font, and token list to match your app theme.. Alternatively, you can use our slightly modified sample `theme` to create your own look and feel.

<figure><img src="https://1368568567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw1XgQJc40kVeGUIxgI7c%2Fuploads%2Fgit-blob-7a91ca2e0ff39ead279f9d4750e378aa54a6cfde%2FWidget_Customize.gif?alt=media" alt="" width="375"><figcaption><p>Customize KyberSwap Widget</p></figcaption></figure>

```javascript
const theme: Theme = {
  primary: '#1C1C1C',
  secondary: '#0F0F0F',
  dialog: '#313131',
  borderRadius: '20px',
  buttonRadius: '24px',
  stroke: '#505050',
  interactive: '#292929',
  accent: '##28E0B9',
  success: '189470',
  warning: 'FF9901',
  error: 'FF537B',
  text: '#FFFFFF',
  subtext: 'A9A9A9',
  fontFamily: 'Work Sans',
}
```

## Next steps

<details>

<summary>Developers</summary>

* [Monetize your integration with custom fee](https://docs.kyberswap.com/developer-guide/aggregator-api/how-to-guides/kyberswap-widget/widget-iframe-fee)

</details>