Chat on a Phone: A Mobile Checklist Before You Put a Chatbot Live

Most of your visitors are on phones. A chat that looks fine on your laptop can be unusable on a phone: the launcher covers the call button, the keyboard hides the input, the window is too tall, text is too small or the whole page jumps when it opens. Because mobile visitors are often closest to a decision, a broken chat costs bookings at the worst moment. Testing on real phones takes an hour and catches almost every problem. This guide is a practical checklist for mobile chat: the layout and behaviour to check, the speed and accessibility points that matter on small screens, a way to test on real devices and the common bugs to look for.

Start with how visitors use their phones

• One hand, thumb reach, often on a train, sofa or shop floor.
• Small screens, so anything that covers content is painful.
• A software keyboard that takes half the screen when typing.
• Variable connections: fast Wi-Fi one moment, weak mobile data the next.
• Interruptions: calls, notifications, switching apps.

Design for these conditions, not for a desk.

The launcher

If the launcher covers a button on some pages, adjust its offset or hide it there.

The open chat window

• Uses most of the screen but leaves a clear way to close it.
• The message list scrolls smoothly and shows the latest message.
• The input stays visible when the keyboard is open.
• The page behind does not scroll or jump.
• Text is at least readable size without zooming.
• Buttons and links are easy to tap.

The keyboard is the most common problem: on some phones the input disappears behind it or the layout jumps. Test on both iPhone and Android in several browsers.

Layout and orientation

• Works in portrait and landscape.
• Handles long messages, lists and tables without sideways scrolling.
• Booking cards fit the width.
• Images, if any, scale down.
• Nothing is cut off on small phones.

Test on the smallest phone you can find as well as a large one.

Speed on a mobile connection

A slow widget hurts your page and your visitors' patience. Check that the chat does not delay the main content, and measure page speed on a mobile profile before and after adding it. The widget's script is loaded from one line on your site, and a well-built widget adds little; still, measure your own pages. See performance of embedded chat widgets. Test on a throttled connection to see what a visitor on weak data sees.

Touch and interaction

• Tap targets are at least a thumb's width, with space between them.
• Quick-reply buttons are easy to hit.
• Long-press or hover is never required.
• Swipe gestures are not the only way to do something.
• Errors are clear and tappable to fix.

Accessibility on mobile

Phones have their own assistive technology: VoiceOver on iPhone and TalkBack on Android. Turn one on and try to open the chat, read a reply and send a message. Check colour contrast in sunlight, dark mode and large text settings. See chatbot accessibility and WCAG.

Booking and forms on mobile

• Date and time choices are easy to tap; a list of times often beats a tiny calendar.
• Input fields open the right keyboard: numeric for phone numbers, email for addresses.
• Autofill works for name, phone and email.
• Confirmation is clear and visible.
• The change link opens correctly on a phone.

Try a full booking on a phone, from the first question to the confirmation email.

Notifications and interruptions

• If a visitor leaves the page and returns, the conversation should still be there.
• A message should never trigger a sound unexpectedly.
• Pop-ups should not appear immediately or repeatedly; see reducing bounce with proactive chat.

How to test properly

1. Use at least two real phones, one iPhone and one Android, and if you can, an older model.
2. Test in the browsers your visitors use: Safari and Chrome at least.
3. Test on Wi-Fi and on mobile data.
4. Run the whole path: open, ask, book, receive the confirmation.
5. Open your top five pages and check the launcher on each.
6. Rotate the phone.
7. Turn on large text and dark mode.
8. Ask someone who has never seen it to use it while you watch.

A five-minute check to repeat

• Open your busiest page on a phone.
• Is the launcher visible and not covering anything?
• Open the chat and type a message; does the keyboard hide the input?
• Close it; does the page behave?
• Repeat on the booking page.

Do it after every change to your site, the widget or your theme.

Worked example: a clinic that found three bugs in an hour

A clinic tested its chat on three phones on a Friday afternoon. On an older Android phone the input disappeared behind the keyboard, so nothing could be typed. On an iPhone in landscape the chat window overflowed the screen. And on the contact page the launcher sat directly on top of the tap-to-call button. None of these appeared on the owner's laptop. The developer adjusted the window height for the keyboard, limited the height in landscape and moved the launcher on the contact page. A second round of testing on the same phones confirmed the fixes. The whole exercise took ninety minutes and removed the three problems most likely to have cost bookings from mobile visitors.

Common mistakes

• Testing only on a laptop with a narrow browser window.
• Never testing with the keyboard open.
• Forgetting the contact and booking pages.
• Ignoring older phones.
• Auto-opening the chat on mobile.
• Not retesting after theme or widget updates.

Dark mode and system settings

Many people use dark mode, large text or reduced motion. Switch each on and look at the chat: is text still readable, do colours still have enough contrast, does anything overflow when the font grows, do animations stop? A chat that respects the visitor's settings feels considerate; one that ignores them can be unusable for people who depend on them.

Frequently asked questions

See the website widget feature, read chat widget design and test in the playground.

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.