> ## Documentation Index
> Fetch the complete documentation index at: https://manual.botric.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize Widget

> Design and personalize your chat widget to match your brand's look and feel.

The widget customizer lets you control how your Chat Agent appears on your website. Adjust colors, text, icons, and layout to create a seamless brand experience for your visitors.

## Accessing the Customizer

1. Go to **Engagement > Chat Agent**.
2. Click on the bot you want to customize.
3. Navigate to the **Widget** or **Customize** tab.

## Design Options

### Colors

Customize the color scheme of your chat widget to match your brand:

| Setting               | Description                                           |
| --------------------- | ----------------------------------------------------- |
| **Primary Color**     | The main accent color used for buttons and highlights |
| **Header Color**      | Background color of the widget header                 |
| **Body Color**        | Background color of the chat conversation area        |
| **User Bubble Color** | Background color of messages sent by the visitor      |
| **Bot Bubble Color**  | Background color of messages from the bot             |
| **Input Color**       | Background color of the message input field           |
| **Send Button Color** | Color of the send message button                      |

### Theme

Choose between **Light** and **Dark** theme modes. The theme controls the default color palette and contrast settings for the widget.

* **Light** — White/light backgrounds with dark text. Best for light-colored websites.
* **Dark** — Dark backgrounds with light text. Best for dark-themed websites.

<Tip>
  Custom colors override theme defaults. If you set specific colors, they take priority regardless of the selected theme.
</Tip>

### Widget Icon

Upload a custom icon or avatar that appears on the chat bubble and in the widget header. This is typically your logo or a brand mascot.

* Recommended size: 64×64 pixels or larger
* Supported formats: PNG, JPG, SVG

### Text Content

Customize the text displayed in the widget:

* **Welcome Message** — The first message visitors see when they open the chat. Set during [bot creation](/engagement/chat-agent/create-bot) and editable here.
* **Placeholder Text** — The hint text inside the message input field (e.g., "Type your message...").
* **Header Title** — The name displayed at the top of the widget.

## Live Preview

As you make changes, a live preview of the widget updates in real time on the right side of the customizer. This lets you see exactly how your widget will appear to visitors before deploying it.

## Saving Changes

Click **Save** to apply your customizations. Changes take effect immediately on your website if the widget is already deployed.

<Note>
  If you haven't deployed the widget yet, your customizations are saved and will be applied when you add the embed code to your site.
</Note>

## Next Steps

<CardGroup cols={2}>
  <Card title="Deploy Your Bot" icon="code" href="/engagement/chat-agent/deploy">
    Add the chat widget to your website.
  </Card>

  <Card title="Create a Bot" icon="plus" href="/engagement/chat-agent/create-bot">
    Set up a new chat agent.
  </Card>
</CardGroup>