Ana Khlystova
Jun 04, 2019 | 8 min read

So, you want to add a live chat button to your website? Or maybe you already have one, but feel like it’s not working the way it should be?

A live chat button is indeed extremely important as it directly impacts people’s willingness to contact your team and leave their messages and suggestions.

According to this case study, a nice and appealing chat can increase the number of incoming chats by 91% (true story), while more outdated widgets can be even repellent and harmful for your business. Basically, the higher the number of incoming chats, the more leads and satisfied customers you’ll have.

So, let’s talk about those chat buttons in more detail. What exactly are they? And how do you acquire one for your website?

What is a live chat button?

The simplest definition states that live chat is an online messaging app that allows customers to communicate with businesses online in real time.

So, where does a live chat button stand in this arrangement?

A live chat button is a small icon, usually located at the bottom right corner of a web page, that invites visitors to start a chat conversation with a website owner. When people click the button, it’ll open a live chat window where they can leave their messages and get real-time answers.

It looks something like this:

helpcrunch live chat widget

Usually, you don’t even notice if a website has this small button or not until you really need it. And when you do need it, the button may feel like a true savior.

How to add a live chat button to your website

Which brings us to the most important part. How do companies add live chat buttons to their website? Is there some kind of software or do they build their solutions from scratch?

Usually, companies use third-party solutions for adding a live chat button. The whole integration process usually takes a couple of clicks and around 2-3 minutes, so you won’t need any extraordinary technical skills.

There are a plethora of live chat tools on the market these days, which are all different by their UX, looks and customization options. The installation process may also differ a little bit, but not much.

Looking for an all-in-one
customer communication tool?

Usually, after you’ve signed up, a tool will offer you a code snippet. You’d need to paste this code right before the closing </body> tag of every page that you want to have a live chat button on. That’s right – if you don’t want to have it on all of your pages, you just paste the code wherever you need and ignore the rest.

If you run a website on WordPress, Shopify, or Magento, you can take advantage of native plugins for these CMS.

How to add a live chat button to a mobile app:

People often think of a live chat button as something that only websites can have when in fact mobile apps can benefit from it a lot. Not only is it a great way to resolve users’ issues immediately, but also an additional channel for you to get in touch with them. By integrating a live chat button into your Android or iOS app you ensure higher customer service quality. This can be done with the help of HelpCrunch SDK.

HelpCrunch live chat installed to HelpCrunch mobile app. That’s meta.

When choosing chatting software, pay attention to their customization options in the first place. I mean you’d probably want your live chat button and the whole widget to look like an integral part of your website. To do so, you would have to change it dramatically – from its color and position on a website to custom images and proactive greetings. But more on this later.

Now, let’s talk about specific live chat solutions:

1. HelpCrunch

Pricing: free — $12 per team member per month (if billed annually)

HelpCrunch is an all-in-one customer support solution that offers a modern and fully customizable live chat widget among many other things. To my very subjective and biased taste, it’s one of the best looking chat buttons — slick and modern and is not overloaded with redundant elements.

In terms of widget customization, HelpCrunch also leaves its competition behind. You can change virtually anything about your live chat button right in the ‘Settings’ section like its color, accompanying text, position and even add a custom photo button.

On top of live chat, HelpCrunch also offers auto messages, email marketing tools, and pop-up functionality, but that is a completely different story 🙂

2. Intercom

Pricing: $38 for two seats + additional fees for active contacts and more seats

Intercom calls its live chat button ‘a launcher’ (which is kind of cool and confusing at the same time). Unfortunately, launcher’s default customization settings are quite poor and only come down to showing/hiding it from website visitors. That is too bad as Intercom does offer numerous customization tweaks for its Messenger as a whole, it’s just that the button is left behind.


The good news is, you still can customize it drastically or create your custom one but only with the help of JavaScrip code snippets, classes and methods. Yes, it’s way too complicated and way too limited. On the plus side, Intercom’s design is quite cool as it is.

3. Olark

Pricing: free — $15 (if billed annually)

Olark is a simple live chat tool which doesn’t really offer anything extra, though it’s not necessarily a bad thing. Their whole live chat widget is very basic and not as rich as the one by Intercom or HelpCrunch. In terms of a chat button, you can easily change its position, shape, and color. Well, that’s it.

If you’re looking for something simple, then Olark is your choice.

4. Zendesk (former Zopim)

Pricing: free — $59 per agent per month (if billed annually)

Even though I’m not the biggest fan of Zendesk’s live chat widget (in contrast to their ticketing tools, which are the best on the market), it’s got into this list. The only reason for this is that the tool is still very popular among customers.

There are practically very few customization options to Zendesk chat button and the whole widget.

5. LiveChat

Pricing: $16 — $149 per seat per month (if billed annually)

LiveChat is probably my favorite live chat tool after HelpCrunch since they also offer almost as many widget customization options. Well, not quite, but almost. And the whole job can be done right from the admin panel.

So, you can tweak a chat button position, color and choose its form between a bar and a bubble. And you can it separately for your desktop and mobile device as well as completely hide it from certain users. Additionally, LiveChat offers a wide variety of custom CSS styles for changing the look of a chat widget.

It’s also a nice touch that they provide 24/7 customer support of their own, which is rather rare and extremely convenient.

How to customize your live chat button

After you’ve installed a live chat button, it’s time to tweak it a little bit. Customizable buttons are the first thing that your website visitors see and interact with. It should be nice and inviting as well as go together with your design.

That’s why I’d like to talk about live chat button customization separately on the example of HelpCrunch software. Please note that you can change your chat button design separately for a desktop and a mobile app as well as separately for different pages of your website.

So, here’s what you can and should change about a live chat button after you’ve added it to your website:

Chat button placement

In HelpCrunch, you can choose your chat button position between the bottom left and bottom right. You can then set your custom button offset in pixels to move it higher or to the left/right a little bit

It’s also easy to hide a chat button from certain pages of a website (or show it on some other pages). You don’t need to tweak the code even – just paste the links you need to the corresponding fields. Alternatively, you can only show it to your registered users so that random visitors won’t be able to contact you (but that is rather a rare use case).

Chat button icons and colors

I guess this part is the most fun. First of all, you can choose the form for your chat button between an icon, button, and tab as well as make them squared, rounded, or in the form of a circle.

HelpCrunch offers 13 pre-set chat button icons for you to choose from. They are all nice and kind of self-explanatory, but that is just the beginning. You can go as far as adding your own custom image instead of a pre-set icon template which can be quite interesting.

If you want to change its color, you can easily do so in the general ‘Chat appearance’ section. Choose an overall theme and color or set your custom CSS color — and the whole chat widget will adopt the look. This way you’ll keep the consistency of the whole chat widget.

Chat button texts and languages

As an option, you can add some invitation or greeting text to your chat button – something like ‘chat with us’ or ‘contact us if you have any questions’. It’s not required, but it’s more straightforward than just a button.

If you choose to show this accompanying text, you can also localize it to any language you prefer.

Proactive greetings for chat buttons

Proactive greetings are something people rarely care about when they think about a chat button because it’s not directly connected to them. But I believe it’s important to take care of them early on as they can increase you chat button engagement, conversations, and sales.

Proactive greetings or proactive chats are automated messages that are triggered by certain behavior of your website visitors. If someone stayed on a certain page for longer than 15-20 seconds, the system can shoot them an automated message offering help. These messages will appear right near your live chat button and invite people to click it, which is exactly why I decided to mention them in this article.

So, when choosing live chat software, also pay attention to their auto messages functionality. HelpCrunch offers a great variety of triggers for auto messages like current page, time spent on a page, number of visits, etc. You can also transfer any custom data you want to your HelpCrunch account – things like subscription data, subscription plan, value of a purchase, etc.

Final thoughts

Adding a live chat button to a website is actually easier than it might seem at first glance. It’s choosing the right platform that can cause you trouble.  But if you liked what you saw in this article and are ready to take action, your live chat button is closer than you think. Make a smart choice and sign up for HelpCrunch live chat right away.

After all, this tiny little thing will stick with your website for a long time.

Read also


What is Live Chat?

Feb 25, 2021 5 min read

What is live chat and what’s the source of its popularity? We’ve unfolded all mysteries in our short explainer.

Ana Khlystova

What is In-App Support?

Feb 23, 2021 4 min read

In-app support is helpful in so many ways, both for developers and clients. How to implement one in your workflow and chat with customers without bouncing between the platforms? Read on to get all the answers.

Les Melnichenko

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.