# KyberSwap Widget

## Overview

![The KyberSwap Widget](https://docs.kyberswap.com/assets/images/widget_powered_by_kyberswap-c8e301050927f11aac9f414ded1c88b6.gif)

KyberSwap Widget provides users of your website with a handy tool for swap tokens at the best rate. The KyberSwap Widget supports swaps across all Aggregator EVM chains. Please refer to [Supported Exchanges and Networks ](https://docs.kyberswap.com/~/changes/1kQEhDNzHMDf7SwOE6Yu/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/~/changes/1kQEhDNzHMDf7SwOE6Yu/kyberswap-solutions/kyberswap-widget/developer-guides/draft-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 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.

![Sample 1](https://docs.kyberswap.com/assets/images/widget-customize-6327c3a7c7454fd6f2104e6a6a0d058b.png)

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

* [Explore key Aggregator concepts](https://docs.kyberswap.com/~/changes/1kQEhDNzHMDf7SwOE6Yu/kyberswap-solutions/kyberswap-aggregator/concepts)
* [Get the best rates straight in your app with the KyberSwap widget](https://docs.kyberswap.com/~/changes/1kQEhDNzHMDf7SwOE6Yu/kyberswap-solutions/kyberswap-widget/developer-guides/draft-integrating-the-kyberswap-widget)

</details>