Bottom-Left or Bottom-Right? Where to Put the Chat Widget on Your Website
A small design decision that decides whether people notice it, or curse it.
Published Updated 3 min read
When I built the chat widget for ChatBento, one of the first settings people asked for wasn't about AI at all. It was "can I put it on the left?" It turns out a lot of sites have a good reason to.
Here's how to decide, plus a few placement mistakes that make a chat widget annoying.
Why bottom-right is the default
Most chat widgets sit in the bottom-right corner, and that's a reasonable default:
- Convention. People have seen chat bubbles bottom-right on thousands of sites. They look there without thinking.
- It stays out of the reading path. In left-to-right languages, people start reading at the top left. The bottom-right corner is the last place the eye lands, so a bubble there doesn't compete with your headline.
- It's near the thumb. On phones, most people hold the device in their right hand, so bottom-right is easy to tap.
If nothing else is in that corner, use bottom-right and move on.
When bottom-left is the better choice
Something already lives bottom-right. Cookie banners, "back to top" buttons, accessibility widgets, cart drawers, WhatsApp buttons, review badges. Stacking two floating things in one corner means one covers the other, or a visitor taps the wrong one. Move the chat left.
Your site is in a right-to-left language. For Arabic, Hebrew, Persian or Urdu sites, the reading path is mirrored. Bottom-left is the "end of the page" corner, and it's where visitors expect the chat.
Your design is anchored on the right. If your layout has a right-hand sidebar, sticky "Buy now" button or floating product summary, the left corner is often cleaner.
You want it to stand out on purpose. Bottom-left is less common, so it gets noticed. That's good if chat is your main way to convert visitors, and bad if it pulls attention from your main call to action.
Mistakes that make a chat widget annoying
It covers content on mobile. A bubble that sits on top of your "Add to cart" button or form field on a phone costs you sales. Check your key pages on a real phone after installing.
It opens itself. A chat window that pops open on page load is the website version of a salesperson blocking the door. Let visitors open it. A short greeting next to the closed bubble is enough.
It plays sounds. Just don't.
It fights with the cookie banner. On a first visit, the cookie banner and the chat bubble often load at the same time in the same corner. Put them in different corners, or make sure the banner sits above the bubble.
It doesn't match your site. A bright default blue on a site with a muted palette looks like an ad. Use your accent color and your own avatar.
A quick placement checklist
- Nothing else floats in the chosen corner
- It doesn't cover buttons or form fields on mobile
- Cookie banner and chat bubble don't overlap on the first visit
- It doesn't open by itself or make sounds
- Color and avatar match your brand
- For right-to-left sites: bottom-left
Making the switch
In ChatBento, the corner is a setting in the dashboard under Customize, next to color, avatar and greeting. You don't touch the install snippet. If you want a "Talk to us" button somewhere else on the page, for example in your navigation, you can open the chat from your own button with:
window.ChatBento?.open();
Copy-paste install examples for Framer, Webflow, WordPress, Shopify, Next.js and plain HTML are in our open GitHub repo: chatbento-widget.