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

# Customize Chat Widget Appearance

This allows you to full customize the look, color, appearance and feel of the embeddable chat widget.

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="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FCaQqLsrTyVHNEfK9j5DE%2FScreenshot%202025-07-14%20143611.png?alt=media&amp;token=9ae529a5-10d9-4075-bac9-3b758514e1f8" alt=""><figcaption></figcaption></figure>

### Font Size <a href="#font-size" id="font-size"></a>

Font size for the chat text in pixels.

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FG1uRNN1d7CDpmrDjWASl%2FScreenshot%202025-07-15%20114554.png?alt=media&amp;token=433a99a2-f712-4089-9161-e9e44fb83576" alt="" width="476"><figcaption></figcaption></figure></div>

### Font Family <a href="#font-family" id="font-family"></a>

Font family for the chat text.

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FIUKYTXr6YCtp5sT4MF4P%2FWhatsApp%20Image%202025-07-15%20at%2011.47.24_672242e6.jpg?alt=media&amp;token=cd880578-531d-4d27-9bf0-5115690f6db9" alt="" width="462"><figcaption></figcaption></figure></div>

### Subheading <a href="#subheading" id="subheading"></a>

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

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FlotkIi12v9sZTwliPuVo%2FScreenshot%202025-07-15%20114812.png?alt=media&amp;token=4053c471-7eff-4df9-b79d-1d77ec8ac65d" alt="" width="476"><figcaption></figcaption></figure></div>

### AI Agent Icon <a href="#chatbot-icon" id="chatbot-icon"></a>

Displayed in the chat widget header as the AI Agent image.

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

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FCjvFfVkedRPvQn5C5buO%2FScreenshot%202025-07-14%20143715.png?alt=media&amp;token=17119078-507d-4e7e-a563-33597298686d" alt="" width="317"><figcaption></figcaption></figure></div>

### Chat Input Placeholder <a href="#chat-input-placeholder" id="chat-input-placeholder"></a>

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

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FYDPdtg1ztl4x2sgLlZEI%2FScreenshot%202025-07-15%20114913.png?alt=media&amp;token=2dcced7a-ec31-4d7b-aa43-da500bb42575" alt="" width="473"><figcaption></figcaption></figure></div>

### Send Message Button <a href="#send-message-button" id="send-message-button"></a>

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.

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FaxDshNDIgeYrUsbKVvKi%2FScreenshot%202025-07-15%20114958.png?alt=media&amp;token=b03c136b-9e2e-4156-934d-87b5d48cb3de" alt="" width="478"><figcaption></figcaption></figure></div>

### Customize Colors <a href="#customize-colors" id="customize-colors"></a>

This section allows you to customize all the different colors of the platform.

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FGX9JB5BiB4bG8048qywQ%2FScreenshot%202025-07-15%20115047.png?alt=media&amp;token=19d9d480-429e-4b97-9cfd-fe104add3cbd" alt="" width="563"><figcaption></figcaption></figure></div>

### Widget Boarder <a href="#widget-boarder" id="widget-boarder"></a>

Border radius of the widget in pixels.

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FCknCVPxT3j1oYZG7XNIm%2FScreenshot%202025-07-15%20115047.png?alt=media&amp;token=d211c488-d262-4870-abf7-7728c1b4ebe6" alt="" width="563"><figcaption></figcaption></figure></div>

### Widget Background <a href="#widget-background" id="widget-background"></a>

Widget Background Preference

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FDRoi4YyMkCsZ9wnR238S%2FScreenshot%202025-07-15%20115047.png?alt=media&amp;token=3fa588c6-6d78-4e57-89bb-26c000d2ad39" alt="" width="563"><figcaption></figcaption></figure></div>

### Size of the Chat Widget <a href="#size-of-the-chat-widget" id="size-of-the-chat-widget"></a>

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

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FsFkDoBrVMxFAEYcZtr9f%2FScreenshot%202025-07-14%20143839.png?alt=media&amp;token=d1497f6a-a7f0-432b-bf4c-fb9243452baf" alt="" width="563"><figcaption></figcaption></figure></div>

### Tagline <a href="#tagline" id="tagline"></a>

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FJU8Ne1kbahDC5AxlK6vL%2FScreenshot%202025-07-14%20144015.png?alt=media&amp;token=88136eac-ea92-4142-8d0e-dbba03c312bc" alt="" width="563"><figcaption></figcaption></figure></div>

### Chat Bubble Icon <a href="#chat-bubble-icon" id="chat-bubble-icon"></a>

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

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FwQJwUDOM7NpbfAmsau5M%2FScreenshot%202025-07-15%20115401.png?alt=media&amp;token=47f9a8a0-a5e4-4b79-a4fb-000801536fa0" alt="" width="464"><figcaption></figcaption></figure></div>

### AI Agent Status Messages <a href="#ai-agent-status-messages" id="ai-agent-status-messages"></a>

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.

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2F5Bw81CqiP9Vbe02llqCt%2FScreenshot%202025-07-14%20144115.png?alt=media&amp;token=4c0041fc-9de9-43c5-be4e-881e3f53771f" alt="" width="375"><figcaption></figcaption></figure></div>

### Chat Avatar Icon <a href="#chat-avatar-icon" id="chat-avatar-icon"></a>

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

<div align="left"><figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2FgyUQLyOsUPuEtBPee72V%2FScreenshot%202025-07-14%20144207.png?alt=media&amp;token=f19e960b-481b-4570-962b-4a7cb7e21d33" alt="" width="196"><figcaption></figcaption></figure> <figure><img src="https://2664211534-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3ZBK3xWNwSpAJ2dDxWAH%2Fuploads%2Fmm2UrTq0VY6K2J9J4Oto%2FScreenshot%202025-07-14%20144341.png?alt=media&amp;token=81644934-ec22-41d6-b656-726fe9bbf89c" alt=""><figcaption></figcaption></figure></div>

[<br>](https://docs.stammer.ai/stammer.ai-docs/ai-features/ai-chat-widget)
