Skip to content
add facebook customer chat to wordpress

How to Add Facebook Customer Chat (Live Chat) to your Website

Facebook Customer Chat Plugin is a must-have tool for your website from Facebook. Using this plugin, your customers can chat with you via Facebook Messenger in real-time right on your website. That means they don’t have to navigate to Facebook or Facebook Messenger to send you a message anymore.

facebook customer chat

How Facebook Live Chat widget appear on the website

According to BoutiqueSetup, the global eCommerce transactions will reach 5 trillion dollars in upcoming years. This means you have to provide a personalized experience to your visitors. One way to do this is by using a chat popup.

With this feature, Facebook Customer Chat (Facebook Live Chat) helps you a lot in supporting the customers, consulting or selling right on your website. You can manage and take care of your customers via Facebook Messenger.

Adding Facebook Live Chat To Your Website The Fastest Way

The simplest and easiest way to add Facebook Customer Chat widget to your website is using official Facebook Messenger Customer Chat plugin for WordPress. It’s free and available on wordpress.org.

Go toPlugins → Add New and search for “facebook messenger”, then click Install button. After that, activate the plugin.

Then go to Customer Chat and follow the steps to set up. Facebook as a wizard to let you customize the chat widget to match your theme style.

When you’re done, the plugin will generate a code and insert into your website as follows:

insert facebook customer chat into WordPress website

Generated code for Facebook Messenger Chat widget

Adding Facebook Customer Chat Manually

You can also adding the Facebook Customer Chat to your website manually without installing any WordPress plugin. That might help your website running a little bit faster. Please follow the steps below:

Setting Up

Go to your fan page → Settings → Messenger Platform. In the Whitelisted Domains, enter your domains of your website(s). Then click Save to complete.

Add your domain to Facebook messenger platform

Add your domain to Facebook messenger platform

Generate Code

The generated code for the Facebook customer chat widget is as follows. Please copy and save it somewhere:

<div id='fb-root'></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-customerchat" page_id="PAGE_ID"></div>

Notes:

Insert the Code to Your WordPress Website

The final step is adding the code to your website. If you are not familiar with technical things, then the easiest way is installing the Slim SEO plugin. It’s a free SEO plugin that automates all SEO tasks for you. And it supports adding custom scripts to the footer and header of the website.

To install it, go to Plugins → Add New and search for “slim seo”, then click Install button. After that, activate the plugin. Finally, go to Settings → SEO and paste the code above to the footer section.

insert header and footer code

Insert header and footer code

Or you can do that by going to Appearance → Editor and select the footer.php file, then paste the code above before </body> tag.

Adding Facebook Customer Chat Plugin To WordPress

Adding Facebook Customer Chat Plugin To WordPress

Please note that this modifies your theme. And thus, you will loose the change when the theme updates. To prevent this problem, please use a child theme. We have written a detailed guide on using child theme to customize your WordPress website.

Now you have the Facebook chat online plugin installed. And you can start using it as a channel for customer live chat support and sell your products.

1 Comment

  1. Patrick on September 12, 2018 at 02:25

    Finally, an angel. Ive been looking for this the whole night. is ambiguous.

Leave a Reply

Newsletter

Subscribe to our newsletter to receive news and tutorials about our themes and WordPress.

Scroll To Top