Tech Marketing Zone is brought to you in partnership with:

Hamid Shojaee is the founder of Axosoft, a software company that focuses on building tools to help development teams manage their projects and ship great software. Axosoft's flagship program, OnTime, is used by over 8,000 dev teams in 55 countries and has been honored with numerous awards. Hamid is a DZone MVB and is not an employee of DZone and has posted 6 posts at DZone. View Full User Profile

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

02.13.2013
| 2809 views |
  • submit to reddit

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 WordPress.com, these directions will not apply to you because WordPress.com 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.

I created a test blog for this tutorial. It uses the default WordPress template. However, this tutorial should work with any template.

WordPress Test Blog

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 “Editor.” Note: If you don’t see the “Editor” option, you most likely are using WordPress.com (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: Ok, now that you have found the closing </body> tag in the previous step, you need to register for Pure Chat if you haven’t done so already. You can see in the image below that is is extremely easy to register. Not to mention…Pure Chat is FREE and includes an unlimited operators and chat sessions, all with no hidden costs!

Pure Chat Registration

Step 6: After you register, the first thing you will see is the javascript that you need to use in the next step. So, copy the code and go to the next step.

Pure Chat Javascript Code

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 with myself. :-)

step9

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. Please let me know if you have any questions and I will gladly answer them.

Published at DZone with permission of Hamid Shojaee, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)