> For the complete documentation index, see [llms.txt](https://pet-poodl.gitbook.io/pet-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pet-poodl.gitbook.io/pet-for-developers/whitelabel/customisation-with-few-clicks.md). # Basic settings In this section You will learn how to customize your widget step by step. {% hint style="info" %} If you are not interested in customization, the instructions in the Quick Start section are enough for you to launch your widget. {% endhint %} ## Let's start :point\_down: This is the widget with default settings, exactly what you would get from the [Quick Start](https://github.com/bridges-team/whitelabel-docs/blob/main/get-started/plug-and-go/README.md) 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. {% hint style="info" %} If you are using the Next.js framework on your website then please adjust your next.config.js file as shown [here](https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages). Replace the text within "\[]" with '@poodl/widget'. {% endhint %} {% embed url="" %} {% hint style="info" %} 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. {% endhint %} ## 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.](/pet-for-developers/whitelabel/page-2.md) {% embed url="" %} ## 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%. {% embed url="" %} ## 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`. {% hint style="info" %} If not specified, only the tokens in our lists will be available. {% endhint %} {% embed url="" %} Add predefined token 1 and 2 on BNB chain. {% endembed %} {% hint style="info" %} 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'] ``` {% endhint %} ## ## Default preselected and pinned tokens You can specify the default preselected tokens for each chain by using `defaultSelectedTokenByChains`. {% hint style="info" %} 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. {% endhint %} {% embed url="" %} You can also select default pinned tokens by using `defaultPinnedTokens`. These tokens appear at the top of the token list for easy access. {% embed url="" %} ## 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. {% embed url="" %} ## Manage chains You can select the available chains for the widget as well as the default preselected one. {% hint style="info" %} If not specified, all of the available chains will be active and the default chain will be BNB Chain. {% endhint %} Here we only turn on BNB and polygon and we set polygon as default chain. {% embed url="" %} ## Recap To recap, in this walkthrough you learned how to :point\_down: * 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.:point\_down: {% embed url="" %} ## Advanced UI customization Head over to [Advanced UI overrides](/pet-for-developers/whitelabel/page-2.md) to learn how to customize the design further to meet your branding needs. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://pet-poodl.gitbook.io/pet-for-developers/whitelabel/customisation-with-few-clicks.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.