Chat Widget: UI Design, Examples and What Works

A chat widget is the small chat bubble in the corner of a website. Click it and a window opens where you can type a question and get a reply without leaving the page. Behind it might be a person, a set of scripted replies, or an AI agent that answers from the site’s own content.

Most of the difference between a widget people use and one they ignore is UI design: where it sits, what it says first, and whether it gets out of the way. This guide covers those choices with examples you can copy. If you want the product itself, our website chat widget page shows what ZynfoAI’s version does.

The parts of a chat widget

Every chat widget UI has the same few parts. Getting each one right matters more than any visual flourish.

• The launcher. The bubble in the corner. It needs to be visible without competing with your main button.
• The header. Your name or logo and a line that says who’s answering, so visitors know if it’s a bot or a person.
• The greeting. The first message. It should say what the widget can help with.
• Quick replies. Buttons for the most common questions, so nobody faces an empty text box.
• The conversation. Messages, typing indicator, and anything richer like a product card or a form.
• The input. A text field and send button that stay visible on a phone with the keyboard open.

Placement: bottom-right, unless something’s already there

Visitors look for chat in the bottom-right corner, so start there. Move it when something else already lives in that corner: a cookie banner, a “Back to top” button, a sticky “Add to cart” bar on mobile. A chat bubble covering your checkout button costs more than it earns.

In ZynfoAI you can put the widget in any of the four corners and check desktop and mobile in the live preview before publishing.

Colour: match the brand, keep the text readable

“Can chat widgets match a website design?” Yes, and they should. A widget in someone else’s default blue looks bolted on. Set the launcher and header to your primary brand colour so it reads as part of your site.

Then check contrast. WCAG’s minimum contrast rule asks for at least 4.5:1 for normal text and 3:1 for large text. Many brand oranges and light greens fail with white text on top. If yours does, use a darker shade for the header or switch to dark text.

Keep the AI’s message bubbles neutral, light grey or off-white, and use your brand colour for the visitor’s messages and buttons. That makes the conversation easy to scan.

ZynfoAI lets you set the primary colour, header colour, corner radius, width, height and font size.

The greeting does most of the work

An empty “How can I help?” asks the visitor to do the thinking. Say what you can actually help with, in the visitor’s words.

Page	Weak greeting	Better greeting
Homepage	”Hi! How can I help?"	"Ask about prices, delivery or booking a visit.”
Product page	”Questions? Ask us!"	"Ask about sizing, materials or delivery for this product.”
Pricing page	”Need help?"	"Not sure which plan fits? Tell me your team size.”
Order help page	”Welcome!"	"Send your order number and I’ll check its status.”

Two or three short welcome messages read better than one long one. ZynfoAI supports multiple welcome messages and a short typing delay between them.

Quick replies beat an empty text box

Under the greeting, offer two to four buttons for the questions you hear most. Pull them from real conversations, not guesses. “Where’s my order?”, “Delivery times”, “Talk to a person”. Visitors who tap one see straight away whether the widget is useful.

Keep labels short enough to fit on one line on a phone.

Show where the answer came from

An AI answer is easier to trust when it shows its source. ZynfoAI can show up to three source links under each reply, such as your shipping policy page. Visitors can check the detail, and you can see which pages are doing the work.

Rich messages: use them when they save typing

Plain text is fine for most answers. A card is better when the visitor would otherwise have to type or click away:

• Product cards with an image, price and add-to-cart button, for Shopify stores.
• Order status cards when someone asks “Where’s my order #1042?”.
• In-chat forms for name, email and phone once the visitor wants a quote or a call back.

Don’t pop it open on everyone

Auto-opening the chat on every page load is the fastest way to get it closed and ignored. On mobile, a chat window that covers the page also gets in the way of what the visitor came to read. Google’s guidance on intrusive interstitials warns that dialogs blocking content can hurt search performance.

Better options:

• Leave the bubble closed and let a good greeting do the work.
• If you auto-open, do it on one high-intent page, like a support or pricing page, after the page has loaded. ZynfoAI’s auto-open waits until the page has finished loading and gone idle.
• Use a short proactive message above the bubble instead of opening the full window.

Mobile: test it on a real phone

Most widget problems only show up on a phone. Before you publish, check:

• The bubble doesn’t cover a sticky button or menu.
• The input stays visible when the keyboard opens.
• Quick replies fit without wrapping awkwardly.
• The close button is easy to hit with a thumb.

Accessibility checklist

A chat window behaves like a dialog, so test it like one. The W3C’s dialog pattern is a good reference: focus moves into the window when it opens, Tab stays inside it, and Escape closes it and returns focus to the launcher. Also check that new messages are announced to screen readers and that every button has a label.

Speed: the widget shouldn’t slow the page

A chat widget is a third-party script, and web.dev’s advice on loading third-party JavaScript applies: load it asynchronously so it doesn’t hold up your page. ZynfoAI’s embed code uses async, draws a light bubble first, and loads the full chat window when a visitor reaches for it.

Chat widget examples by business

A local service business. Header: “Birchwood Kitchens · usually replies instantly”. Greeting: “Ask about prices, the areas we cover or booking a home visit.” Quick replies: “Do you cover my area?”, “Rough prices”, “Book a visit”. Form fields: name, phone, postcode.

An online store. Greeting: “Ask about sizing or delivery, or send your order number.” Quick replies: “Where’s my order?”, “Returns”, “Delivery times”. Product cards for recommendations, order status cards for tracking.

A software company. On the pricing page only: “Tell me your team size and I’ll point you to the right plan.” Quick replies: “Compare plans”, “Talk to sales”. A rep joins during working hours through human handoff.

Frequently asked questions

What is a chat widget?

A chat widget is the chat bubble in the corner of a website. It opens a small window where visitors can ask questions and get replies from a person, scripted answers or an AI agent, without leaving the page.

Can a chat widget match my website design?

Yes. Set the colours, corner, size, corner radius and font size to fit your site, then check text contrast. ZynfoAI has a live desktop and mobile preview for this.

How does a live chat widget work?

The widget is a small script on your page. When a visitor sends a message, it goes to a server where an AI agent answers or a teammate replies from an inbox. In ZynfoAI the AI answers first and hands the chat to your team when needed.

Where should a chat widget go?

Bottom-right, unless something important already sits there on desktop or mobile. Then use another corner.

Will a chat widget slow my site?

Not if it loads asynchronously and keeps its first load small. Check your page speed before and after adding any widget.

Ready to add one? Follow how to add chat to your website for platform-by-platform steps, or start from scratch with how to create a chatbot for your website. On WordPress, use the WordPress chatbot setup guide. Everything ZynfoAI’s website chat widget does is on its product page.