How to Add Live Chat to Your Website for Free [4 Easy Steps] – Tidio

You have a company and a website.

And now you want to level up your business with an embedded live chat and slash your customer service response time from 17 hours to two minutes. But how to add one to your site?

You’re at the right place.

With us, you will learn how to add chat to a website in a few easy steps. This way, you can quickly start enjoying all its benefits.

To add chat to a website follow these steps:

1. Sign up for a free account
2. Customize the widget
3. Install chat on your website
4. Set up opening hours
5. Install mobile and desktop apps
6. Integrate third-party platforms
7. Import contacts
8. Personalize the messages

Before we dive in, here are different tools, divided by categories, that businesses use for adding live chat functionality to their website:

• 16 Best Live Chat Software & Services Compared
• 13+ Top Free Live Chat Software Tools in 2022
• 10 Best Shopify Live Chat Apps in 2022

Let’s first look at some of the benefits that make embedding chat onto your website worth the effort.

Benefits of adding live chat to a website include:

• About 85% of customers are satisfied with live chat when communicating with businesses which can improve the overall customer experience
• A study shows that website visitors who chat with a business are about three times more likely to convert than those who don’t. This will help you increase your conversion rates. Also, they tend to spend around 10-15% more than customers who didn’t use live chat
• About 79% of businesses say that live chat has a positive effect on their revenue, sales, and customer loyalty

Now we can start to we tackle the “how to add live chat to a website” instructions.

To get the most out of this guide, open your website and Tidio register page. This way, you can follow along with the steps in real-time.

We’ll illustrate all the steps using our own free app. After all, users on G2 mention the ease of use and simplicity of the chat box installation as one of our perks that earned Tidio a 4.7/5 ⭐️ rating.

Okay—

Let’s learn how to add live chat to your website.

Step 1. Get a free Tidio account

Go to Tidio sign up page and register for a forever free account. You’ll get a 14-day trial of premium features and after that period passes, you’ll still be able to keep using Tidio basic features for free for however long you want.

All you need to sign up is an email address and a password for your account. Alternatively, you can also use your Facebook, Shopify, or Wix account.

It’s that easy!

Step 2. Customize the look of your chat widget

Once you log in to your free account, Tidio will walk you through a series of quick customization steps.

This will ensure the live chat icon matches the style of your business website and the user experience is consistent.

First, choose a name and your live chat widget color. There are five colors on display, but you can select any color and shade you like by clicking on three dots to reveal the palette. You can also pick your website chat language on this page as there are over 140 languages to choose from.

Click Continue once you’re done.

Next, add the company info, choose your country and industry. Your answers will help the app make relevant suggestions for live chat options.

Then, choose if you want to set up the welcome message for your website visitors or give them a discount upon their first visit. It’s an automatic message that the live chat chatbot displays to new visitors. This will be the first message your potential customers see when they go to your website.

If you’re running an online store, consider using the discount message. Retail studies show that 67% of customers make purchases just because they found a discount. So, many customers visiting your business might also decide to take advantage of that.

Now—let’s finally add the chat to your website.

Step 3. Integrate chat into your website

You can do this in two ways. The first is to add a live chat code by pasting the code in your website’s HTML source. The second is to download a plugin or an app through your content management system (CMS), like WordPress or Shopify.

Let’s explore both ways in more detail, shall we?

Use code to add chat to your website

This step boils down to adding a JavaScript code snippet to an HTML website. And it’s not as complicated as it sounds. Promise.

All you need to do is click Show me the code and copy it. Once you copy the code to your clipboard, open the main HTML file (usually index.html) on your website’s backend.

Find the file with the </body> tag and add the JavaScript code above the closing </body> tag of your website’s source code.

And if you want to add the code to your website later on, you can find it under your Settings in the Installation tab.

Remember to save the changes!

To check the result, go to your website and see if your Tidio chat widget is visible there.

But hey—

If you’re not ready to add the code yet, no worries.

You can embed the free live chat later because the code will always be available inside your dashboard. All you need to do is log in to Tidio whenever you need to view it (or contact [email protected] if you need any help).

Suggested readingCheck out this detailed explanation on installing Tidio via JavaScript code on your website.

Add chat through your CMS

You can also choose to add chat to your website through the platform your site is built on.

If you’re using Shopify, you can add a free live chat to your website in a few clicks.

• Go onto your Shopify App store
• Search Tidio, or a more general query “live chat”
• Pick the right app
• Click Add to site

And there you have it! Now you can log into your account and start configuring your web chat window.

If you have a WordPress website, check out this short video tutorial:

Do you have one of the other content management systems or want to discover a more detailed tutorial? Then check out these to learn how to:

• Add Tidio to your WordPress site
• Add Tidio to your Shopify site
• Add Tidio to your Wix site
• Add Tidio to your BigCommerce site
• Add Tidio to your SquareSpace site
• Add Tidio to your Magento site

By now, you know how to add live chat to your website. The rest of the steps are optional, but they will ensure your chat is more personalized to your company’s needs, and you use more of the best live chat functionalities.

Step 4. Set up operating hours

Your website visitors need to know when your support agents are available to answer buyers’ questions. To save them frustration and yourself a lost sale, you should set up operating hours for your live chat.

You can do it in just three clicks

• Go onto your Settings tab
• Choose Operating hours
• Click the toggle switch to enable operating hours

Now you can change the times depending on your business working hours. But can you still be there for your customers when you’re not at your desk?

Yes, you can. All you need to do is get a mobile app!

Step 5. Install mobile app and desktop app

One of the handy live chat features is being able to answer inquiries on the go. That’s why, when you add chat to your website, you and your team members should also download the mobile and desktop app to make communication with clients easier.

You can answer customer questions, view visitors’ lists, and update their information straight from the mobile app. This way, you and your support team don’t need to be at a desk all day long to when a client requests support. To install the app, you need Android 4.1 and higher or iOS 9.0 and higher.

The desktop app is useful for when you don’t want to have the browser open, but you still want to give a helping hand to customers. You can get notifications from those who have questions about your products and services on your desktop with the browser closed. You can download the app on macOS and Windows computers.

Suggested readingLearn from our knowledge base how to download the Tidio mobile and desktop apps for your Windows and macOS devices.

Step 6. Integrate email, Messenger, and Instagram

It’s useful to take advantage of the integrations that your chat vendor provides.

Some of the most useful ones are email, Facebook Messenger, Instagram, and a CRM system. So, integrate these with your live chat for better customer support results and increased customer satisfaction.

Connecting your email can help you with your email marketing campaigns and keep track of all your leads. Integrating Messenger can enable your chat agents to communicate with clients on your Facebook page as well as on your website. And when you connect your Instagram you will be able to reply to your subscribers’ reactions to your Instagram stories.

Also, your support team can take care of all the customer communication from one dashboard. Isn’t it handy?

Yes, it is. But you’re missing one thing on your dashboard to start interacting with your leads. You need contacts there. Let’s learn how to import your existing contacts into this chat platform.

Step 7. Import contacts

Prepare the data before uploading it into your account. Organize the information by placing them in separate columns in Google Sheets with a proper header.

Some of the information you should include in your document:

• Name
• Surname
• Email address
• Country
• Phone number

Once you prepare your data, save it as a CSV file. You can upload this document in the Contacts section on the left-hand side of your admin page. Click on Import from file button and a new panel will pop up. There you can drag and drop the document into the window.

You will then have to match your data with the right attributes from the contact list. Click on the drop-down menu under the Contact attribute column and choose the right attribute from the list. Once you’re finished, confirm mapping under the columns.

To finalize the import, you will need to choose whether or not you want to update the existing contacts. Both options will import your new contacts into your contacts list.

Finally, you will need to confirm that all the new contacts have given you permission to contact them. After you’re done, your sales team will have a comprehensive list of leads.

Suggested readingRead a detailed guide on how to import new contacts into your Tidio account.

Step 8. Personalize the messages

Last, but not least—you should customize the message your customers see before clicking on the chat bubble. Make it clear your support team is there to help the visitor out if they have any questions or other inquiries.

You can do this in Settings on the Appearance page. On top of that, you can also change the online and offline status and modify the offline message to the clients who visit your page after hours. You can personalize all of them and then scroll down.

Click on Get Started to reveal more fields.

Now that you know how to integrate live chat into your website and have the basics set up, you can start exploring your dashboard and the rest of the app’s functionalities.

The vertical dark stripe on the left is the main menu. Click around to explore all the live chat tools at your disposal. Get this: one of them will even show the site visitors on your web page in real-time, so you can try messaging them proactively!

Ok, at this point, there’s only one thing left to say—

Congratulations!

You’ve joined the club of ecommerce businesses whose customer response times are super fast in comparison to email and social media. Now’s the time for that live chat support commitment to make a difference.

Check out this 4-minute video on how to get started with Tidio chat:

Key takeaway

Live chat isn’t just a new thing in online business. It’s also a major competitive advantage you can put to use quickly. Yet, many websites and small businesses don’t know how to use this free customer communication tool. It means one thing: there’s a huge opportunity there!

Let’s review the steps really quickly. To add a chat to a website:

• Step 1: Get a free account
• Step 2: Customize the widget
• Step 3: Integrate chat into your website
• Step 4: Set up operating hours
• Step 5: Install mobile and desktop app
• Step 6: Integrate third-party integrations
• Step 7: Import contacts
• Step 8: Personalize the messages

Now you know how to add live chat to your website. Go ahead and personalize it, so it matches your brand better. You can also start setting up chatbots to automate chat services.

FAQs