What it is
The Design tab on the Chatbot page changes how your website chat looks and behaves: its colours, the chat button, the top bar, the messages and a few helpful extras such as quick replies and a short form before the chat. The Live preview beside it redraws on every change, so you see the result before visitors do.
A chat you never change here keeps its original look.
How to use it
- Open Chatbot, select your chatbot under Saved widgets, then select the Design tab.
- Choose a Theme: Light, Dark or Auto (follows the visitor's device).
- On Colours, pick a preset (your Emails → Brand colours come first when you saved a brand), or set each part: Main colour, Header, Header text, Customer bubble, Aria bubble, Chat background, Buttons and their text. Use the colour picker or type a code such as #1F4E9D. Leave a colour empty to keep it Automatic.
- On Launcher, set the button's label, side, distance from the corner, size, shape (pill or circle) and icon (Aria's picture, your logo or a chat bubble).
- On Header, choose Aria's name or your dealership name as the title, add a subtitle such as "Usually replies in a minute", and show or hide the avatar.
- On Messages, add up to 4 Quick replies (for example "Book a test drive", "See inventory", "Service appointment"), and choose the bubble roundness, font and spacing.
- On Behaviour, choose whether the chat opens by itself after some seconds, shows on phones, plays a sound for new replies, picks the visitor's language, asks for details first, and shows an office hours message.
- Select Save configuration, then Publish this version to put the new look on your website.
Reset to default brings back the original look (save to keep it).
What the data means
Automatic colours follow the main colour. Text colours are checked against their background: below a contrast of 4.5 to 1 the panel says "Hard to read" and offers Use readable text, and the chat itself always switches to readable white or dark text.
Quick replies show under the welcome message until the visitor sends something. A tap sends those words as the visitor's first message.
Ask for details before the chat shows a short form (name, phone, email; each optional or required). What the visitor types goes to Aria as their first message, so the contact is saved like any chat and counts as a lead in Analytics.
Office hours message shows at the top of the chat while you're closed, in the time zone you chose. Aria still answers at any time.
Open the chat by itself opens it once per visit, only if the visitor hasn't already opened or closed it (off by default). Language: Auto uses the visitor's browser language when it is one of your Customer languages on Setup; otherwise the default language.
Possible issues and fixes
A colour says "Hard to read"
Symptom: A warning under a text colour, such as "Hard to read: 2.1 to 1 (it needs 4.5 to 1)."
Why: Visitors would struggle to read that text on its background.
Fix: Select Use readable text, or choose a darker or lighter colour. You can also save as it is: the chat uses readable text there instead.
How to check: The summary line says "Every text colour passes the WCAG AA contrast check (4.5 to 1)."
Save is greyed out on the Design tab
Symptom: Save configuration can't be selected and a yellow note shows at the top of Design.
Why: Something can't be saved, for example a colour code that isn't # and six letters or numbers, a quick reply longer than 40 characters, two quick replies that are the same, or characters such as < > { }.
Fix: Correct the field the note names.
How to check: The note disappears and Save configuration works.
The launcher shows Aria instead of my logo
Symptom: You chose Your logo but the button shows Aria's picture.
Why: The chat can only show your logo when Show the business logo is on (Colours → Main colour presets, dealership colour and logo) and a logo is saved in Settings.
Fix: Turn on Show the business logo, then save and publish.
How to check: The preview's button shows your logo.
