How to add Facebook Messenger to a Website

Facebook provides facebook Chat Plugin that can be used to integrate Facebook Messenger with your website.

Follow these steps to add Facebook Messenger Chat with your websites:

Create App in Facebook Developers and setup Messenger.
Add the following code in the head section of your html page. Use your AppId. The code below includes and initializes Facebook SDK and Chat Plugin in your website.


    <script>
  window.fbAsyncInit = function() {
   FB.init({
     appId :'paste your appId here',
     autoLogAppEvents : true,
     xfbml : true,
     version : 'v7.0'
   });
       FB.CustomerChat.hideDialog();
   };
   </script>

   <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

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

Next, add the code below to display Facebook Chat Messenger in your html page. Get your page id from your facebook page and use it in the code below:


    <div className="fb-customerchat"
   page_id="your page id"
   theme_color="blue"
   height="auto"
   greeting_dialog_display="fade"
   logged_in_greeting="Hello! How can we help you?"
   logged_out_greeting="Hello! How can we help you?">
</div>

Go to your Facebook page >> Page Settings >> Advanced Messaging and add your domains in the Whitelisted Domains field. Example: https://www.tutorialsbuddy.com
You will not see Facebook Chat Messenger in local server. If you want to test it locally then you can use Ngrok to create a public url and add in the Whitelisted Domains field.