> For the complete documentation index, see [llms.txt](https://docs.stammer.ai/stammer.ai-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stammer.ai/stammer.ai-docs/chat-ai-agents/ai-chat-widget/customize-chat-widget-apperance.md).

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