Category: Facebook

How to add facebook messenger in website so that users can chat live to your page?

Requirements:

1. Page ID – you need to know what is your page id
2. Whitelisted Domain – you need to add website on which you want show widget in your page’s whitelist
3. Access to add/edit code in your website

1 – Getting Page ID

Go to your page, click on about, scroll down a bit and you will see Page ID

The url will look like https://www.facebook.com/pg/YOURPAGENAME/about/?ref=page_internal

The page id will look like

Alternatively, you can use tools like Find My Facebook ID – https://findmyfbid.com/

2 – Whitelisting your domain

There are 2 ways to do this, A and B both mentioned below

A) For Page Admins, the Messenger Platform also provides an easy setup tool for customizing your customer chat plugin. To use the setup tool, do the following:

1. Go to Page Settings > Messenger Platform
2. In the ‘Customer Chat Plugin’ section, click the ‘Set Up’ Button.

The url will look like https://www.facebook.com/YOURPAGEUSERNAME/settings/?tab=messenger_platform

OR

B) Go to Page Settings > Messenger Platform and Jump to Whitelisted Domains section

3 – Add Code in your website

Replace PAGEID with your page id obtained in step 1

HTML CODE (includes js code also)

<div id="fb-root"></div>
<div class="fb-customerchat" attribution="setup_tool" page_id="PAGEID" logged_in_greeting="Hi! How can I help you?" greeting_dialog_display="hide" logged_out_greeting="Hi! How can I help you?" theme_color="#0084ff">
</div>
<script>
  window.fbAsyncInit = function() {FB.init({xfbml: true,
version: 'v4.0'});};
(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/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>	  

Customization Notes:

Add or edit these common attribute value pairs

greeting_dialog_display="hide" 

theme_color="#0084ff"

Details about customization: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#customization

References:

https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin