Customize Chat Widget Appearance - Full Guide

🎨 Customize Chat Widget Appearance

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


✏️ How to Customize

  1. Click into any AI agent
  2. Navigate to the Appearance Tab
  3. Access a full suite of options to customize every aspect of the chat widget
  4. Live Preview: On the right side, see a real-time preview of your changes.

🖋️ Appearance Options Explained

Font Size

Set the font size for the chat text (in pixels).

Font Family

Choose the font family for the chat text.

Subheading

Add a subheading like "Online" or "Available" for the chat widget.

Chatbot Icon

Displayed in the chat widget header as the chatbot image.
✅ Supported formats: png, jpg, jpeg
✅ Recommended size: 32x32 pixels

Chat Input Placeholder

Set the hint text that appears in the chat input field.

Send Message Button

Upload a custom send button image.
✅ Defaults to the standard button if not uploaded
✅ Supported formats: png, jpg, jpeg
✅ Recommended size: 32x32 pixels

Customize Colors

Adjust the platform's color scheme to match your brand.

Widget Border

Set the border radius of the chat widget (in pixels) for rounded corners.

Widget Background

Choose the background color or style for the widget.

Response Typing Speed

Set the simulated typing speed of the AI bot for a natural feel.

Tagline

Add a tagline to display within the chat widget.

Chat Icon

Upload or select the chat icon that triggers the widget.

AI Agent Status Messages

Enable status messages to show what the AI is doing while processing (e.g., "Thinking...").


Pro Tip: Use the live preview to ensure your design fits perfectly with your website's branding.