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

 

Facebook had released the Facebook Customer Chat Plugin in April 2018. By embedding this widget to your website, your customers can chat with you via Facebook Messenger in real-time right on the website. That means they don’t have to navigate to Facebook or Facebook Messenger to send you a message anymore.

 

facebook customer chat

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

To install Facebook live chat widget to your website, follow these steps:

Step 1: Go to your Fanpage → 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

 

Step 2: Copy and paste the following code before the </body> tag of your website:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-customerchat" page_id="PAGE_ID"></div>



Notes:

  • your-app-id: Replaced by your Facebook app ID. If you don’t have any app, create one here.
  • PAGE_ID: Replaced by your Fanpage ID. Get it here.

If you prefer, please email to us your Facebook app ID and your Fanpage ID and we will edit the codes before inserting them into the website.

Was this answer helpful?

 Print this Article

Also Read

How to create client ID and secret key for PayPal live payment integration?

FIRST, You will need to create an app in the PayPal account to generate a client ID for your...

HBCMS School Mgmt system

NCB / FAC Gateway TESTING Instructions

First Atlantic Commerce (FAC) previously did a review of our HBCommerce checkout so all that is...

How To Edit A RECORD on NETWORK SOLUTIONS

How Do I Modify A Records with Network Solutions?    Log in to the Account Manager...

Get Facebook App ID and App Secret keys

How To Create A Simple Facebook App to Receive an App ID and Secret Key In order to get an App...

Powered by WHMCompleteSolution