Put the chat button in a bottom corner (bottom right is the convention most visitors expect), keep it clear of cookie banners, "back to top" buttons and mobile navigation, and hide it where it gets in the way, such as checkout. Greet visitors after a short delay rather than instantly, and test the button on a real phone.
1. Pick the corner visitors expect
Most chat tools default to the bottom right, so that's where visitors look first. Use the bottom left only if something else already lives at the bottom right, such as a cart button, a "back to top" arrow or an accessibility widget.
- Leave a margin of about 16–24 px from the edges, so the button doesn't touch the screen edge or the browser's scrollbar.
- On iPhones, make sure it sits above the home indicator area at the bottom.
- Top corners are unusual for chat; use them only if your design calls for it (Chatmello pets can hang from a top corner, upside down, for a playful look).
2. Don't cover anything important
- Cookie banners: check the first visit, when the banner is open. The chat button shouldn't hide its buttons.
- Mobile navigation and "add to cart" bars fixed to the bottom of the screen.
- Other floating buttons: WhatsApp buttons, review badges, accessibility widgets. Keep one button per corner.
- Form fields near the bottom of the page, especially on phones, where the keyboard pushes content up.
3. Size: easy to tap, not in the way
A launcher around 56–64 px is easy to tap on a phone and doesn't crowd small screens. WCAG 2.2 asks for interactive targets of at least 24 × 24 CSS pixels; chat buttons are usually far above that. Bigger is more noticeable but covers more content on phones.
4. Hide it where it doesn't help
- Checkout and payment steps, where any distraction can cost a sale (unless you deliberately offer checkout help).
- Full-screen tools such as editors, maps or video players.
- Pages that already have their own contact form right above the fold.
- Logged-in app screens, if support works differently there.
Most chat tools have display rules for this, and Chatmello has page rules (show only on /pricing, or everywhere except /checkout/*). On hidden pages Chatmello shows your chat tool's normal button, or nothing, as you choose.
5. Greet after a short delay
A greeting bubble draws attention, so time it: a few seconds after the page loads lets visitors see the page first. Greet once per visit, not on every page, and always let visitors dismiss it. See greeting message examples for wording.
6. Mobile is a different page
- Test on a real phone in both portrait and landscape.
- Check what happens when the chat opens: many chat windows cover the whole screen on phones, so make sure visitors can close it easily.
- If the button crowds a small screen, use a smaller size on mobile or hide it on phones and offer another contact link.
7. Make it accessible
The chat button must be a real, labelled button that works with a keyboard and has a visible focus ring, and animated launchers should calm down for visitors who ask for reduced motion. The full checklist is in how to make your chat button accessible.
Checklist
- Bottom corner, 16–24 px from the edges, above the iPhone home indicator
- Doesn't cover cookie banners, cart bars, mobile navigation or other floating buttons
- 56–64 px, easy to tap
- Hidden on checkout and full-screen tools
- Greets after a few seconds, once per visit, dismissible
- Tested on a real phone
- Keyboard accessible, labelled, calm with reduced motion
FAQ
Should the chat button be on the left or the right?
Bottom right is the convention, so visitors find it fastest. Use bottom left only when the right corner is taken by something more important, like a cart button.
Should I show the chat button on every page?
No. Hide it where it distracts, such as checkout and full-screen tools, and where another contact option is already prominent.
How soon should the greeting appear?
After a few seconds rather than instantly, once per visit. That gives visitors time to see the page before you ask anything.
How big should a chat button be?
Around 56–64 px works well on phones and desktops. Accessibility guidelines ask for at least 24 × 24 CSS pixels for tap targets.
Does an animated chat button distract visitors?
It can, if it moves all the time. Keep idle movement gentle, greet once, and stop animation for visitors who prefer reduced motion.
Can I put the chat button at the top of the page?
You can, but it's unexpected for chat. Most visitors look at the bottom corners first.
