# 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="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fe7lr4qaSED69XramrWS0%2Fimage.png?alt=media&#x26;token=d1e97bf3-5ac7-4684-a3ae-32116c0ef419" 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="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-ce16df538d179b56583bf5841f1bc60c63ee7837%2Fimage.png?alt=media" 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="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-6239af54ff75c58e8d2084ace7677aa625adfd85%2Fimage.png?alt=media" 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="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-84c2034f0b2f04cd583753bea4be2e43b455bf10%2Fimage.png?alt=media" alt=""><figcaption><p>Click on "View Chatbot"</p></figcaption></figure>

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-5e8c78070273fda8ca13d02903a786b40aa3032d%2Fimage.png?alt=media" 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>


---

# Agent Instructions: 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:

```
GET https://docs.wonderchat.io/setup-guides/styling-your-chatbot/customizing-your-chatbots-style-and-color.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.