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

[UPDATE: Pure Chat, our 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.]

pure-chat-wp

 

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.

  • http://twitter.com/MikoMeltzer Miko Meltzer

    I think it is much easier to add a chat widget that is already hosted.

    This are the 3 best ones RumbleTalk, Clobby or chatboxlight

  • MaNishtana

    how do i add this to the
    Deux Milles Douze child theme? there’s no footer option.

    • Zack Burruel

      The reason why we suggest putting the script in the footer is because it is best practices to load the javascript snippet after the rest of the page’s content. However, that doesn’t mean you couldn’t put it in another section in the theme that loads on every page.

      I am not familiar with the theme you are referring to, but every theme will have a tag at the end of the page. Look for that tag in the various sections. Put the Pure Chat code right above it and you should be good to go.

  • John

    Can you tell me how I would add this to the front page of a site only and not the other pages?

    • Zack Burruel

      Hi John,

      If you are using WordPress, you should be able to insert the javascript code directly into a section of theme that is specifically for the home page. Look in Appearance > Editor for an appropriate section.

      Alternatively, if you have selected a static page as your front page, you should be able to copy-and-paste the Pure Chat javascript code directly into the page by using the “text” option of the page editor. Look in Settings > Reading to see what page you selected to be the front page.

      If you aren’t using WordPress, you would simply copy-and-paste the Pure Chat javascript code only in the pages that you would like it to appear.

      Z

  • Kashif

    Thanks for sharing nice info. I would suggest you to check Banckle Chat (http://banckle.com/apps/chat/overview.html) which is one of the best live chat app with lots of great features.

  • Waleed

    Hi Zack,

    Many thanks for the useful and well-written post. It worked with me nicely. But now, when visitor tries to join the chat, the text on button “Send chat request” is almost invisible. How can we make it in a clearer color, like white?

    • Zack Burruel

      Hi Waleed,

      Try changing the widget theme to “Light”, instead of “Dark”. See instructions below.

      Login to Pure Chat > Click the “Customize Settings” tab > Click the the pencil to edit the widget > Change the “Widget Theme” to “Light”.

      Does that do the trick?

  • Marc Almond

    Hi, there

    Thanks for this post……you have mentioned most important point about live chat software features. Whereby website holder can get connect instantly and easily assist them. Similarly, eAssistance Pro live chat software also works well.

  • Metro Host

    I have done this before with other chap scripts but now….nothing is happening…dunno why??? Please help me…

  • Donna

    Ok I followed the tutorial found the right place updated but when I went to view my site I couldn’t find the chat box anywhere. Why would it not be showing up when I loaded the snippet before the in the footer as shown?

    • Hamid Shojaee

      Be sure to login to the operator console and make yourself available. If you are logged in and available and the widget is not showing up on your web site, then email us at help@purechat.com.

      • Donna

        Thank you working now :)

  • fachrulstream

    this app would very great if have android app.. and keep updated like chat messenger

  • Wendy

    I just followed the instructions to add the widget on a WordPress site; I’m logged in as the operator on the PureChat Operator Console and it does not appear on my site. Was I specifically to go to “twenty twelve” when selecting the theme to edit. I followed the instructions and went there. Did I miss something? Can you help?

    • James

      Hi Wendy!

      You do not have to specifically choose the “Twenty Twelve” them when editing. The install process on WordPress will depend on what theme are using for your site. When editing the theme for your personal site, the same template “footer.php” will be used in Editor to insert the PureChat widget script.

      • Wendy

        Hi James, I tried finding a footer.php but just couldn’t. But while I was waiting for your reply, I read another person’s questions and I ended up installing the Widget, modifying the account settings on the Operator Console and it works great! I have one more question though. How do my operators log into the console? I’m sure it’s quite simple, but if you could let me know, I’d be most appreciative. This is an absolutely wonderful addition to my website. Thank you very much for developing it and offering it for free!

        • James

          Great!

          If you have other operators, you will need to add them in the ‘users’ section of the PureChat dashboard. Click Add User in the top right and enter in the user information for Name, Email, and Role. They will receive an email message saying an account is created and they will be able to login and start taking chats!

  • Dave

    Pls how do I install it on Joomla 3? I cant get through it

  • http://www.unitedgamers.com/ yash1331

    is there any way to create a widget like this in wordpress to let visitors chat with each other instead of chatting with the agent on purechat ??

  • Desi

    Hi, this live chat is awesome!! Thank you so much!
    I simply add the code on Appearance – Widgets – Add Text – Save – Done. And i have no problem with that, till now:)

  • shahanwaz

    All operator can see the others messages,thats the disadvantages

  • shahanwaz

    i want one to one chat for operator and the person who is chatting.

  • shahanwaz

    can any one help,how to do this..
    thanks

  • TheMisterExplorer

    Thanks you so muck!

  • DianeHelbig

    i have searched every aspect of the wp theme i am using and can not find a body tag.
    any other ways to get this in?

  • Mikhail Jon Bortolotto

    too easy… just look for a widget that is in the footer area of your theme and simply click paste the script and save and the widget comes straight up.
    works great on my sites https://www.hostingworx.com.au (WordPress Theme) and http://watchfulrooster.com (Loaded 7 eCommerce).

  • amet

    thanks a ton

  • http://www.mradeveci.com/ Ahmet Deveci

    These instructions don’t seem to work for my theme …. I’ve tried another chat service and it works 1st time?

  • qwerty

    test .. sorry

  • juan

    how I can do to make it visible only to registered users on my website?