Customize the widget appearance
Make the chat widget feel at home on your website by choosing readable colors, message bubble styles, and corner shapes.
On this page
Your chat widget is part of your website experience, so it should feel familiar as soon as a visitor opens it. You don't need to redesign the whole widget to achieve that. A small set of well-chosen colors and a suitable corner shape is usually enough to make it feel connected to your brand.
The Appearance page includes a Live preview that changes as you work. Nothing is saved until you select Save changes, which means you can try different combinations before deciding what looks right.
In this article, you'll learn:
- How to open the Appearance settings
- How to choose colors that work together
- How to adjust the shape of message bubbles
- How to preview and save your changes
- How Reset and Restore to default work
- How to check the widget on your website
Open the Appearance settings#
In Zeltino, open Settings and find the Chat widget section. Select Appearance to open all visitor-facing design settings.
The page is split into settings on the left and the Live preview on the right. On a smaller screen, the preview may appear below the settings. It updates before you save, so you can use it as a working area while you experiment.
Before changing anything, take a moment to look at the current widget. This gives you a useful reference point and makes it easier to tell whether the new version is clearer.
Choose colors that work together#
Open Colors and shape. You will see five color settings, each responsible for a different part of the conversation.
- Chat color sets the widget's main accent color. A primary brand color is usually a good place to start.
- Background sets the main chat surface behind the conversation.
- Agent bubble controls the background of messages sent by the assistant.
- Visitor bubble controls the background of messages sent by the visitor.
- Text color sets the main text color used across the chat.
Rather than changing all five colors at once, start with Background and Text color. These two choices establish the overall readability of the widget. Once they feel comfortable, choose the two bubble colors so visitors can quickly distinguish their messages from the assistant's replies.
Finally, choose the Chat color that ties the experience back to your website. It can match your primary button or link color, but it does not need to be the brightest color in your brand palette.
As you update the fields, look at the complete preview rather than judging each color on its own. A color that works well for one bubble may feel too strong when it appears throughout a longer conversation.
Adjust the message bubble shape#
The Corner radius controls how rounded the message bubbles appear. The value is measured in pixels.
A smaller value creates straighter, more compact corners. A larger value creates a softer, more rounded style. If your website already uses rounded cards and buttons, a similar radius can help the widget feel consistent with the rest of the page.
Enter a value, then look at both the assistant and visitor bubbles in the preview. There is no single correct radius—the useful question is whether it fits your website without making longer messages harder to scan.
Preview and save your changes#
The Live preview shows a short conversation with both visitor and assistant messages. Use it to compare the background, text, bubble colors, and corner radius as one design.
Before saving, check a few practical details:
- Make sure the main text remains clear against the background.
- Compare the assistant and visitor bubbles so they are easy to tell apart.
- Check that buttons and interactive elements still stand out from ordinary text.
- Review the widget at the narrowest width available to you.
While you are editing, the page shows Changes not saved. When you are happy with the preview, select Save changes. The status changes to All changes saved after Zeltino stores the new appearance.
Reload the page once to confirm that your chosen values remain in place.
Reset or restore the appearance#
It is safe to explore different combinations because you have two ways to go back:
- Select Reset when you want to discard every unsaved change on the Appearance page and return to the last version you saved.
- Select Restore to default when you want to load Zeltino's reference appearance into the editor.
Restoring defaults does not save them immediately. Review the complete Appearance page first, because the restored draft can affect more than the color fields. Select Save changes only if you want those restored values to become the saved configuration. If you change your mind before saving, use Reset to return to your previous version.
Check the widget on your website#
The preview is the best place to compare options quickly, but your website is where the final design needs to work. Its background, spacing, and mobile layout can change how the same widget feels.
Open the installed widget on your website and check it at both desktop and mobile widths. Send a short message and a longer one, then review the launcher, message bubbles, links, and controls against the real page behind them.
If the widget feels too prominent, soften the Chat color or bubble colors. If it blends into the page too much, strengthen the contrast around the main interactive elements. You can return to Appearance, make another adjustment, and save again whenever you need to.
Colors and shape are only one part of the visitor experience. Next, use Configure assistant identity and visitor controls to set the name, subtitle, contact details, privacy message, and controls that appear inside the widget.