Facebook Customer Chat Plugin – Live chat with website’s visitors using messenger app

How to add Facebook Customer Chat Plugin

The live chat mechanism in websites has reached a whole new level with the addition of Facebook Customer Chat Plugin. Now, it’s possible to to chat with your website’s visitors directly using the messenger app. It is a simple yet effective way to allow people to chat with the website Facebook Customer Chat Plug inowners using Facebook Messenger. Before that, people could only send messages to Facebook pages associated with the website using different third party apps. But with this plugin, customers can transition back and forth seamlessly without losing the conversation’s history and context. Isn’t that awesome?

We have already added the facebook customer chat plugin in our website. See a live preview of that: GEEKY Social – Digital Marketing Agency in Bangladesh

Facebook Customer Chat Plugin

Facebook launched the Messenger customer chat plugin earlier this month as a closed beta. It has proved to be a blessing in disguise for the marketers. Response from the digital community was ravishing too. Thanks to the chat plugin, it is easier than ever to initiate conversations with customers. So what are you waiting for? If you have a website and a Facebook page, install the Facebook Customer Chat Plugin now!

messenger live chat plug in on website

But how to install the plug in? Well, it’s a challenging job. You need to have a firm grasp of website’s file structure and coding. But, don’t get disappointed at all! We are here to help you out. Find the details on how to get started with the chat plug in and some quick tips are below!

How to add Facebook Customer Chat Plugin

Here are the steps of installing customer chat plug in:

  1. Install Facebook SDK for JavaScript on your website
  2. Make your website’s domain name white-listed from your Facebook page
  3. Add the div code of the customer chat plug in on your webpage

Let us explain the steps:

1. Install Facebook SDK for JavaScript on your website

The Facebook SDK for JavaScript provides a rich set of client-side functionality including using Facebook like button in the website, placing social plugins, logging in using Facebook id, using Facebook graph API, playing Facebook games and so on! Thus, you need to have Facebook SDK for JavaScript on your website even if you don’t need the Facebook chat plugin. Here is how to Install Facebook SDK for JavaScript on your website:

The following snippet of code will give the basic version of Facebook SDK where all the options are set to their default values. All you need to do is to insert this code directly after the opening <body> tag on each page you want to load it:

  window.fbAsyncInit = function() {
      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'));

Do not forget to replace the value in your-app-id with your own Facebook App ID. You can find this ID using the App Dashboard. If you don’t have a Facebook app for SDK, create it now from your facebook App dashboard.

Here is a live screenshot of that:

Live chat with website's visitors using messenger app

2. Whitelist the domain of your website in the facebook page

If you dont make the website’s domain whitelisted from the facebook page, the plugin will not render. If you don’t know how to whitelist a domain, here is how to do that:

You may add or remove whitelisted domains via Page settings. To whitelist a domain, do the following:

  1. Click Settings at the top of your Page
  2. Click Messenger Platform on the left
  3. Edit whitelisted domains for your page in the Whitelisted Domains section

Have a look at this screenshot:

Live chat with website's visitors using messenger app

3. Add the div code of the customer chat plug in on your webpage

Now, you need to Add the plugin on your webpage by including a div with the following attribute in your HTML:

<div class="fb-customerchat"

Don’t forget to replace the <PAGE_ID> with the page ID of your facebook page.

You must add specific instructions in the code about whether you want to add minimization option to the plug in. In order to do that, delete one of the values from this section of the code: <true|false>

Available Attributes of the chat plugin

There are attributes that will help you to capture important information about your customers to deliver a more personalized experience for them. You can also customize the behavior of the “Need Help” greetings bubble in the chat.

  • Theref attribute: to pass any custom string to your webhook, you can add messaging_postbacks and messaging_referrals events in the plug in.
  • The minimized attribute: I have described this attribute above. It specifies whether the plugin greeting text should be minimized or shown all time. Default values are “false" on desktop and “true" on mobile browsers. False shows the Messenger logo and a “Need Help” greeting bubble, and true will show only the Messenger logo, user can click on the logo and start chatting.
If you still need help to set the plugin in your website, our technical team would love to help. Contact our support team for help: Contact with GEEKY Social 

Quick tips to get the best out of Facebook Chat plugin

Tip #1: Add a welcome message in messenger with the first name

Always use your customer’s first name in the greeting message of the messenger for both new and existing threads. It is a nice way to drive more customer engagement with your business process. Here’s how to implement a personalized welcome message:

  1. Handling NEW conversations: when a new conversation is started via the plugin and your bot has set up the Get Started button, it will send a messaging_postbacks webhook event when the person enters the thread.
  2. Handling EXISTING conversations: whenever an existing thread is continued via the plugin, a messaging_referrals webhook event will be sent to the clients.

Quick Tip #2: Provide customers with context of the thread

Chatting through Facebook Customer Chat Plugin can be challenging for you to get the desired result at times. Having a conversation to begin on your website and continue it on Messenger is a new experience for many of your stakeholders. Including a text to remind people that the conversation can be continued even when customers leave the website is helpful. You can add context for navigating this new experience like this:

“To Continue this conversation, look for us in your Messenger inbox.”

“We’re currently out of the office but will reply as soon as we’re available. Look for a reply from us in your Messenger notifications.”

That’s all from our part for today. We Hope this blog will help you to get the best out of Facebook Customer Chat Plug in. We will return with some more valuable insights next week.

Till then, happy chatting!

Read an article on usefulness of going live in facebook