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.
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.
If you are using the Next.js framework on your website then please adjust your next.config.js file as shown here. Replace the text within "[]" with '@poodl/widget'.
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.
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.
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 hasTransactionFeesmust 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.
If not specified, only the tokens in our lists will be available.
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.
Default preselected and pinned tokens
You can specify the default preselected tokens for each chain by using defaultSelectedTokenByChains.
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.
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.
