How to add Facebook Messenger chat widget to your WordPress website

There are many different live chat options available that integrate well with WordPress websites. Some even include chat bot functionalities that can help automate your business processes by answering common questions or completing known actions.

With all these options available, you might be surprised that Facebook allows the option for Business Pages to create a chat widget that they can then install on their website. This allows visitors to message the Facebook page directly without having to navigate back to Facebook itself.

You can also set up Messenger to include automated responses so if you are unable to respond straight away, customers can find the answers they need to common questions immediately.

Is the Messenger Chat Widget the right option?

Although it is considered basic in comparison to some of the other live chat software out there, for many small businesses using the Messenger Chat Widget can be a great starting point to enable customers to be able to send messages to you when browsing your website.

If you already communicate a lot with your customers on Facebook, keeping all your messages within the one platform also probably seems like a good idea. One less thing to manage in our already business lives!

Another benefit is that as Messenger is well known and used by a large number of people who are active on social media, it helps provide your business with another layer of social proof and trust.

You might be thinking “alright, this sounds great – let’s get started already”, but I do need to raise one main issue before we jump into things. Although Facebook Messenger is a free option that is easy to setup on your website (once you follow the steps below), it does need to be acknowledged that there are some limitations to it. It’s definitely not a perfect solution for all scenarios.

The biggest concern is that if you have customers that do not use Facebook, but want to live chat with you to ask questions about a product or service, they will be unable to use the Messenger widget. This would result in what’s called a poor user experience for the customer. It may also mean they end up leaving your website in frustration, and you miss out on a potential sale.

However, if the majority of your website traffic is driven by Facebook, either through organic posts or paid ads, then using the Messenger chat widget might actually be a really good option for you. As the visitors to your website originally came from Facebook, you know they will have access to the widget.

It is a choice that needs to be weighed up against your business needs, the types of customers coming to your website, and often pricing. Having a small number of customers not being able to live chat with you may not be a deal breaker.

Having other options such as a phone number, email address or contact form available on your website is also a good idea, as this will usually provide enough alternative options to a customer who wants to get in touch.

If you have decided that installing the Facebook Chat widget is the best option for your WordPress website, you can follow the steps below to get it set up and start chatting with all your customers right away.

Set up the Chat Widget in Facebook

To get started, you will need to log into Facebook and head to your business page. In the top right hand corner, click on the Settings menu option.

Within the Settings area, navigate to the left hand menu and click on the Messaging tab to open up Messaging settings for your Facebook page.

Scroll down until you get to the section called Add Messenger to your website and click on the Get Started button.

This opens up the Set Up window for the Messenger Chat plugin, which will step you through some of the options to set up and customise your website chat widget. Click on the Next button to proceed.

If needed, change the default language from the drop down box. You can also change the automatic greeting that is displayed when the chat widget is opened. Click the Change button to edit the wording to reflect your business. Once finished, click the Next button to continue.

You can then choose to customise you chat widget colour to match your website branding, or you can choose to keep the default Facebook Messenger colour. Once finished, click the Next button to continue.

Next, add the url for which website the chat widget is going to be displayed on and click the Save button. Leave the option as I’ll install the code myself as the next sections will show you how to install the code snippet on your website. Ensure you copy the script displayed on the right hand side, then click the Finish button to finalise the setup.

Your Messenger chat widget has now been created within Facebook. Time to add it to your website. Click the Done button to close the pop up window.

Install Insert Headers & Footers plugin

To get the widget to display on your WordPress website, you will now need to install the code snippet you copied in the previous step. The easiest way to set this up is by using a plugin. Login to your website and within the dashboard area, navigate to Plugins > Add New in the side menu.

There are a few options to choose from, but we recommend Insert Headers and Footers plugin. If you type the name in the search box, it will be one of the top results. Click on the Install Now button and once that has finished, click on the Activate button.

You will then need to navigate to the Insert Headers and Footers settings area. Go to Settings in the dashboard side menu, and then select Insert Headers and Footers in the fly-out submenu.

Add the Chat Widget code snippet

Scroll down the the section called “Scripts in Body” and paste the copied code snippet from Facebook into this area. Click the Save button. The code is now added to your website! Hurrah!

To check that it is working, navigate to your home page and you should see the chat plugin display in the bottom right hand corner.