In this section You will learn how to customize your widget step by step.
If you are not interested in customization, the instructions in the Quick Start section are enough for you to launch your widget.
We will customize the code step by step to update the widget according to your brand and preferences.
JSis the code to use the widget on a HTML project.
Reactis the code to use in a React project.
You can edit the code at each step, but we suggest you follow the whole walkthrough so that at the end you will have a fully functional widget. Afterwards, you can add even more customization.
Changing the color is as easy as specifying the
primaryColorfield, more UI customization options will follow later in Advanced UI overrides.
You can set a default slippage value for your widget using
defaultSlippage. If this is not specified, the widget will default to 0.5%.
You can extend our available token lists with an array of token objects in
predefinedTokens. Each token object must have the fields
hasTransactionFeesmust be set to
trueif 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
If not specified, only the tokens in our lists will be available.
Add predefined token 1 and 2 on BNB chain and hide Bridge$.
You can customize the list of tokens by adding or removing them. To remove a token, you can use the hideTokens field and provide an array of strings representing the symbol of the tokens you wish to hide.
hideTokens:['token symbol 1','token symbol 2']
You can specify the default preselected tokens for each chain by using
If not specified, the native coin of the chain will be preselected as input token. An output token will not be shown if it is not specified.
You can also select default pinned tokens by using
defaultPinnedTokens. These tokens appear at the top of the token list for easy access.
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.
You can select the available chains for the widget as well as the default preselected one.
If not specified, all of the available chains will be active and the default chain will be BNB Chain.
Here we only turn on BNB and polygon and we set polygon as default chain.
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.
Head over to Advanced UI overrides to learn how to customize the design further to meet your branding needs.