How to Add Facebook Chat to a WordPress Site

As multichannel becomes omnichannel, solutions like the Facebook Chat plugin for WordPress sites are changing the way that brands communicate with their customers. 

In this how-to guide, we’ll take a look at WordPress and Facebook’s own help guides to explore how to integrate Facebook Chat on your WordPress site so that you can keep in touch with customers in a way that works for them. (And at the end of the article, we’ll talk about how Smith.ai’s live chat agents can handle it all for you so you don’t have to worry about Messenger at all.)

Today’s audience wants personalized communication, and they love the ability to connect with brands on social media. According to the most recent reports, more than 4 billion people are using social media around the world. Not only that but of those that are communicating with businesses:

• About 35% of customers preferred using social media to contact a business in 2019
• As of 2021, that number is closer to 65%
• Now that Messenger is a separate app, customers love brands that have an integrated Facebook Chat plugin 
• Customers feel more of a personal connection and dedicated resolution using social media 

So, now that you understand a little more about the importance of offering this solution to your own audience, let’s dig into how it works for WordPress so that you can get started integrating and communicating with your customers where they are.

The Facebook Chat plugin                                      

• WordPress has a dedicated Live Chat Plugin for Facebook.
• The plugin allows chats to transition seamlessly from your website to the Messenger app, ensuring nothing gets lost in translation. 
• Guest Mode ensures all customers can reach you via Facebook Chat, even if they don’t have a Messenger account. 
• Features include auto-replies, FAQ, and availability scheduling, among others. 
• Only page administrators can enable the Messenger plugin on WordPress sites
  

The Facebook Chat Plugin for WordPress is an open-source tool, which has been contributed to by Facebook and WordPress alike, along with the Facebook Developer Community that offers resources and support for users along the way. 

The only thing you need to get started is a published Facebook Page, and to be logged into said page on your computer (or whatever device you’re using). Using a snippet of JavaScript code, WordPress will launch a Messenger plugin that loads as a bubble in the lower right corner of your website, as pictured here:

The plugin supports all modern desktop and mobile browsers, except Internet Explorer and Messenger in-app browsers. It also automatically loads your recent chat history between customers and your business, which means that all communications across Messenger.com, the Messenger app, or via your website directly will be right there, in one place, for a streamlined conversation so you don’t miss a beat. 

The installation process

According to WordPress.org, installing this plugin requires WordPress version 3.9 or newer, as well as PHP version 5.2.4 or higher. Once you’re logged into your Facebook account, follow these steps:

1. Log in to your WordPress dashboard 
2. Navigate over to the Plug-ins menu on the page and click the “Add New” button
3. Using the search feature, type in “Facebook Chat Plugin” and hit search
4. Be sure to select the plugin that is authorized by Facebook
5. Click “Install Now”
   

First use configuration

First, you’ll want to navigate to the Chat Plugin settings page, where you can click on the ‘Setup Customer Chat’ button. That will populate a new window where you will select the Facebook Page that you want to connect to the plugin. 

The next step will allow you to select the language and customize your greeting message (the default is set to “Hi! How can we help you?”). You’ll then be directed to a screen to select a response time, which allows customers to know how long it will take to get a response. You can also choose the color of the chat for a fun custom touch. 

Next, you’ll click ‘Finish’ to save all the settings and then click ‘Done’ to close the window. The plugin should now be installed and ready to use. You will also have the option to rerun setup by clicking on the ‘Edit Customer Chat’ button, as well as to remove it by deactivating and uninstalling the plugin. 

Developer options

The Facebook for WordPress integration helps save a lot of time and effort, but it’s not for everyone. If you want to skip the setup tool and use Developer steps, you can customize the integration exactly the way that you want. Facebook for Developers offers a full explanation of how to do this, but it involves two main steps, which we’ll cover briefly below.

Safelisting your domain 

The first thing to do is to safelist your domain. You can do this programmatically, or you can do it via the Page settings. Simply click “Settings”, then click “Advanced Messaging” and edit the safelisted domains that your page has in the appropriate section. 

Including the plugin code in your HTML

The other option here is to just add the code to your website using a div in the HTML, which looks like: 

<div class=”fb-customerchat”

Page_id=”<PAGE_ID>”>

</div>

**NOTE: Although the option is available, Facebook and Smith.ai do not recommend moving the default position of the Chat Plugin from its location on the bottom right of your webpage.

There are a lot more features and options for developers offered through Facebook for Developers and WordPress, but it gets pretty complex and doesn’t usually apply to our audience, so we’ve just linked the rest of the details for those who want them here:

Facebook for Developers - Facebook Chat Plugin

On this page, you’ll also find a list of custom attributes, but it’s advised to only use those that are not readily available in the Page Settings part of the setup tool. 

Features, messaging support, and templates

The Facebook Chat plugin supports several types of messages and offers plenty of templates and features. Supported features include:

• Text messages
• Video and images
• Audio 
• GIFs
• Postback button
• URL button
• Call button
• Quick Reply via Email, Phone, and Text

Of course, this is just a sampling of the available templates and message formats supported. You can find all the details on the Developer page linked above. 

The Facebook Chat plugin allows you to see all your messages right in your Facebook Page inbox on the desktop or mobile Facebook Pages Manager app. You can also link your Messenger app and Page accounts to access everything through the Messenger platform directly. 

Finally, Facebook offers analytics for this feature and all of your chats and messages, which are accessible for the navigation bar on your Facebook page. You’ll see the “Insights” button, and when you get to that screen, there will be a tab on the left for Messaging that will show you all of the analytics behind your messages. 

What is “guest mode”?

Starting in late 2020, Internet users around the world were able to connect with businesses via Facebook Chat plugins and apps, even if they didn’t have a Messenger or Facebook account. These guest users are given a temporary account that allows them to send and receive messages, but only when they are on your website. These chats will remain active from 24 hours of the start of the conversation, or when the user chooses to end the chat manually from the “more” menu. 

Although guests will only have access to the transcript for 24 hours, your business can have the conversation on file even once it’s expired, until you decide to delete it. There is also a new upgrade that allows users to transition from “guest mode” and log into Messenger to continue their communication. This will happen when:

• The user clicks “Continue in Messenger” from the drop-down menu
• The user tries to send an attachment as a guest, which is only available to account holders at the moment 
• When the business has an “away” status set so that the customer can connect with the business when they return

Guest mode is a way to guarantee that every customer can reach your business quickly and in a way that works for everyone. Plus, the integration to transfer to a registered account makes it even easier for customers to get started without having to give all of their information until or unless it’s necessary. 

Why incorporate Messenger into your website?

Today’s customer demands convenient, accessible options for communicating when it comes to the brands with which they do business. With 46% of all customers preferring live chat as a means of contacting a business, it only makes sense that you offer Facebook messaging integration right on your website. This makes it easy for customers to contact you in a familiar way without having to take a lot of extra steps. 

• A Familiar Experience: For brands and customers alike, Facebook Messenger is familiar. It’s a format that most people are experienced with, and it renders the same on business websites as it does via the Messenger app and the Facebook website. 

• A Time-Saver: Being able to reach out to you via Messenger without leaving your website saves time for the customer. They don’t have to create a new account, learn a new chat interface, or worry about navigating to another site to contact you. The bubble is just there at the bottom of the page, waiting for them to engage. 

• A Rich Media Solution: In addition to being familiar, the media experience on Messenger and Facebook Chat is very rich and robust. You can share all kinds of image files and GIFs, audio and video, and more, in addition to plain text. It's better than most live chat tools and it’s one that people know, so you really can’t lose. 

• A More Personal Experience: When you use a tool like Messenger right on your website, you’re giving your audience the connected, personal experience that they crave right on the site where you do business—they can even carry on through Messenger later or come back to the site, and still have access to the conversation (as long as they’re not using guest mode). 

Of course, we can’t forget the most important reason to use Facebook Chat directly on your WordPress site: It's a completely free way to put live chat on your website. 

That’s right, not only is it a tool that billions of people already know and use, but it allows you to create another channel for customers to reach you without spending a single dime. With the guest mode that guarantees that every customer can contact you, you really can’t go wrong. 

Of course, there’s also the risk that it will create a lot of additional work when people actually catch on and start using it. That might mean that you need to step up your customer service team or find another way to handle the work. 

Let Smith.ai field your messages and more

Of course, if you’re like most businesses today, you’ve got enough on your plate without one more message to answer. But you can’t forego providing that 24/7 service that your customers demand. What’s a brand to do? Simply enlist the services of the virtual receptionists at Smith.ai. 

When you hire us as your live chat agents, you’ll get comprehensive support for website chats, SMS texts, and more. Our software and dedicated 24/7 agents are provided with every live chat plan, offering complete coverage for all of your English and Spanish live answering needs. We will answer every conversation on your behalf and we’ll integrate with any and every website and e-commerce platform. 

Our virtual receptionists can do it all, from answering questions to lead screening and appointment scheduling, client intake and payments, and so much more. Ask us how we can change the way your brand handles live customer service by acting as the face of your business, and how we can help you create a custom strategy that meets all of your communication needs. 

Learn more when you schedule a consultation to discuss Smith.ai’s 24/7 live chat services, and other ways we can take your chat integrations to the next level. You can also reach us at hello@smith.ai or by calling (650) 727-6484.