Integrating The KyberSwap Widget

Superior Rates With Minimal Code

Installing the Swap Widget

To get started, install the widgets library using npm or Yarn.

npm:

npm i @kyberswap/widgets

yarn:

yarn add @kyberswap/widgets

Adding the Swap widget to your app

Embed the React component in your application with this piece of code:

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

<Widget
    client="yourCompanyNameHere"
    theme={theme}
    tokenList={[]}
    enableRoute = true
    enableDexes="kyberswap-elastic,uniswapv3,uniswap"
    provider={ethersProvider}
    defaultTokenOut={defaultTokenOut[chainId]}
    title={<div>Custom Title</div>}
/>

That's it! You should now see a fully functional swap widget on your site. You can easily customize the widget according to your application colors.

Last updated

Was this helpful?