Website Chatbot Best Practices: 20 Rules From Usability Research

Most chat widgets are switched on with the vendor's defaults and never looked at again. Then the first month's conversations arrive: a visitor who asked three questions in one message and got an answer to none, another who typed "agent" four times, a third who gave up on a phone because the keyboard covered the text box. None of those are AI problems. They are design problems with known fixes.

This guide is for whoever owns the website and is about to put a chat widget on it, whether the bot behind it is an AI support agent or a person. It lists twenty rules in five groups: placement and first contact, the conversation itself, honesty and the handoff, mobile, speed and accessibility, and privacy and measurement. Each rule says why it matters and how to check it on your own site.

Three neighbouring topics have their own guides and are not repeated here: what the greeting should say, in our chatbot welcome message examples; the bot's persona and rules, in the instruction examples; and the full pre-launch test, in the 30-point launch checklist. PepoChat details are as of October 2026.

What does usability research say about website chatbots?

Most website chatbots are ignored, and the ones that get used make their purpose obvious and admit their limits. Two Nielsen Norman Group studies, eight years apart, agree on that.

In The User Experience of Chatbots, published in November 2018, Raluca Budiu watched eight participants use customer-service chats with humans and bots. The bots handled simple linear tasks and failed as soon as people went off script. Her guidelines are still the shortest good summary of the subject: "Be upfront about using a bot and not a human", "Allow people to interact with the bot both through free-text input and selection of links", "Don't be overly ambitious: create bots for simple tasks", and "Be honest about not understanding. Offer an escape hatch in the form of a real human".

In March 2026, NN/g's Maria Rosala, Georgia Kenderova and Tanner Kohler published What Is Your Site's AI Chatbot for? Users Can't Tell, based on moderated sessions with nine users across eight AI chatbots. Participants "rarely used site AI chatbots" and often did not notice them. One said of the launcher, "If you didn't say nothing about that little circle... I would have never known that's there." The authors conclude that "If its benefit is not obvious immediately, they will move on".

A website chatbot is a chat window on your site that answers visitors, by software, by people, or both. The usability problems are about placement, framing, honesty and friction, and those are yours to fix whatever product sits behind the window.

Placement and first contact

The first four rules decide whether anyone opens the window at all.

1. Put one launcher in a fixed corner, on every page

Use a single launcher button in the same corner of every page. Visitors have learned to look for chat in the bottom-right corner; moving it between pages, or showing two launchers because two snippets loaded, loses the people who would have used it. Check it by opening five pages, including checkout or pricing, on a phone and a laptop.

2. Do not open the window on its own or cover the content

Let the visitor open the chat. A window that pops open after ten seconds covers the paragraph the visitor was reading, and on a phone it covers the whole page. People close it reflexively, which trains them to close it on the day they needed it. Check it by loading the page and doing nothing for a minute: nothing should move until a real reply arrives.

3. Say what the bot can do in its first line

The first line names the three or four things the bot handles. NN/g's 2026 study found that vague openers left people unsure what the bot was for, and recommends specific prompts instead of generic ones like "How can I help?". "I can check an order, explain our plans and book a call" tells the visitor whether to bother; a wave emoji does not. Check it by reading your greeting aloud and asking whether a stranger would know what to type next.

4. Offer tappable questions next to free text, never instead of it

Show two or three suggested questions and keep the text box open. Budiu found that "typing is less efficient than selecting information" and that people "expected to be able to click on almost any nontext element", but buttons alone trap anyone whose question is not on the menu. Check it by tapping each suggestion: each should produce a complete, correct reply.

The conversation itself

Rules five to nine cover the turns once the visitor has typed. Most of them come from conversation design, which predates chatbots.

5. Answer in two to four sentences, fact first

Lead with the fact, then the condition, then the next step. Google's conversation design guidance asks for turns that are "brief and optimally relevant from the user's point of view" on its Learn about conversation page. A chat window is roughly the width of a phone, so a six-paragraph answer scrolls the question off screen. "Returns are free within 30 days. Items must be unworn. Start one from the orders page." beats an essay. Check it by counting sentences on your ten most common questions.

6. Ask one question at a time

When the bot needs something, it asks for one thing. The same Google page lists asking "only a single question at a time" as a basic rule of turn-taking, because people answer the last question they read and lose the first. "What is your order number and the email you used and is this a refund or an exchange?" produces half an answer. Check it by asking something that needs details and counting the questions that come back.

7. Ask for details only when the answer needs them

Collect the order number when the visitor asks about an order, not before. Interrogating every visitor for a name, email and account number before answering "do you ship to Canada?" costs you the quick questions, which are most of them. Check it with a simple policy question: the answer should come back with nothing asked in return.

8. End each answer with the next step

Every answer says what the visitor can do now. A link, a booking button, an offer to check the order, or a plain "anything else?" Check it by reading the last line of ten answers.

9. Confirm before anything changes

Before the bot cancels, books or updates anything, it repeats what it is about to do and waits for a yes. In PepoChat, the Stripe cancel action runs only on an explicit request and a confirmation, as the guide to cancelling subscriptions through a chatbot explains. Check it by asking the bot to cancel something in a test chat.

Honesty and the handoff

Rules ten to thirteen cover the moments when the bot cannot help, which is where trust is won or lost.

10. Say "I don't know" and offer a person

When the answer is not in your content, the bot says so and offers a person in the same message. Budiu's participants found that "Recognizing that a question was not understood was disappointing, but better than a blatantly wrong answer", and that "Owning the failure and offering an escape hatch" was received well. A grounded AI support agent does this by design, as the guide to stopping chatbot hallucinations describes. Check it by asking three questions your content does not cover; a guess on any of them is a failure.

11. Never pretend to be human, and never fake a typing delay

Call the bot an assistant, give it a logo rather than a stock portrait, and let it reply as fast as it can. "Be upfront about using a bot and not a human" is NN/g's first guideline, and in the EU and several US states it is also the law; the guide to AI chatbot disclosure rules lists them. Artificial typing pauses waste the visitor's time to protect a pretence. Check it by asking "am I talking to a real person?".

12. Make the handoff visible and keep the transcript

When a person takes over, the visitor sees it, and the person sees everything that was said. A human handoff that drops the transcript makes the visitor repeat themselves, which undoes whatever time the bot saved. The human handoff guide covers the five triggers and the context the person needs. Check it by asking for a person in a test chat and opening the conversation in your inbox.

13. Tell the truth about reply times when nobody is online

If no one is watching the inbox, the bot says so and says when someone will be. "A teammate will be with you shortly" at 11 p.m. on a Saturday is a promise nobody will keep. Show business hours, name the return time and collect an email address; the guide to 24/7 support without a night shift walks through the setup. Check it by asking for a person outside your hours.

Mobile, speed and accessibility

Rules fourteen to seventeen are the ones most often skipped, because whoever installed the widget tested it on a large monitor.

14. Keep the window usable on a phone, with the keyboard open

On a phone the chat window should fill the screen, keep the text box visible above the keyboard, and close with one tap. WCAG 2.2's reflow criterion, 1.4.10, asks that content work at a 320-pixel width without scrolling in two directions, and a chat window is content. Check it on a real phone: open the chat, type a message, read a long answer, and close the window.

15. Load the widget after the page, not in front of it

The widget's script should be asynchronous and the chat frame should load after your page has finished. The web.dev guide to loading third-party JavaScript by Addy Osmani and Arthur Evans says to "Always use async or defer for third-party scripts, unless the script is necessary for the critical rendering path", and recommends waiting "until after your page's critical content loads" when performance is the priority. The script tag install guide shows the snippet for each platform. Check it with a Lighthouse run before and after installing: Largest Contentful Paint should not move.

16. Meet the contrast, keyboard and target-size rules

Treat the chat window as part of your site for accessibility purposes, because it is. The relevant WCAG 2.2 criteria are text contrast of at least 4.5 to 1 (1.4.3, level AA), full keyboard operation (2.1.1, level A), a visible focus indicator (2.4.7, level AA) and, new in 2.2, Target Size (Minimum), criterion 2.5.8 at level AA, which requires that "The size of the target for pointer inputs is at least 24 by 24 CSS pixels". Brand colours are the usual culprit: a pale brand blue on white fails the contrast rule inside the window. Check it with the keyboard alone and a contrast checker on your brand colour.

17. Label with text, not icons alone

The launcher and every control inside the window need a text label a screen reader can announce. WCAG's first criterion, 1.1.1 Non-text Content, requires a text alternative for images that carry meaning, and a speech-bubble icon with no label is exactly that. The 2026 NN/g study also recommends making the chatbot visible where it is relevant, not only as a floating icon: a plain "Chat with us" link on the pricing page that opens the same window helps everyone. Check it with a screen reader: the launcher should announce as a button with a name.

Privacy and measurement

The last three rules are about what you collect and whether you ever look at it.

18. Do not demand an email before the first message

Let visitors ask without signing in or filling a form. A pre-chat form costs you the people with a quick question, who are most of your traffic. Ask when a follow-up genuinely needs it, such as an order enquiry or a handoff while your team is offline, and say in one line what you will do with the address. The chatbot lead generation guide compares the three timings. Check it by opening the chat as a new visitor: the text box should be usable immediately.

19. Say what you store and who sees it

The visitor should be able to find out, in one click, what the chat records and where it goes. That means a privacy policy that names the chat vendor, says that messages and any details the visitor types are processed to answer and route the conversation, and names any connected tools whose data the bot looks up. The GDPR guide for chatbots lists what to write and what to ask a vendor. Check it by searching your own privacy policy for the word "chat".

20. Review conversations every week and fix the content, not the symptom

Read a sample of conversations weekly and turn every miss into a content fix. The bot's failures are a free list of what your website does not explain: a missed question becomes a page or a Q&A pair, a wrong answer becomes a correction at the source. The chatbot metrics guide has a 30-minute weekly routine. Check it by putting the review in a calendar; if it is not scheduled, it will not happen.

The 20 website chatbot rules at a glance

How PepoChat's widget behaves against these rules

PepoChat's widget follows most of these rules out of the box, and the rest are settings you choose. What follows comes from the widget behaviour documentation as of October 2026, and nothing beyond it.

Placement and first contact. The launcher is a 60-pixel round button, 20 pixels from the bottom and from the corner you choose, bottom-right by default or bottom-left with one attribute. The window never opens on its own: it opens when the visitor clicks the launcher, or when your own button calls the EchoWidget.show() method, which is how you add rule 17's "Chat with us" link to a pricing page. Without published Help Center articles, the window opens in a chat-first layout: your greeting is the first message and your three suggested questions are tappable chips above the text box.

The conversation. Replies stream in word by word, the agent answers only from your knowledge base, and any single message is capped at 4,000 characters. Answer length and the next step are shaped through the agent instructions.

Honesty and handoff. When retrieval finds nothing relevant, the agent says it does not have that information and offers to connect the visitor with a person; a yes escalates the conversation to the team inbox and emails your team. The status line reads "AI assistant · online", and your team's replies appear under the operator's display name with an initials avatar while the agent keeps the logo. The Team availability setting on Widget Customization decides what the agent promises when nobody can reply: a teammate shortly, your business hours with an away message, or an honest line that you follow up by email, in which case the agent asks once for an address before it hands over.

Mobile, speed and accessibility. The window is 400 by 600 pixels and shrinks to fit small screens. The loader is a small asynchronous script that draws the launcher once your page's content has loaded, the chat runs in an isolated frame, and the frame is fetched during idle time after the page finishes; set data-preload="false" to fetch it only on the first click. An unread badge on the launcher counts replies that arrived while it was closed. PepoChat's documentation does not publish WCAG conformance claims or accessibility test results, so run the checks in rule 16 yourself before launch.

Privacy. The widget sets no cookies on your site and keeps its session identifier in its own browser storage. Chats start anonymous with no pre-chat form unless you switch lead capture on, and when you do, you choose the timing and write the consent line under the form. The privacy notes list what the widget collects.

The limits are worth knowing. The launcher's colour is fixed and it lives in one of two corners; your brand colour styles the window, not the button. The greeting and suggestions are workspace-wide rather than per page. Every feature on the free plan includes all of the above, with 200 AI replies and 5 knowledge sources a month, so you can test the rules on your own site first.

What to do next

Run the twenty checks in the table against your current widget, or the one you are about to install, and fix the three in the callout first. Then work through the AI chatbot launch checklist and write the opener with the welcome message examples. To try the rules against a widget that follows them by default, create a free PepoChat workspace, install the script on a staging page, and run the phone test first.