Chat Widget Design: How to Make It Help Visitors Instead of Interrupting Them

A chat widget lives on top of your website, in a prime position and in front of your visitors' attention. Done well it feels like a helpful assistant waiting quietly in the corner. Done badly it covers the button they wanted, pops up while they are reading and shouts in colours that clash with everything else. Good widget design is mostly restraint: show up when useful, look like part of your brand, stay out of the way on small screens and load without slowing your page. This guide covers placement, size, colour, greeting, mobile behaviour, motion, accessibility and performance, and gives you a checklist to review your own widget.

Principles

• Help first, presence second. The widget exists to answer questions and book, not to be seen.
• Match your brand. Colours, name and tone should feel like yours.
• Stay out of the way. Never cover key buttons, forms or cookie choices.
• Be honest. Say it is an AI and offer a person.
• Be fast and light. It must not slow your pages.
• Be usable by everyone. Keyboard, screen reader and touch.

Placement

Test the position on your real pages, on a phone. If the widget hides a call-to-action, move it or adjust its offset.

Size and shape

• A launcher button large enough to tap comfortably, but not so large it dominates.
• A chat window that fits a phone screen and does not cover the entire page unless the visitor opened it.
• Readable text size and generous line spacing inside the chat.
• A clear close button that is easy to find and reach.

On desktop, a window of about 350 to 400 pixels wide works for most sites. On mobile, use most of the screen but always keep a visible way out.

Colour and typography

• Use your brand colour for the launcher and sender bubbles, but check contrast: text must be readable on every background.
• Make visitor and assistant messages visually distinct, and label them in text, not colour alone.
• Match fonts where you can, and keep sizes readable.
• Avoid colours that blend into your page background.

Crescelo's widget settings let you choose colours, the welcome message and booking options, and higher plans allow white-label branding. See the website widget feature.

The greeting and the launcher label

The first thing a visitor sees is the launcher and, perhaps, a greeting. A launcher with a short label such as 'Ask or book' explains itself better than an icon alone. The greeting should say what the assistant can do and invite a first step. See chatbot welcome message copywriting and micro-copy for quick replies.

Mobile behaviour

• Keep the launcher small until opened.
• When open, use a layout that respects the on-screen keyboard: the input must stay visible when typing.
• Make sure the page behind cannot scroll unexpectedly while the chat is open.
• Give the close control enough size for thumbs.
• Never let the launcher cover the phone or booking button.

Test on at least one small phone and one large one, in both orientations. See chat on a phone: what to check before you go live.

Motion and sound

• Use gentle animation, if any, and respect reduced-motion settings.
• Do not auto-play sound.
• Avoid bouncing, shaking or flashing launchers.
• Do not open the chat automatically, which steals focus and covers content.

If you want a nudge, a small bubble shown once after a delay is enough. See reducing bounce with proactive chat.

Accesibilidad

A widget that only works with a mouse and good eyesight excludes people. Make sure the launcher has an accessible name, the chat can be operated with a keyboard, new messages are announced to screen readers, contrast is sufficient and focus is visible. See chatbot accessibility and WCAG.

Performance and page speed

• The widget script should load after your main content and not block rendering.
• Check page speed before and after installing.
• Avoid loading it on pages where it is not needed.
• Keep images and fonts inside the widget light.

See performance of embedded chat widgets and why widgets use Shadow DOM to keep styles from clashing.

Trust elements

• Show that it is an AI assistant, in the greeting and header.
• Link to your privacy policy near the input.
• Offer a visible route to a person.
• Show your business name and logo.
• Avoid fake typing indicators that imply a human.

Design review checklist

How to test with real visitors

1. Watch three people use your site on their phones with the chat, without helping them.
2. Note where they hesitate, mis-tap or ignore it.
3. Change one thing at a time: position, label or greeting.
4. Compare chat open rate and bookings after a few weeks.
5. Read conversations for signs of confusion.

Worked example: fixing a widget that hurt conversion

A salon's widget sat bottom right on every page, opened automatically after five seconds and used a pale pink that matched the brand but was hard to read. On mobile it covered the booking button on the services page. Reviewing session recordings, the owner saw visitors close the chat immediately and leave. She made five changes: the widget stopped auto-opening, a small labelled launcher replaced the icon, the colour was darkened for contrast, the launcher moved higher on the services page and the greeting became specific: 'Ask about prices or book a time.' Chat opens rose, and bookings from the services page increased over the following month. None of the changes required a designer; they required looking at the widget the way a visitor sees it.

Design for the first ten seconds

Most decisions to use or ignore the widget happen in the first ten seconds. In that time the visitor needs to notice it, understand what it offers and feel it is safe to click. A clear label, a specific greeting and an honest AI label do that. Everything else, animations, avatars, clever effects, can wait. If you have to choose between polish and clarity, choose clarity.

Design decisions to write down

• Where the launcher sits on desktop and on mobile, and on which pages it is hidden.
• The launcher label and greeting text.
• Brand colours used and their contrast ratios.
• What happens when the visitor closes the chat, and when it reappears.
• Who owns changes to the widget, and how they are tested.
• How to switch it off quickly if something goes wrong.

A one-page design note stops the widget drifting into a mess as several people tweak it over time.

Keeping the widget healthy over time

Widgets drift. A new promotion adds a banner that collides with the launcher, a theme update changes a colour, a holiday changes your hours and the greeting is now wrong. Add the widget to your regular website checks: once a month, open your top five pages on a phone and a laptop, confirm the launcher is visible and not covering anything, read the greeting for accuracy and send a test message. It takes five minutes and catches most problems before visitors do.

Frequently asked questions

See the website widget feature, try a chat in the playground and start a free trial.

Further reading

• web.dev: Core Web Vitals: How Google measures page speed and stability.
• Google Search Central: creating helpful, people-first content: What Google looks for in useful pages.