A chat widget is a small piece of your website that visitors talk to, and if it looks or sounds foreign, it undermines the rest of the site. A bright default blue on a soft green brand, a generic 'AI Assistant' name and a stiff greeting all signal that this is somebody else's tool bolted on. The good news is that the elements which make a widget feel like yours are few and quick to set: the colour, the name, the welcome message, the starter questions and the position on the page. Get those right and the widget looks like part of the business. This guide covers each in practice: how to choose and test a colour so it looks right and remains readable, how to name the assistant honestly, how to write a welcome message and starter questions that invite a first message, where to put the launcher, what to check on mobile and what white-label options are for. In Crescelo you set these in the Widget and Styling area of the dashboard: assistant name, brand colour, position, welcome message and suggested starter questions, with branding options for eligible plans.
What you can change
| Setting | What it affects | Tip |
|---|---|---|
| Assistant name | The title visitors see | Honest and friendly; see below |
| Brand colour | Launcher, header and buttons | Match your brand, check contrast |
| Position | Which corner the launcher sits in | Avoid covering important buttons |
| Welcome message | The first thing the visitor reads | Specific and short |
| Starter questions | Tappable suggestions | Your top three questions |
| Branding line and link | The 'powered by' area on plans that allow changing it | Use your own brand where available |
Choose the colour carefully
- Start from your brand's main colour, the one used for your primary buttons.
- Check that white text is readable on it. Text and background need enough contrast; the common accessibility target is a ratio of at least 4.5 to 1 for normal text.
- If your colour is pale or bright yellow, choose a darker shade for the widget so text stays legible.
- Look at the widget on your real pages, on a phone and in bright light.
- Do not use colour alone to convey meaning; keep clear labels.
| Brand colour | Risk | Fix |
|---|---|---|
| Pale pastel | White text is hard to read | Use a darker tone of the same hue |
| Bright yellow or lime | Very low contrast with white | Use a dark colour for the header with light text, or pick a deeper shade |
| Very dark or black | Fine for contrast, may look heavy | Check it against your page background |
| Two-tone brand | Which to pick? | Use the colour that your main buttons use |
A free contrast checker will tell you the ratio for any pair of colours. Two minutes of checking prevents the most common accessibility failure in widgets; see accessibility and WCAG for chatbots.
Name the assistant honestly
- Visitors should know they are talking to an AI. A name such as 'Riverside Assistant' or 'Ask Riverside' is friendly and honest.
- Avoid human names and photos that suggest a real person is typing, unless a person actually takes over; some places require disclosure that a chatbot is automated.
- Keep it short so it fits on a phone.
- Use your business's name so visitors recognise it.
If a human takes over the chat, say so clearly in the conversation. See when and how to hand over.
Write a welcome message that starts conversations
| Weak | Better |
|---|---|
| Hi! How can I help you today? | Hi, I am Riverside's assistant. Ask me about prices, opening hours or booking a visit. |
| Welcome to our website. | Hello! Looking for a time this week? I can show what is free. |
| Chat with us! | Questions about your first appointment? Ask away. |
The best welcome messages name two or three things the assistant can do, in the words customers use. Keep it to one or two sentences. See writing chat welcome messages.
Starter questions are your most useful pixels
- Use the three or four questions customers ask most; your unanswered and popular question lists will tell you.
- Word them as customers would: 'How much is a haircut?' rather than 'Pricing information'.
- Include one action, such as 'Book an appointment'.
- Keep each short enough to fit on one line on a phone.
- Review them each quarter as demand changes.
Starter questions lower the effort of the first message. On a phone, tapping is far easier than typing, so they often raise the share of visitors who start a conversation.
Choose the position
| Position | Considerations |
|---|---|
| Bottom right | The convention; visitors expect it |
| Bottom left | Useful if the right side has a cookie banner, a back-to-top button or another widget |
| Elsewhere | Rarely a good idea |
Check pages with sticky footers, cookie banners and forms so the launcher never covers a submit button. On mobile, the launcher should not overlap your call or booking buttons.
White-label and branding options
Plans that allow it let you replace the platform's branding line with your own text and link, which matters for agencies and businesses that want a fully branded experience. Check the pricing page for which plans include this. If you resell or manage assistants for clients, consistent branding across their sites is part of the service; see governing chat across many locations.
Check it on real devices
| Check | What good looks like |
|---|---|
| Phone portrait and landscape | Launcher visible, chat readable, keyboard does not hide the input |
| Desktop at normal and narrow widths | No overlap with other elements |
| Dark mode on your site | Colours still readable |
| Slow connection | Page content loads first |
| Keyboard only | Launcher reachable, chat operable |
Keep the voice consistent
The look is only half of the brand; the assistant's replies must sound like you too. Set the tone in the Behavior and Rules area, and see making the assistant sound like your business.
Common mistakes
- Leaving the default name and greeting.
- Choosing a colour without checking contrast.
- Human names and photos that mislead.
- A welcome message that offers nothing specific.
- Covering important buttons.
- Not checking mobile.
A quick branding checklist
- Brand colour set and checked for contrast.
- Assistant name short, honest and recognisable.
- Welcome message names two or three things the assistant can do.
- Three or four starter questions, worded as customers ask them.
- Launcher position clear of banners and buttons.
- Tested on a phone and with the keyboard.
Run through the list whenever you redesign your site, since a new theme can change what the widget sits on top of.
Frequently asked questions
What can I customise in the Crescelo widget?
The assistant name, brand colour, position, welcome message and starter questions, plus branding options on eligible plans.
How do I choose a colour that is readable?
Start from your brand colour, check that text has at least a 4.5 to 1 contrast ratio and darken the shade if needed.
Should I give the assistant a human name?
Prefer an honest name that shows it is an assistant. Avoid suggesting a person is typing unless one is.
Where should the widget sit?
Bottom right by convention, or bottom left if something else occupies that corner. Make sure it never covers key buttons.
What makes a good welcome message?
One or two sentences naming the things the assistant can help with, in customers' words.
What is white-label?
Replacing the platform's branding with your own on plans that allow it.
Preview the experience in the playground, see the website widget feature and check pricing for branding options.
Further reading
- W3C: Web Content Accessibility Guidelines (WCAG): The accessibility standard for websites.
- Google Search Central: creating helpful, people-first content: What Google looks for in useful pages.
RESPONDE A CADA VISITANTE. RESERVA CITA A QUIEN ESTÁ LISTO.
Instala Crescelo en tu sitio web en 15 minutos
Entrena a tu asistente con tus listas de precios, documentos y condiciones de servicio. Activa respuestas basadas en tus fuentes las 24 horas y reservas de citas en el chat sin solapamientos.