Applicable for: Admin Users
Personalizing your chat widget helps create a seamless experience for your website visitors. By adjusting the action and background colors, uploading a company logo, and picking a shape style, you can ensure the AI assistant aligns perfectly with your brand's look and feel. All appearance modifications require admin role access; non-admin users can view these settings but cannot modify them.
Customizing action and background colors
The Display Settings page allows you to set two primary color settings that dictate your widget's visual identity. The Action color acts as the primary accent, affecting interactive elements like the chat bubble button, send message button, conversation starter borders, and quick reply buttons. The default action color is a medium blue (#3a87f0). The Background color changes the background of the entire chat window, including the header, message, and input areas, and defaults to white (#ffffff).
To change either of these colors:
Navigate to the Display Settings page.
Click the colored square swatch next to "Action color" or "Background color" to open a visual color picker with a gradient palette and hue slider.
Alternatively, type a hex color code (prefixed with
#) directly into the text input field next to the swatch.
You do not need to worry about unreadable text, as the widget automatically calculates contrast-appropriate text colors. If you set a dark background color, text and icons automatically switch to light colors for readability, and vice versa. Changes are reflected immediately in the live preview panel on the right side of the page, but you must click "Publish changes" to deploy them to your live site. You can also click "Discard" to revert any unsaved adjustments back to their last published state.
Uploading your company logo
You can upload your company logo to appear in multiple prominent places within the chat widget. The logo will display in the header bar next to the AI assistant name, next to each assistant message in the chat, in the greeting message preview popup, and in the conversation starters preview.
To upload a custom logo:
On the Display Settings page, locate the "Logo" section.
Click the "Upload" button.
Select an image file from your computer.
Please note the following file requirements:
Supported file formats: Your file must be a JPG, JPEG, or PNG.
Maximum file size: The image cannot exceed 4.5 MB.
Recommended dimensions: Because the logo displays at small sizes (around 20-32 pixels), a square 120x120 pixel image works best.
If no logo is uploaded, the widget safely relies on a default chat bubble icon that automatically adjusts its color for proper contrast based on your background settings.
Selecting a widget shape
The "Shape" setting lets you define the border radius (corner rounding) applied consistently across your widget's elements. This applies to the top corners of the chat window on desktop displays, the message input text field, and various conversational buttons.
You can choose from three options by clicking the corresponding visual swatch on the Display Settings page:
Square: Provides a border radius of 0 pixels, resulting in sharp right angles.
Rounded Square: Provides a border radius of 8 pixels for subtle corner rounding. This is the default shape.
Circle: Provides a border radius of 20 pixels, giving elements a heavily rounded, pill-like appearance.
Selecting a shape automatically sets the associated border radius; there is no manual slider to set a custom radius. Additionally, the circular floating chat bubble button that visitors click to open the widget is not affected by this setting and will always remain fully round.
Adjusting the font size
The bot configuration uses built-in default font sizes for text elements.
By default, the widget uses the following sizes:
Chat message text and input field text: 14px.
Conversation starter and quick reply text: 14px.
Header/assistant name: 16px (bold).
Disclaimer and footer watermark text: 10px.
There is no way to modify text sizes.
Benefits
Create a cohesive brand experience by matching the chatbot's colors, shape, and logo directly to your website.
Ensure text always remains readable with built-in color contrast logic that adjusts text and icons automatically.
Preview all visual changes in real-time before pushing them to your live website.