Live Chat

How to Add Live Chat to Your Website: 3 Easy Ways

A few simple step-by-step methods of adding a chat to a website. You will learn how to install a free live chat app fast and connect with your website visitors.

People visit your website for many reasons. To buy, to browse, or to ask about something. To do business with you this way or another.

You most likely already know what a live chat is and that it can help your customers and your business. So you decided to add a chat to your website and now you need to know how to do it.

You came to the right place. This article will guide you through various methods of adding live chat to your website.

Step 1: Add a chat plugin to your website to connect with your visitors.

Step 2: Answer question and talk to your customers in real time.

Step 3: Close more sales and track how live chat helps your business.

Free Live Chat

Once you’re done, you can start chatting with your customers and prospects immediately.

What you are going to learn:

  1. How to Add Chat to Website
  2. How to Customize Your Live Chat Widget
  3. How to Add Embedded Chat Box on Website
  4. How Do I Add Facebook Live Chat to My Website?
  5. Why You Should Add Live Chat to Your Website

Ready? Ok, let’s get started!

How to Add Live Chat to Website

To add a chat to a website, you can choose from two methods: via a code snippet or plugin. A diagram below sums them up. 

A diagram showing the best ways to add live chat to a website

There is also a third method. Very flexible and works for all websites (and not only websites!). But we’ll get to it in a moment.

#1 Adding Chat Widget to Any Website

This method works for all websites. To install a live chat, you need to add one line of code to your website code. 

Let’s do this step by step:

Step 1: Go to Tidio registration site to create your free account.

👉 Click Here to Go to Tidio Registration Page Now 👈

Step 2: Complete the initial setup tour:

  • configure your live chat
  • add account information
  • choose your first chatbot

You can change all the settings from the tour later. So don’t worry too much about being perfect in this step.

Step 3: Integrate live chat into your website

  • add the code snippet to your website
Installation code for adding live chat to a website

Add the code snippet above the closing </body> tag of your website’s source code. Remember to save the changes! Or, send this piece of code to someone who can add chat to a website for you. 

Pro-Tip #1: Not ready to fiddle with the code part yet? No problem! The snippet will be always available inside your admin panel. So you can add live chat to your website whenever you want.

Look for the snippet in CHANNELS > Live Chat > Integration.

Channels section inside the admin panel that help to integrate chat

And as far as the installation goes… That’s it! If you want to learn about two other two methods, read on. Otherwise, skip to the chat widget customization part.

#2 Adding Chat Widget: Plugin Method

Have you built your website with Shopify or WordPress? Then you can use a dedicated chat plugin.

If you go to the Integration section, you’ll see, among others, options for WP and Shopify.

Add WordPress and Shopify chat with a plugin

Click “Shopify” or “WordPress” and follow the instructions. You can also read our tutorials if you need detailed guidance.

🚀 Read: WordPress installation guide

🚀 Read: Shopify installation guide

Pro-Tip #2: Are you using a different platform? Take a look at our integration list to find the right guide.

How to Customize Your Live Chat Widget

Live chat is part of your website.  It is important that the look of the chat box matches your website. So go ahead and tweak its look the way you want!

Go to CHANNELS > Live chat > Appearance. Here, you can play with:

  • the Background Color (solid or gradient) or Text Color (dark or light)
  • the Widget Position (left or right)
  • the Offline Message (the message your visitors will see when you go offline)

Pro-Tip #3: You can test all the visual changes by using the widget on the right. Click the Preview button below the chat box to select the option you want to test.

Live chat widget preview options

Test all the options to get the results you would be happy with. If you find some features not clear, please check out our tutorial: How to Customize Your Chat Widget.

live chat plugin customization

Now, we’re going to show you a very interesting way in which you can add chat to your website. It’s not an installation, but still a great way of having a live chat!

How to Add Embedded Chat Box on Website

Let’s start by explaining what a chat page is. As the name suggests, it’s a page where the chat box is located.  It’s a separate page with its own URL address.

What’s so useful about it? You can add a chat page URL anywhere you want! 

  • You can add it to the email footer as a link or button. 
  • Link it on any page or pages, e.g. on “Contact Us.”

This way, your customers can open it and start chatting with you immediately. Even if they are not present on your company website.

Take a look at the screenshot. This is what the chat page looks like.

Chat embedded in a website

You already know that you can customize the look of a chat widget. Similarly, you can customize the look of a chat page, too. 

  • Choose the background color, add your company logo and URL. 
  • Personalize the header and welcome message. 
  • Write some good meta title and meta description for SEO.

To get your unique chat page URL, go to CHANNELS > Chat Page. 

Chat page code snippet

Finally, you can add Facebook live chat to your website. And here’s the kicker: you won’t be using FB Messenger on your website at all!

How Do I Add Facebook Live Chat to My Website?

Do you have a business page on Facebook? If you do, then you might want to integrate live chat with Messenger. This way, you will be able to chat with your FB visitors via a live chat.

  • Go to CHANNELS > Messenger.
  • Click Connect your Facebook account.
  • A popup window will appear. Enter your FB login details.
  • Next, choose the business page you want to connect with live chat

Please keep in mind, that you can connect one FB business page with one Tidio project.

  • Leave all permissions switched on.
  • Click Done.
  • Go back to CHANNELS > Messenger and click the Save changes button.
Website Messenger chat integration

From now on, you can reply to all the messages from Messenger from the live chat admin panel. 

Why You Should Add Live Chat to Your Website

The technical part is over. If you completed it, then you have a beautiful chat widget on your website. But what is more important, you and your customers can chat with each other. 

With live chat, you will cut your customers’ wait times – by a lot. Faster response times will improve customer experience and satisfaction.

You will also be able to see who’s browsing your website and what pages your customers are on. This gives you an opportunity to start chats with potential buyers.

Click HERE or tap the image below to see how Vivian from NOTIQ uses live chat on her website to talk with visitors and sell more 👇

The benefits of adding chat to website

You can also use live chat to generate leads. It works when you are online or offline. 

Remember, that when you are away, you can put chatbots on duty. They will continue helping your customers or collect valuable data.

This, and more, can be yours. For free. Register today and discover all the live chat features yourself.

Try Live Chat For Free
Agnieszka Sienkiewicz

Aggie is a content writer at Tidio. She writes about customer service, eCommerce tools, and marketing to help online entrepreneurs take their business to the next level.

Similar articles

Customer Service
Best Intercom Alternatives for SMBs: Top Customer Messaging Platforms in 2020
Live Chat
Add Shopify Live Chat to Your Store in 3 Minutes
Live Chat
The Best Live Chat Software in 2020