Adding Messenger Customer Chat Plugin To Your Site

adding-messenger-customer-chat-plugin-to-your-site.md

Requirements

1. Install the Facebook SDK on your website.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '1678638095724206', // REPLACE IF YOU WANT TO USE YOUR OWN FB APP
      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>

2. Whitelist your domain to connect your Facebook Page to your website via the Facebook tool . Page Settings > Messenger Platform > Whitelisted Domains.
3. Add the plugin on your webpage by including a div with the following attribute in your HTML:

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

---

Guidelines

1. The <script> tag that you need to insert in your site. According to Facebook, you should insert it directly after the opening tag on each page you want to load it
2. Make sure to do it via the Facebook Page settings.
3. A <div> tag that you need to insert in your site and replace the <FB_PAGE_ID and probably setup an optional ref paramater and minimized.

If you meet all the requirements above, the chat plugin should show up on your site.

PS: If you have a Wordpress site, you may do and follow this: https://dorelljames.com/web-development/adding-messenger-customer-chat-plugin-wordpress-site/