Live Chat Button and Icon: Design Tips That Get More Clicks

Written by

in

⚡ In short

  • The chat button should be easy to see and never cover important buttons.
  • Use your brand colour, the bottom corner and a friendly attention grabber.
  • Add your own “Chat with us” buttons on key pages too.
  • Test on a phone.

Where to put the chat button

The bottom-right corner is what most visitors expect. Use bottom-left if something else already sits on the right, like a cookie notice or a “Back to top” button. In LiveChatBot choose the Corner under Settings → Appearance. Customize your widget.

Colour

Use your brand colour so the button looks like part of your site. Make sure it stands out from the background behind it.

Icon and wording

A speech bubble is universally understood. A short line next to it (“Questions? We’re online”) gets more clicks than the icon alone. LiveChatBot’s Attention grabber shows a small photo and line next to the bubble, and hides once the visitor opens or closes the chat.

Your own chat buttons

Add “Chat with us” buttons or links where people decide: pricing tables, product pages, the contact page. Developers can open the chat with LiveChatBot.open(). See the developer docs.

Mobile tips

  • Make sure the button doesn’t cover “Add to cart” or the menu.
  • Hide it on checkout steps if it gets in the way. Show the chat only on some pages.
  • Keep the attention grabber short; small screens fill up fast.

Show the chat in other places

  • Inside a page: put the chat on your Contact page instead of a bubble.
  • Chat link: share it in your Instagram bio, emails or a QR code.

More about options in website chat widget.

FAQ

Which corner is best for a chat button?

Bottom right is most common. Use bottom left if another button is already there.

Should the chat open automatically?

Usually no. A small greeting from a Flow after some seconds works better than a chat window popping open.