> 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="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--default&viewMode=story>" %}

{% 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="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--primary-color&viewMode=story>" %}

## 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="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--default-slippage&viewMode=story>" %}

## 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="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--add-tokens&viewMode=story>" %}
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="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--default-preselected-tokens&viewMode=story>" %}

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="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--pinned-tokens&viewMode=story>" %}

## 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="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--add-affiliate-fee&viewMode=story>" %}

## 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="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--manage-chains&viewMode=story>" %}

## 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="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--recap&viewMode=story>" %}

## 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.