⚙️Basic settings
In this section You will learn how to customize your widget step by step.
Let's start 👇
This is the widget with default settings, exactly what you would get from the Quick Start section.
We will customize the code step by step to update the widget according to your brand and preferences.
Note:
JS
is the code to use the widget on a HTML project.React
is the code to use in a React project.
Change primary color
Changing the color is as easy as specifying the primaryColor
field, more UI customization options will follow later in Advanced UI overrides.
Default slippage
You can set a default slippage value for your widget using defaultSlippage
. If this is not specified, the widget will default to 0.5%.
Add tokens
You can extend our available token lists with an array of token objects in predefinedTokens
. Each token object must have the fields address
, name
, symbol
, logoURI
, decimals
, chainId
, and hasTransactionFees
.
The field hasTransactionFees
must be set to true
if the token has a built-in fee/tax on transfers, otherwise transactions will fail. If the token is a plain ERC-20 token, then set it to false
.
Default preselected and pinned tokens
You can specify the default preselected tokens for each chain by using defaultSelectedTokenByChains
.
You can also select default pinned tokens by using defaultPinnedTokens
. These tokens appear at the top of the token list for easy access.
Add affiliate fees
To activate affiliate fees, you will need to specify both a percentage value and the wallet to which the affiliate fees should be sent. The affiliate fee can be between 0% and 2%, and decimal numbers are allowed.
Manage chains
You can select the available chains for the widget as well as the default preselected one.
Here we only turn on BNB and polygon and we set polygon as default chain.
Recap
To recap, in this walkthrough you learned how to 👇
Change the primary color,
Add tokens to the already available ones and change the pinned ones,
Specify a default slippage value,
Add affiliate fees, and
Manage the chains available.
This then leads you to the following widget and code.👇
Advanced UI customization
Head over to Advanced UI overrides to learn how to customize the design further to meet your branding needs.
Last updated