Earlier this week, I added a new feature to two of my WordPress websites. The Facebook Customer Chat widget plugin. In this tutorial post and video, I’ll show you how you can do the same.
A great way to improve communication with your website visitors and potential customers is to use a customer chat plugin. The problem is that a lot of these chat tools can either be costly and time-consuming to integrate into your website.
Thankfully, Facebook has a fantastic customer chat feature that you can use, and the great thing is that it’s completely free!
Ways to install Facebook customer chat
There are two ways you can add the Facebook customer chat into your WordPress website.
The first method is to use the dedicated WP plugin that is available from the repository here. The only problem I found with using this plugin is that it doesn’t work as it should! Perhaps you might have better luck, though.
The second and more reliable method is to install the plugin script, from Facebook, into your website manually yourself. So let’s get to it, shall we?
If you wish to skip this written tutorial altogether, just scroll down to the bottom of the post and watch the video tutorial I created instead.
Getting started
Go to the Facebook business page for your website and on the homepage click on Settings in the top right-hand corner.
Next, click on the Messenger Platform link in the left hand column.
Now click on the Customer Chat plugin link under Sections to get started.
Next find the customer chat plugin Set Up button and click on it to launch the installation process.
OK, now you’re ready to start. Simply click Next to continue…
Customizing your chat widget
On the next tab you can change the Greeting message that your visitors will see in the chat widget. I recommend tailoring this for your type of audience. Once you’re done crafting your greeting message, click Next.
Next you can use some Custom Colours to match your brand or website. Simply add the HEX colour code from your website. If you choose to do this just make sure it is a stand-out colour. Once you’re done, click Next.
Installing the code
OK, now add the domain(s)n into the domain field which the customer chat plugin will be displayed. This is, of course, your website’s address. Don’t forget to hit Save.
Then make sure the option for “I’ll install the code myself” is checked, unless you want to send the code to your developer, then you can select that option.
Finally, copy the entire code snippet and paste it into your WordPress website. If you’re using a child theme like Genesis, you can add this to Genesis > Theme Settings > Header/Footer Scripts > Footer Scripts.
If you’re using a theme or template that doesn’t have the option to add custom scripts, you can install a plugin called Insert Headers and Footers, which you can find here.
That’s it, you are done! Just make sure to flush out the Cache plugin, if you’re using one, and refresh your live site to check that the chat feature is actually working.
Video tutorial
Of course, you can always watch the video tutorial below.
So, there you go! A simple way to install the Facebook customer chat plugin into your WordPress site, without using a plugin, and without pulling your hair out with frustration. Enjoy.