# Customize Chat Widget Apperance

To customize the appearance of your AI agent's chat widget, click into any AI agent and then navigate to the Appearance tab. Here you will see a whole suite of options to customize pretty much every aspect of the chat widget. 

On the right hand side there is a live preview of what your changes will look like. 

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

## Font Size

Font size for the chat text in pixels.

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

## Font Family

Font family for the chat text.

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

## Subheading

Subheading for the chat widget, such as 'Online', 'Available', etc.

<figure><img src="/files/1xoqdaWz9DgRkWrYa7SO" alt=""><figcaption></figcaption></figure>

## Chatbot Icon

Displayed in the chat widget header as the chatbot image.

Supported file extensions are png, jpg, jpeg and Ideal logo size is 32x32 pixels.

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

## Chat Input Placeholder

Enter the text that will be displayed as a hint in the chat input field.

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

## Send Message Button

Upload a custom send message button. Defaults to a standard button if not provided. Supported file extensions are png, jpg, jpeg and Ideal logo size is 32x32 pixels.

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

## Customize Colors

This section allows you to customize all the different colors of the platform.&#x20;

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

## Widget Boarder

Border radius of the widget in pixels.

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

## Widget Background

Widget Background Preference

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

## Size of the Chat Widget

Adjust the size of the chat widget to me small, medium or large.

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

## Tagline

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

## Chat Bubble Icon

This is the icon that appears on your site before a user clicks to open the chat.

<figure><img src="/files/4by4DL2ysbQAEjIKe6KR" alt=""><figcaption></figcaption></figure>

## AI Agent Status Messages

Enable to show status messages from the AI agent in the chat widget which are displayed to the user while the AI is processing a response.

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

## Chat Avatar Icon

This image appears inside the chat window next to your bot’s messages.

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

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


---

# 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.stammer.ai/stammer.ai-docs/chat-ai-agents/ai-chat-widget/customize-chat-widget-apperance.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.