Everyone now a days uses Facebook for different purposes like brand pages some personal blog pages , some company pages with High Rank with good response rate.

So, Im sharing code with enables you to share embed a Facebook Messenger Code to your website so that they can easily contact with you easily and you will get message or need to resolve an issue, can initiate a conversation with the simple click of a button and contact directly to your Facebook fan page.

The only downside with embedded buttons is that visitors will have to exit your website to send a message through Facebook Messenger. Wouldn’t it be nice if people could stay on your website and yet be able to message you through Facebook?

Well it is now possible with the help of facebook chat you can see (demo) and can contact me right through there.

The widget sits in the corner of your page and when someone clicks the Facebook Messenger icon, a non-intrusive chat window pops up where visitors can type and send you a private message.

Here’s a live demo of the Facebook chat widget.


So i wrote a script that let you do this in just by copy paste.

All you to do is copy-paste the simple piece of code below anywhere in your website template and it will add the widget to all your pages. Remember to replace sarmadgardezi with the vanity URL (name) of your own Facebook page.

 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'));

The widget would work across all sorts of websites including Blogger & WordPress blogs, WooCommerce stores, and most static HTML websites. It would however not work with the new version of Google Sites as they do not offer an option to embed JavaScript in pages.

Whitelist your Domain

Next, you’ll need to navigate to the “MESSENGER PLATFORM” tab and whitelist your domain. Type in both the HTTP:// and HTTPS:// variants of your domain to ensure it works for 100% of users. Click the SAVE button.

Modifying the Code for Chat Widget

Just change minimized=”true” to minimized=”false” in your code snippet.

<div class="fb-customerchat"

Bonus: Aligning the widget left instead of right

You can add this snippet of code, along with your other snippet of code, to align the widget left instead of right:

  #fb-root > div.fb\_dialog.fb\_dialog\_advanced.fb\_shrink_active {
     right: initial !important;
     left: 18pt;
     z-index: 9999999 !important;
  .fb-customerchat.fb\_invisible\_flow.fb\_iframe\_widget iframe {
     right: initial !important;
     left: 18pt !important;

When visitors send a message via the Facebook Chat widget, it goes right to the inbox of your Facebook Page. As the business owner, you can install the Facebook Pages Manager app on your mobile phone to view and respond to messages. The customer will be notified of your response inside their Facebook Messenger app.

The message history is preserved forever, there’s no limit on the number of messages you can receive in a day and your page can simultaneously receive pages from multiple visitors. The widget also invites the visitor to like your Facebook Page.

You can also add facebook auto bot replies for instant message replies to activate then go to

  • Facebook page settings
  • open the message option from right sidebar
  • click on instead replies & select the time
  • just type your reply you can also use some build-in features
  • All done save the settings

Now when someone message you your page will make an auto reply and inform you when you visit your facebook age inbox section.

One more thing. If the web page is using an ad blocker or if they have disabled social plugins, the widget nicely defaults to the messenger button.