Customize your chatbot's appearance

Customize your chatbot's appearance to match your brand: one-click theme, colors, logo, launcher button, position on the page and displayed name, with a live preview.

A chatbot in your brand colors builds trust: your visitors immediately understand they are talking to your business. You can customize your chatbot's appearance (theme, colors, logo, position, size) in a few clicks, with a live preview.

Where to change the appearance

When creating the chatbot: in step 4 of the wizard, Appearance.

Afterwards, at any time:

Open My Chatbots and click Edit on your chatbot.
Open the Appearance tab.
Make your changes while watching the Live Preview.
Click Save Changes.

Changes apply to your website without touching the install code. Reload your website page to see them.

How the page is organized

The theme, the logo and the position are visible right away. Two folded sections open with one click:

Customize colors: every color, one by one.
Advanced options: the widget size, the button icon, the pulse animation and the upward offset.

The Live Preview, on the right, updates with every change.

The theme

The easiest way is to start from a Theme: ScanChat (default), Light, Dark, Pro blue, Nature green or Coral. One click applies every color of the chatbot at once. You can then fine-tune them one by one.

Colors

To set the colors one by one, unfold Customize colors. Each color is shown as a round swatch: click it to open the color picker, or type its code (for example #7C3AED).

Main colors

Primary color (button, send, visitor messages by default): the chat bubble, the send button and, unless set otherwise, the messages written by the visitor.
Secondary color (bot messages): the background of the chatbot's answers.

The chat window

Window background and Bot messages and input text.
Header Background Color and Header Text Color: the top bar, with the name and logo.
Input field background and Input area border: the area where the visitor types.

Quick reply buttons

Quick reply background and Quick reply border. See Quick replies.

Visitor messages

Visitor message background: left empty ("Auto (primary color)"), it uses the primary color, as before.
Visitor message text: left empty ("Auto (white or dark, based on the background)"), it automatically switches to white or dark to stay readable.

To go back to the automatic color, click the circular arrow on the right of the field.

Use your website's main color as the primary color. If the visitor's messages should stay discreet (for example on a very colorful website), pick a lighter Visitor message background.

The logo

In Chatbot Logo, click Upload logo and choose an image: JPEG, PNG, GIF or WebP, up to 5MB.

The logo is shown in the window header and, when Button icon is set to Chatbot logo, in the chat bubble (see below). To change it, click the cross next to the current logo, then upload the new one.

The logo is shown small and rounded. A simple, readable square image (your symbol rather than your full logo with text) gives the best result.

The launcher button

In the folded Advanced options section, the Launcher button part sets the round bubble that opens the chat.

Button icon: Chat icon or Chatbot logo. Without a logo, the chat icon is shown.
Pulse animation around the closed button: the animated halo that catches the eye. Untick it for a still button.
Pulse animation color: left empty ("Auto (button color)"), the halo uses the button color.
Move up: lifts the button, the teaser bubble and the window by 0 to 200 px, so they don't cover a WhatsApp button or a cookie banner. On iPhone, the home bar space is added automatically.

The teaser bubble (Engagement)

The teaser bubble is no longer set with the appearance: it lives in step 5 of the wizard, Engagement, and in the Engagement tab when you edit your chatbot.

Tick Teaser bubble to show a short message next to the closed button, for example "Have a question? I'll answer right away 👋".

Bubble text: 120 characters max. Leave empty to use the default text, translated into the visitor's language.
Delay before it appears (seconds, 0 to 60): 5 seconds by default.

The bubble is shown only once per visit: it doesn't come back once the visitor has closed it (cross) or opened the chat. Clicking the bubble opens the chat.

From the Growth plan, you can also show a different message depending on the page visited: see Invite your visitors with messages per page.

If the visitor closes the window while an answer is arriving, a red badge with the number of unread messages appears on the button (and "(1)" in front of the tab title). It goes away as soon as the chat is opened again.

Position on the page

In Widget Position, choose Bottom Right or Bottom Left.

Bottom right is the most common spot. Choose bottom left if something else already sits in the right-hand corner of your website (WhatsApp button, cookie banner, "back to top" button…), or keep bottom right and use Move up.

In Advanced options, under Widget Size, choose Small, Medium or Large. The size changes the bubble and the chat window. Medium suits most websites; Small is more discreet, Large is easier to read for long answers.

The displayed name

The name shown in the window header is the Chatbot Name. You can change it in the General tab. Choose a clear name, for example "Solar Plus Assistant" or "Property Advisor".

Check the result

Save your changes.
Open your website in a private browsing window (to avoid the cache).
Check the bubble, open the window and exchange a few messages, on desktop and on mobile.

The teaser bubble is shown only once per visit. To see it again while testing, open a new private browsing tab.

If the old look still shows on a WordPress website, clear your caching plugin's cache.

What's next?

Write your welcome message.
Add quick replies.
Install the chatbot on your website, if you haven't yet.

Previous articleYour chatbot's welcome message and languages Next articleInvite your visitors with messages per page

Can't find your answer? info@scan-chat.ai