How to Make a Chatbot [Easy Ways to Create Chatbots for Free]

10 Best WordPress Chatbot Plugins for Your Website in 2021

What do a website live chat and a transatlantic telegraph cable have in common?



Two minutes.



The telegraph slashed the time it took a message to cross the Atlantic from 10 days down to two minutes. The live chat did the same for customer service average response time—from 17 hours to two minutes.



And you’re about to learn how to add a live chat to your website… in two minutes tops!



In this guide:



<ul><li>Is it worth adding live chat to a website in the first place?</li><li>How to integrate a chat into a website in four easy steps.</li><li>Guides to embedding live chat on popular website platforms.</li></ul>



<div class="blk-cta blk-cta-chat">
 <div class="body">
 <div class="content">
 <h3>Turn your website visitors into delighted customers.</h3>
 Set up the Tidio live chat app in 5 minutes and watch your sales grow.
 </div>
 <a href="https://www.tidio.com/live-chat/" target="_self" data-tracking-name="Chat-In-Post-cta">Learn About Live Chat</a>
 </div>
</div>



If you need more information on the live chat functionality, have a look at our other guides:



<ul><li><a href="https://www.tidio.com/blog/what-is-live-chat/">What Is Live Chat? How Your Business Can Benefit From Live Chat</a></li><li><a href="https://www.tidio.com/blog/eight-ways-to-boost-your-ecommerce-conversion-rate-with-live-chat/">8 Ways to Increase Your eCommerce Conversion Rate with Live Chat</a></li><li><a href="https://www.tidio.com/blog/shopify-live-chat/">Add Shopify Live Chat to Your Store in 3 Minutes</a></li></ul>



First things first—



If you’re still asking yourself “Do I need a live chat for my website?” the answer is simple:



It depends.



If you care about fast customer service, high customer satisfaction rates, and boosting your sales, you should embed chat in your website. Here’s a couple of good reasons:



<ul><li>Over <a href="https://www.sciencedirect.com/science/article/abs/pii/S0747563217304727">85% of customers</a> admit their waiting time is “appropriate” when using a chat service.</li><li>About <a href="https://www.comm100.com/resources/report/2019-live-chat-benchmark-report/">83% of customers</a> are satisfied with live chat when communicating with businesses.</li><li>Conversion rates can <a href="https://onlinelibrary.wiley.com/doi/abs/10.1111/poms.13320">increase by 9%</a> for retailers that add a chat box to their business websites.</li></ul>



<figure class="wp-block-image size-large with-logo"><img loading="lazy" width="1200" height="802" src="https://www.tidio.com/wp-content/uploads/statistics-about-websites-with-live-chat-1200x802.png" alt="Statistics about the impact of adding live chat and website conversion rates" class="wp-image-25312" srcset="https://www.tidio.com/wp-content/uploads/statistics-about-websites-with-live-chat-1200x802.png 1200w, https://www.tidio.com/wp-content/uploads/statistics-about-websites-with-live-chat-800x535.png 800w, https://www.tidio.com/wp-content/uploads/statistics-about-websites-with-live-chat-768x513.png 768w, https://www.tidio.com/wp-content/uploads/statistics-about-websites-with-live-chat.png 1400w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



But remember—&nbsp;



Achieving such results requires commitment. Live chat won’t magically turn your customers into superfans overnight. Unless you get Lionel Richie as a live chat support agent. You know, Hello, is it me you’re looking for? 😉



With that in mind, let’s move on to adding a chat to your website.



<h2 class="scrollSpy" id="all">1. Get a Free Tidio Account</h2>



To add a chat to a website, well… you need help from an app.



We’ll illustrate all the steps using our own free app. After all, it’s the ease of use and simplicity of installation that earned us a <a href="https://www.capterra.com/p/144040/Tidio-Chat/#reviews">4.8 rating</a> (out of 5) on G2, among others.



So—



To add a live chat to your website for free, <a href="https://www.tidio.com/panel/register">go to the registration page</a>.



Tidio offers several registration options: via email, Facebook, Shopify, and Wix.&nbsp;



<figure class="wp-block-image size-large"><img loading="lazy" width="1200" height="607" src="https://www.tidio.com/wp-content/uploads/registration-tidio-1200x607.png" alt="Live chat registration page" class="wp-image-25310" srcset="https://www.tidio.com/wp-content/uploads/registration-tidio-1200x607.png 1200w, https://www.tidio.com/wp-content/uploads/registration-tidio-800x405.png 800w, https://www.tidio.com/wp-content/uploads/registration-tidio-768x388.png 768w, https://www.tidio.com/wp-content/uploads/registration-tidio.png 1400w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



Once you make a choice, you can create login details and add your website in this window.



<figure class="wp-block-image size-large"><img loading="lazy" width="1200" height="607" src="https://www.tidio.com/wp-content/uploads/add-chat-to-website-with-email-tidio-1200x607.png" alt="Creating free account to install a live chat widget on a website" class="wp-image-25304" srcset="https://www.tidio.com/wp-content/uploads/add-chat-to-website-with-email-tidio-1200x607.png 1200w, https://www.tidio.com/wp-content/uploads/add-chat-to-website-with-email-tidio-800x405.png 800w, https://www.tidio.com/wp-content/uploads/add-chat-to-website-with-email-tidio-768x388.png 768w, https://www.tidio.com/wp-content/uploads/add-chat-to-website-with-email-tidio.png 1400w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



Note: The registration doesn’t automatically add a live chat feature to your website. Tidio will offer you to customize the chat box first.



<h2>2. Personalize Your Live Chat Widget</h2>



Once you enter the login and website details, Tidio will walk you through a series of quick customization steps.



This is to make sure the live chat widget matches the style of your business website and the user experience is consistent.



First, choose a name and your widget color. Click Continue once you’re done.



<figure class="wp-block-image size-large"><img loading="lazy" width="1200" height="557" src="https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-1-1200x557.png" alt="Live chat widget configuration" class="wp-image-25305" srcset="https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-1-1200x557.png 1200w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-1-800x371.png 800w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-1-768x357.png 768w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-1.png 1400w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



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



<figure class="wp-block-image size-large"><img loading="lazy" width="1200" height="535" src="https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-2-1200x535.png" alt="Setting up live chat account information" class="wp-image-25306" srcset="https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-2-1200x535.png 1200w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-2-800x357.png 800w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-2-768x342.png 768w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-2.png 1400w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



Then, <a href="https://www.tidio.com/blog/welcome-message/">set up the welcome message for your website visitors</a>.



It’s an automatic message that the live chat chatbot displays to new visitors. So, your potential customers will see this message when they go to your website.



The setup wizard offers two options for starters: a discount code and a greeting.



<figure class="wp-block-image size-large"><img loading="lazy" width="1200" height="492" src="https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-3-1200x492.png" alt="Selecting welcome message" class="wp-image-25307" srcset="https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-3-1200x492.png 1200w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-3-800x328.png 800w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-3-768x315.png 768w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-3.png 1400w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



Choose whatever you like here—you can later on personalize it or change it entirely.&nbsp;



If you’re running an online store, consider using the discount message. Retail studies show that <a href="https://retailmenot.mediaroom.com/2018-04-25-RetailMeNot-Survey-Deals-and-Promotional-Offers-Drive-Incremental-Purchases-Online-Especially-Among-Millennial-Buyers">67% of customers</a> make purchases just because they found a discount. So, many customers visiting your business might also decide to take advantage of that.



<h2>3. Integrate Chat Into Your Website</h2>



The final step boils down to adding a JavaScript code snippet to an HTML website.



There are two ways to integrate a chat into a website with a simple HTML code snippet. You can:



<ul><li>Do it yourself if you have access to source code</li><li>Send instructions to your developer to do it for you</li></ul>



<figure class="wp-block-image size-large"><img loading="lazy" width="1200" height="545" src="https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-4-1200x545.png" alt="How to integrate live chat code " class="wp-image-25308" srcset="https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-4-1200x545.png 1200w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-4-800x363.png 800w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-4-768x349.png 768w, https://www.tidio.com/wp-content/uploads/how-to-add-live-chat-to-website-step-4.png 1400w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



If you decide to do it yourself, click the “Show me the code!” button to view instructions, and Tidio will show you a list of website platforms.



Choose the platform your website is built on. For example, if you’re using Shopify, the instructions for adding the code will look like this:



<figure class="wp-block-image size-large"><img loading="lazy" width="1200" height="549" src="https://www.tidio.com/wp-content/uploads/tidio-tour-step-4-code-1200x549.png" alt="Installing live chat code on a website part one" class="wp-image-25313" srcset="https://www.tidio.com/wp-content/uploads/tidio-tour-step-4-code-1200x549.png 1200w, https://www.tidio.com/wp-content/uploads/tidio-tour-step-4-code-800x366.png 800w, https://www.tidio.com/wp-content/uploads/tidio-tour-step-4-code-768x351.png 768w, https://www.tidio.com/wp-content/uploads/tidio-tour-step-4-code.png 1400w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



Now copy the code and follow the instructions.



All you need to do is log in to your panel, go to Themes, and edit code in theme.liquid file. Here’s how adding the code inside that file looks like.



<figure class="wp-block-image size-large"><img loading="lazy" width="1200" height="646" src="https://www.tidio.com/wp-content/uploads/how-to-install-live-chat-code-1200x646.png" alt="Installing live chat code on a website part two" class="wp-image-25309" srcset="https://www.tidio.com/wp-content/uploads/how-to-install-live-chat-code-1200x646.png 1200w, https://www.tidio.com/wp-content/uploads/how-to-install-live-chat-code-800x431.png 800w, https://www.tidio.com/wp-content/uploads/how-to-install-live-chat-code-768x414.png 768w, https://www.tidio.com/wp-content/uploads/how-to-install-live-chat-code.png 1400w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



But hey—



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



You can embed the <a href="https://www.tidio.com/blog/free-live-chat/">free live chat</a> later because the code will always be available inside Tidio’s dashboard. So, just log in to Tidio whenever you need to view it (or contact <a href="mailto:support@tidio.net">support@tidio.net</a> if you need any help).



This detailed <a href="https://www.tidio.com/knowledge/getting-started/how-to-install-chat-on-your-website/">knowledge base article on adding live chat</a> will also be helpful for new live chat users.



<h2>4. Learn How to Make the Most of Your Website Live Chat</h2>



At the very end of the installation process, you’ll end up in the dashboard. It’s where you can chat with website visitors, provide support, generate leads, or explore analytics data.



<figure class="wp-block-image size-large"><img loading="lazy" width="1200" height="557" src="https://www.tidio.com/wp-content/uploads/setting-up-chat-panel-1200x557.png" alt="How to access the live chat panel" class="wp-image-25311" srcset="https://www.tidio.com/wp-content/uploads/setting-up-chat-panel-1200x557.png 1200w, https://www.tidio.com/wp-content/uploads/setting-up-chat-panel-800x371.png 800w, https://www.tidio.com/wp-content/uploads/setting-up-chat-panel-768x357.png 768w, https://www.tidio.com/wp-content/uploads/setting-up-chat-panel.png 1400w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



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 visitors on your web page in real time, so you can try messaging them proactively!



Also, check out the blue bullet points at the very center of the dashboard. It’s a handy to-do list with tasks to make sure you don’t miss any customer requests. Complete that, and you’ll be ready to provide support and help with everything live chat has to offer.



If you install the live chat mobile app, you’ll get notifications about conversation requests or visitors. The <a href="https://www.tidio.com/blog/best-live-chat-software/">best live chat software apps</a> have free mobile apps to allow you to respond to more customer requests even on the go.



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



Congratulations!&nbsp;



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.



<h2 class="scrollSpy" id="platforms">Adding Live Chat to Different Website Platforms</h2>



You can easily add live chat to your website regardless of the platform you’re using. <a href="https://www.tidio.com/integrations/">Tidio’s free chat integrates with a variety of platforms</a>.



We’ve got you covered if you’re a Shopify store owner looking to add a chat box for the support team or if you have a Wix- or WordPress-powered web design agency website. And anything in between.



Have a look at our step-by-step tutorials about adding chat to common website platforms for free:



<ul><li><a href="https://www.tidio.com/knowledge/getting-started/weebly-installation-guide/">How to Add a Live Chat Widget to a Weebly Website</a></li><li><a href="https://www.tidio.com/knowledge/getting-started/shopify-installation-guide/">How to Install a Live Chat on Shopify</a></li><li><a href="https://www.tidio.com/knowledge/getting-started/wix-installation-guide/">How to Add a Live Chat Widget to a Wix Website</a></li><li><a href="https://www.tidio.com/knowledge/getting-started/wordpress-installation-guide/">How to Add a Live Chat Plugin to a WordPress Website</a></li><li><a href="https://www.tidio.com/knowledge/getting-started/magento-installation-guide/">How to Add a Chat to a Magento Store</a></li></ul>



<h2>Key Points</h2>



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!



Here’s how you can quickly add a live chat to your website for free:



<ol><li>Get a free Tidio live chat account.</li><li>Customize the look of your live chat widget.</li><li>Paste the live chat code snippet into your website.</li></ol>



And learn how to use live chat to the fullest. Give it a go, and you’ll see the incredible difference between live chat and other customer support tools immediately.



<a tracking="Button Below Article" id="blog-cta" data-cta-button-position="after-article-global" data-cta-button-name="live_chat_landing_new_register_section" href="https://www.tidio.com/live-chat/#register" class="button button--color__primary-blue button--size__normal button--position__center button--size__normal button--push__top-40">
Try Live Chat For Free
</a>

How to add live chat to a website - cover art

Blog

Featured

How to Make a Chatbot [Easy Ways to Create Chatbots for Free]

10 Best WordPress Chatbot Plugins for Your Website in 2021

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

Latest articles

Microchip Implants or an LED Tattoo? Which Cybernetic Enhancements Should I Put In My Body?

30 Best Free WordPress Themes for 2022 [Blogs & More]

Customer Service Manager [Job Description, Skills, More]

50 Best Free Minimalist WordPress Themes [2021]

16 Customer Retention Software Tools to Reduce Churn

Customer Communication: 6 Effective Strategies [+Tips]

12 Crucial Customer Success Metrics & KPIs [2021]

AI in Education: Will Tech Destroy Education or Save It?

8 Business Ideas for College Students [+How to Start]

What Is Customer Loyalty? [Definition, Tips & Examples]

6 Apology Letters to Customers [Examples + Writing Tips]

Retail Customer Service [Tips, Skills & Examples]