Widget appearance

This is where you customise your assistant and how it looks on your website: its name and messages, the icon, your brand colours, the window size and the text your visitors see. Everything updates on your widget without touching a line of code.

Icons

Assistant icon

This is the image shown in the chat header and as the bot's avatar. Recommendations:

• Square 1:1 format, minimum 256×256 px (512×512 is ideal).
• Transparent PNG, or one with your background colour.
• Maximum 2 MB.

If you don't upload an icon, a generic robot is shown in your brand colour.

Launcher icon

The launcher is the floating circular button visitors see when the chat is closed. By default it uses the same icon as the assistant, but you can set a different one.

• 512 KB image limit.
• Launcher text: up to 18 characters.
• The launcher colour adapts automatically to your brand colour.

Widget mode

The mode is chosen here, in Appearance, and nowhere else: the live preview shows you how it looks (on the right on wide screens, at the end of the form on narrow ones).

Once you save, the code in Website → Install on your website switches to the mode you chose automatically: above the code you'll see, for example, "Mode: Popup · change it in Appearance".

If the code is already on your site, the change doesn't work the same way in both directions:

• From Popup to Inline: the change shows on your site straight away, without touching anything, at the bottom of the page (where the code is pasted, before </body>). Copy the new code and paste it, inside a block of its own (an HTML or Embed block in your site editor, or a <div>), at the spot on the page where you want the assistant; it appears inside that block.
• From Inline to Popup: an Inline code already on your site stays inline until you replace it. Copy it again and replace the old one.

You'll find the details in install the widget on your website.

Position and size

• Launcher position (Popup only): bottom-right (default) or bottom-left.
• Window size:

With Inline, only the height counts: the window takes the full width of the block where you paste the code.

On mobile, the window never spills off the screen: if the size you chose doesn't fit, it shrinks to fit.

Colours

• Primary colour — your brand colour. Applied to the launcher, the header, buttons and the visitor's chat bubbles.
• Bot bubble colour — the background of the assistant's messages.

Text adapts automatically to light or dark depending on the background colour, so you don't have to worry about contrast.

Text

• Assistant name — shown in the header of the chat window.
• Welcome message — the first line a visitor reads when they open the chat.
• Fallback message — what it replies when it can't find an answer in its knowledge. Tips for writing it in Behaviour & Tone.
• Header subtitle — for example, "Usually replies in 2 minutes".
• Input placeholder — the grey text inside the message box.

Extra options

• Show bot avatar — turn the avatar next to messages on or off.
• Auto-open — opens the chat automatically. Configured separately for desktop and mobile. Use it carefully on mobile: it can feel intrusive.
• Suggested questions — up to 4 starter buttons to guide the visitor.

The address that email alerts go to (form submissions, bookings, group requests) isn't set here: you set it in Forms → Notification emails. More on this in forms.

Preview

• In Appearance, on every plan, you get a live preview that changes as you edit.
• On any plan, the "Try it" button in the Overview opens your assistant in a new tab so you can see it exactly as a visitor will.

Want it pixel-perfect?

If you're unsure about icons, colours or sizing, open the ChatME Assistant in the dashboard and it'll guide you on the spot. And if you'd rather review it together, book a demo.