Customize how your chatbot looks

Match the chat window to your brand with fonts, colors, avatars, and custom CSS.

When to use this. The chat window should look like part of your website or brand instead of a generic widget.

What you’ll need. Your brand colors, a logo or avatar image, and a chatbot to style.

Open the Theme tab
Choose Theme in the editor header. A live preview appears beside the Customize the theme panel, which has Global, Chat, Custom CSS, and Templates sections.
Set the global look
Under Global, choose the font, including Google fonts or your own, and the background color or image. You can also enable a progress bar and set its placement, thickness, and position when embedded. The Show ChatBot brand switch controls the Chatbot branding.
Style the conversation
Under Chat, change the bot avatar and user avatar, the bot bubbles and user bubbles, the buttons and inputs, and the corner roundness.
Go further with Custom CSS
Use Custom CSS for details the panels do not cover, such as a more rounded button. Right-click the chat in the preview and inspect an element to find what to target.
Save and reuse a theme
Under Templates, browse the Gallery, or use Save current theme to keep your styling in My templates so you can apply it to other chatbots.

How to know it worked

The Test preview shows your fonts, colors, and avatar, and looks right on both desktop and mobile.