Live Chat Button: How to Quickly Install It on Your Website

by Oleksii Kovalenko·Updated May 27, 2022

Looking to add a live chat button to your website?

That’s an excellent decision.

Live chat will turn your customer support into a real-time event. And a live chat button on your website will become your customers’ go-to tool to get assistance with questions about products, shipping, working hours, and other FAQs.

In this guide:

What is a live chat button?
Instructions on adding a website live chat button
Tips to customize a live chat button

Add and customize a live chat button to your website in less than 2 minutes

Get Live Chat Learn more about Tidio Live Chat

Explore Tidio’s features and benefits on our dedicated live chat software page.

Looking to learn more about live chat?

What Is a Live Chat Button?

A live chat button is a small, typically round icon located in the bottom corner of a website that lets you communicate with customer support. Adding a live chat button allows visitors to start a real-time conversation—all they have to do is send the first message.

Here’s what a typical live chat button on an eCommerce website looks like:

Whisker Bag homepage with a live chat button on the right

The button encourages customers to contact you and ask questions, thus giving them easy access to customer support. From an ecommerce store owner’s perspective, this is also a convenient solution. Live chat allows them to use canned responses and live chat conversation scripts.

How to Add a Live Chat Button to a Website

You don’t need any coding or other special skills to add a live chat button to any website. In fact, the whole thing can take only several minutes. Let’s walk you through the installation process, so you can integrate live chat into your website, too.

In our guide, we’ll be using Tidio. It’s free, has a 4.8 (out of 5) rating on Capterra, offers a mobile app for Android and iOS devices, plus… the installation process is super easy.

So, here’s what you need to do—

1. Sign Up For a Free Live Chat

First off, set up a free account on Tidio’s register page.

You can sign up using any option out of four (email, Facebook, Shopify, or Wix).

The Facebook registration is probably the simplest, but consider choosing a different option if you’re adding a live chat button to a business website.

Tidio live chat button registration page

Clicking Shopify or Wix options will redirect you to Tidio’s page on the platforms’ respective app stores. Adding the app from there should be a piece of cake for anyone who’s ever installed an app for a website.

So, let’s go with the email address option.

After you choose it, type in your email and website addresses. Also, create a password for your new live chat account.

Once you’re done, tick off the terms and conditions checkbox and click the blue button.

Your live chat account is ready!

Now, it’s time to personalize it by choosing colors, avatars, etc.

2. Customize the Live Chat Button and Widget

There are two ways in which you can display your live chat widget. One option is to only show the live chat button which, when clicked, will reveal the live chat window. The other is to make both the button and the window visible at all times.

You need to customize both to make them look good on your website.

First, choose the name, color, avatar, and language for your live chat.

Here’s a couple of recommendations:

Choose a color that matches your website’s main colors, so the button looks natural.
For the avatar, add a picture of the live chat operator. If you don’t have a picture at hand, you can add it later.

A panel for live chat button configuration

In the next customization step, you specify your business details. Adding them will help the app give personalized suggestions (such as chat response templates, etc.)

Once you provide your business details, the setup wizard will ask you to prepare a welcome message.

The message is automatic, that’s why this step is called “Set Up Your First Chatbot.” The “chatbot” means that an app—not a live chat operator—will show this welcome message to every website visitor.

The welcome message is an extremely useful feature. If you’re running a website store, you can share discounts, product arrival updates, and news with customers. But if you’re a blogger, you can invite visitors to read your articles—and every visitor will see that invite, even on mobile.

Tidio offers two standard options for you to choose from (a message with a discount code for potential customers and a simple greeting).

Feel like your website needs a unique message?

No problem.

Click “Customize this message” (right below the welcome message preview) and write any text you want.

If you need some inspiration for a unique welcome message for your website, these 39+ best welcome messages for customers should be useful. Click “Continue” to go to the last step when you’re done with the welcome message.

The fourth customization step involves adding a live chat button to your website by using a small line of HTML code. It’s pretty straightforward, but we’ll explain everything in detail in the next part, so you’ll have all the help you need.

3. Integrate the Live Chat Button Into the Website

This is where you actually integrate the live chat button into your website. The task is simple. All you need to do is add a JavaScript code snippet to your website.

This might sound complicated if you have no experience with that sort of thing. But no worries—it’s actually very simple.

So, you’ve got two options: do it yourself or have a developer do it for you. The second one is a piece of cake: just type in your developer’s email and click “Send.” Easy peasy.

If you decide to do it yourself, click on the “Show me the code!” button.

Next, choose the platform your website is built on.

Once you click on the platform, you’ll see the installation guidelines and the code snippet. For example, if you pick WordPress, you’ll see these five simple steps:

Follow the instructions, find the Theme Footer, and paste the live chat button code at the right place.

Here’s what it looks like in WordPress.

Adding the live chat button in WordPress

From now on, your website visitors can contact you via a live chat button for assistance and support.

By the way, Tidio is more than just a simple live chat button. For example, it will show you a real-time list of visitors on your site, so you can offer proactive chat support.

If you need more help with adding a live chat button to your website, refer to our detailed guides for help:

How to Customize a Live Chat Button

A customized live chat button is a powerful tool for your website. You can easily customize it to match the website’s colors, place it anywhere you like, and add cool graphics to the chat widget.

Tidio offers many chat button customizations in Settings, including:

Position
Color
Label
Language
Welcome message

We touched upon some of these already, but let’s see how to customize the chat button using the Tidio app after the button has been successfully installed.

Position

In Tidio, you can place the live chat button either in the bottom right or bottom left corner of your website. The position to the right is the most popular, but many website owners choose the left placement if there’s another widget in that place already.

Click both positions and see what the chat button looks like on your site. Getting a visual might be the best way to decide.

Color

Tidio offers color choice during the installation, but you can always change it in the settings. Changing the color is a great idea to make the live chat button look more natural and professional.

Here are the chat button color choices (if you need more colors, click the brush icon to the right).

Here’s a nice example of a customized live chat button for you—

Pooch Bandana, a seller of—you guessed it—dog bandanas, has a black chat button that looks very natural with the brand’s colors on both desktop and mobile screens.

Pooch Bandana doubled its sales after adding live chat and chatbots.

Pooch Bandana doubled its sales after adding live chat and chatbots. Read the full story: How My Dog Accessories Store Doubled Sales with Chatbots (in 7 Days)

Label

A button label is a small text message that a live chat button shows to website visitors. This message can attract the attention of visitors and encourage more people to contact your business.

The Tea Spot, an online tea store, has a super short “Chat 👋” for the label text.

The Tea Spot homepage with live chat button

Tidio live chat buttons have “Chat with us 👋” as a standard greeting. You can leave it as it is, change it, or turn off the label message altogether.

There’s a 25-character limit for the text, so be short and sweet.

Language

Does your website offer multiple languages? Or maybe you receive chat requests in different languages?

Then making a multilingual live chat is the best way to go. Tidio, for example, is available in a number of pre-translated languages including French, Portuguese, German, Italian, Russian, Spanish, and English).

Find the Multilanguage section in Tidio’s Settings. That’s where you set language preferences for your live chat button.

Your desired language isn’t on the pre-translated list?

No worries, you can still use it. Choose a language from the dropdown menu and click “Add,” as shown in the above image.

This setting and all language settings are available in the Multilanguage section in Tidio’s main menu. You can also visit the Multilanguage Chat Help page for more information.

Website Live Chat Button: Summary

A live chat button is the best way to communicate with website visitors, and, ultimately, make more sales. People like live chat because they can connect with customer support quickly, so adding a chat button can improve customer satisfaction with your business.

To install the Tidio live chat button you need to:

Sign up for a free live chat app
Customize the live chat button to match your website’s design
Integrate the live chat button into your website.

And take your customer service to the next level.