> For the complete documentation index, see [llms.txt](https://docs.wonderchat.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wonderchat.io/setup-guides/styling-your-chatbot/customizing-your-chatbots-style-and-color.md).

# Customizing Your Chatbot's Style and Color

Chatbots are essential for enhancing customer engagement and service. But beyond functionality, it's important that your chatbot aligns with your brand visually. In this guide, we'll show you how to style your chatbot and select a color theme that complements your branding.

***

## Step 1: Pick a Profile Picture

The first step to styling your chatbot would be to pick a suitable profile photo. To do so, you can go to **Chatbots > Actions** (⋮) icon > **Edit Chatbot**.

<figure><img src="/files/eZlCDLkfnc4TQtgcYIUd" alt=""><figcaption></figcaption></figure>

In the Chatbot Settings page, under the **Basic Details** tab > click on **Edit Logo**

{% hint style="info" %}
We recommend that you upload a photo with square dimensions, in the likes of 64px by 64px so that the photo will fit well within the profile picture frame.
{% endhint %}

<figure><img src="/files/0f75rpdfyiIcgaQUMc1L" alt=""><figcaption><p>Click '<strong>Save'</strong> to apply your changes.</p></figcaption></figure>

## Step 2: Change Your Chat Widget Color

Now that you have selected the profile photo of your Chat Widget, you can now select a color for it.

Under the **Chatbot Colour** section, click on the **✎ Edit** to open the color picker. Select a new color for your chatbot by:

* **Option 1:** Picking from the color swatch, or
* **Option 2:** Input your own custom hex code.

<figure><img src="/files/PqZxg8FfTDd5TbnonLmf" alt=""><figcaption><p>Choose your chat widget color</p></figcaption></figure>

Once you decide on your profile picture and chat widget color, you can click on **'Save'** to apply your changes.

## Step 3: View your New Changes

To view the new customization changes of your chatbot, go to **Dashboard > Actions** (⋮) icon > **View Chatbot**

<figure><img src="/files/vE1K3uHFISGioThInhrZ" alt=""><figcaption><p>Click on "View Chatbot"</p></figcaption></figure>

<figure><img src="/files/cMFByvEaaP1E4VWLHth0" alt=""><figcaption><p>View the changes on your New Icon + Color Theme</p></figcaption></figure>

***

If you have any more questions, feel free to reach out to us at <mark style="color:purple;">**<support@wonderchat.io>**</mark>