How To Install Facebook Messenger Customer Chat Plugin On Your Website!

By Ant
facebook-messenger-chat-plugin

1.  Install the Facebook SDK on your website.  To do this copy and paste the code below into the body of all pages you want the Facebook Customer Chat to appear on (Some Themes allow for this to be added to all pages in one area.

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

This code will load and initialize the SDK. You must replace the value in your-app-id with the ID of your own Facebook App leaving the ‘ ‘ surrounding your app ID. You can find this ID using the App Dashboard.


2. Whitelist your domain to connect your Facebook Page to your website via the Facebook. Then go to your Facebook Page (Cannot be a group or personal page).  Next go to Page Settings > Messenger Platform > Whitelisted Domains, and add your website url.

3. Add the plugin on your webpage by including a div with the following attribute in your HTML: (This will also need to be added to every page you want the chat to be view-able on)

<div class="fb-customerchat"
page_id="<PAGE_ID>"
ref="<OPTIONAL_WEBHOOK_PARAM>"
minimized="<true|false>">
</div>

(Note All fields need to be completed. So any of the code in step 3 with data in between the < and > symbol needs to be added or deleted.)

Ex.

<div class="fb-customerchat"
page_id="12345678900000"
ref=""
minimized="">
</div>

The minimized attribute: specifies whether the plugin greeting text should be minimized or shown. Defaults to false on desktop and true on mobile browsers.

 

If you need help setting this up feel free to message us Via the Facebook Customer Chat!

For more detailed information or information on how to customize the Facebook Customer Chat Plugin, Visit the Facebook Blog Post found here.

Source: https://blog.messengerdevelopers.com/messenger-customer-chat-open-beta-16b11879637

Leave a Comment