Knowledgebase

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.

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
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.