How To Embed Facebook Messenger Chat Widget On Your Website

Facebook Messenger Chat Widget

Want to improve your customer support experience on your website. There are various paid and popular live chat available in the market like Zendesk and intercom. So if you’re looking for a free alternative to all these apps you are at the right place. Facebook Messenger Chat Widget is a free live chat option you can include on your website.

Facebook Messenger Chat Widget

facebook messenger chat widget

This will help all your customer to chat directly on your website. This will help your customer experience. The business owner needs a Facebook page and Website. The customers need a Facebook Account to get started.

There is no need for complex code installation anyone can Embed this Facebook Chat Widget on their Website. The customers will see the messenger chat Icon on your website. When they will click Chat messenger will open and can send messages directly from the website. If you’re online on Facebook you can Chat with them.

You can try it now on my website go to Gyaaniworld and wait for the page to fully load. You will see Facebook Chat Icon Click on that.

Read More: 

How To Embed Facebook Messenger Chat Widget

Step 1: First Go To  developers.facebook.com and click on add new App Button to create a new App.

developer facebook

Step 2: GIve your App name and click ok button to generate your APP ID which will in the numbers format.

facebook app ID

Step 3: Now Go To your Facebook Page and click on the setting Tab choose messenger platform. Go to Whitelisted Domain option and enter your full website URL and click on save.

facebook messenger platform

Step 4: Get the Facebook Page ID of the specific page you wish to connect Chat Widget. You can get your Facebook Page Id by clicking on About section of your page.

Step 5: We are almost done now open your website template and copy paste the following Code into your Footer. If your website is in WordPress just install Header and Footer Plugin and paste the code into Footer section.

Replace the App_Id and Facebook Page_ID with your App and Page ID.

<div class="fb-customerchat" page_id="PAGE_ID"></div>

    <script>

      window.fbAsyncInit = function() {
        FB.init({
          appId            : '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>

That’s it your Facebook Messenger Chat Widget is lIve now on your Website. You check your site by refreshing it. If still can’t see that clear your cache.

Leave a Comment