Customer Service Blog from HelpCrunch

Live Chat Button: How to Install it and Talk to Customers Today

A small yet powerful live chat button can alter the way you interact with your website visitors. We explain how to install it on your website (spoiler alert: it's actually a piece of cake).

Written by Anastasiia Khlystova

Live Chat Button: How to Install it and Talk to Customers Today

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 live chat definition states that it 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 like this:

Live chat button in HelpCrunch open and closed

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

This 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 is a plethora of live chat software on the market these days, which is all different by their UX, looks, and customization options. The installation process may also differ a little bit, but not much.

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, Dukaan, Magento, or other CMS, you can take advantage of native plugins for them.

HelpCrunch live chat button installation wizard step3
HelpCrunch live chat button installation wizard step3

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 app live chat button
HelpCrunch app live chat button

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.

Specific live chat solutions

1. HelpCrunch

Pricing: free — $15 per team member per month (if billed monthly)

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 –> Website widgets –> Widget customization and choose its color, accompanying text, position, and even add a custom photo button.

HelpCrunch widget customization
HelpCrunch live chat button customization

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

2. Intercom

Pricing: from $39 per seat per month

Intercom calls its live chat button ‘a launcher’ (which is kind of cool and confusing at the same time). Unfortunately, the 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 that 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.

olark live chat button design
Olark live chat button design

4. Zendesk

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.

Zendesk live chat window appearance
Zendesk live chat button appearance

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.

LiveChat live chat widget customization
LiveChat live chat widget customization

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.

HelpCrunch live chat button position
HelpCrunch live chat button position

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 ‘Widget color’ 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.

HelpCrunch live chat button icons and colors
HelpCrunch live chat button colors and icons

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.

To do that in HelpCrunch, you need to go to Settings -> Website widget -> Localization. If you choose to show the accompanying text, you can also localize it to any language you prefer. Plus, it’s possible to create texts for both online and offline modes.

HelpCrunch live chat widget localization
HelpCrunch live chat widget localization

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 your 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 stays 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.

HelpCrunch proactive live chat message
HelpCrunch proactive live chat message

So, when choosing live chat software, also pay attention to its auto messages functionality. HelpCrunch offers a great variety of triggers 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, the 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.

Anastasiia Khlystova
As a sporadic visitor of internet stores and a content marketing manager with 8+ years of experience, Anastasiia knows what good customer service is. Anastasiia is a former Head of Content at HelpCrunch, so she knows how to write about customer service so that everyone understands its true importance and key aspects. Her professional interests include AI chatbots and different aspects of customer support automation. When not writing for the HelpCrunch blog, she likes to read modern literature, watch independent cinema, and cuddle with her cat and dog.
Follow me on:

Read Also

Start using HelpCrunch now

Free trial. Set up in minutes. No credit card required.

This website uses cookies to ensure you get the best experience on our website. Find out more