How to add a Free Live Chat Widget to Your WordPress Website

How to add a Free Live Chat Widget to Your WordPress Website

Allow your website visitors to instantly chat with your team

UPDATE: Pure Chat, the live chat software, now has its own plugin for WordPress! Check out the plugin page to learn how it can be added to your site in less than a minute.

We have received quite a few enquiries about how to install Pure Chat on WordPress websites, so I decided to create this quick tutorial. This simple step-by-step guide applies to installing Pure Chat’s free widget on your WordPress blog, however if your blog is hosted through, these directions will not apply to you because does not allow access to the template editor.

For those of you that don’t know, Pure Chat is a simple, yet powerful free chatting widget that allows your website visitors to instantly chat with your sales and/or support team.  I won’t go over the features in this tutorial, but you can learn more information by checking out the tour.

Important: When you update WordPress, the changes you make with this tutorial shouldn’t be affected. However, if you decide to change or update your theme, it will overwrite footer.php and you will have to add the Pure Chat javascript code again. Luckily, after the first time, it should only take you a few minutes to do.

This tutorial will use the Pure Chat blog as an example, but these steps should work with any template.

Step 1: Log into your WordPress Admin dashboard. The default login url is /wp-login.php. Once you are logged in, you should see something similar to the image below.

WordPress Dashboard

Step 2: Hover over Appearance in the left-hand menu. This will open up a sub-menu. Click EditorNote: If you don’t see the Editor option, you most likely are using (or another hosting provider), and they currently restrict access to Editor feature.

Word Press Dashboard Appearance

Step 3: You should now be in your theme editor. As you can see below, I am editing the default WordPress theme, Twenty Twelve’ Stylesheet (style.css). The content in the box and in the right menu labeled Templates will be different depending on what theme you are using. However, this doesn’t change what you are going to do. On the right hand menu, you will be looking for the template section named Footer (footer.php). In the image below, it is highlighted by the red box. Click Footer.

WordPress Theme Editor

Step 4: Now, you can see that I am editing the Twenty Twelve: Footer (footer.php). Your footer content will be different, depending on the theme that you are using. However, you will still be looking for the </body> tag. In the image below, you will see a red arrow next to the </body> tag. Go to Step 5.

TIP: No matter what theme you are using, the closing </body> tag will be at the end of all content. Therefore, if your theme has a lot of content in the footer, you might have to scroll to find the </body> tag. If you have to scroll, I suggest scrolling as far down as possible and start looking for the </body> tag from the bottom up. You can also use the browser searching capabilities.

WordPress Footer Editor

Step 5: Now that you’ve found the closing </body> tag, you’ll need to sign up for Pure Chat. It’s 100% free to join, so you’ll be able to start chatting with customers in no time!

Step 6: After you register, click the Let’s Go button to see your installation instructions. On the next page, press the plus sign beside the Add Code To Your Website On Your Own text and copy the Javascript snippet. This code is what you’ll use in the next step.

Step 7: You located the closing </body> code in Step 4. Now paste the javascript code you copied in the last step right BEFORE the closing </body> tag. In the image below, the highlighted content is the javascript code for my Pure Chat widget. You can see that the code is BEFORE the closing </body> tag. To save your changes, press the Update File button.

Word Press Footer Editor

Step 8: You have now installed Pure Chat on your WordPress website. Below is an example of an active chat.

Pure Chat makes it extremely easy to add live chat for WordPress websites. You can add and update your chat widgets right in the Pure Chat dashboard. I hope that this simple tutorial helps you add Pure Chat to your WordPress blog.

Get the latest news on Axosoft and GitKraken, plus valuable tips and stories about software development in your inbox, every 2 weeks.

Agile project management software
Plan, develop, review, and ship fast


The downright luxurious Git client
For Windows, Mac & Linux