Installing Facebook WEB Chat to give Support from your Webpage

If you are running a serious business, having a webchat in your website page is kind of a must these days. Although  I have had some discussion with a friend of using Facebook Messenger or not I really prefer for the following reasons:

1. Accessible through the WEB or in a mobile,
2. Not another application to install,
3. Open to robot coding,
4. Very short learning curve,
5. Public information from the profile is accessible for marketing purposes, and
6. who does not have a Facebook Account?

I will write how I made it work.

Setup your Facebook Resources

You will need to have a Facebook Fan Page, and you will need to get the facebook page id. In that very same page, you will need to whitelist the domains of your web pages. This is kind of tricky, but I found you can access it by building a link like this https://www.facebook.com/trademinator/settings/?tab=messenger_platform; you just need to substitute your page name.

After that, you will need to have a Facebook developer account and create a Facebook application approved and published. You will need the Facebook application id.

HTML Code

Put the following code in your page:

<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_GB/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

<span id="fb-root" ></span><div class="fb-customerchat" page_id="PAGE_ID" ref="" minimized="1">

If you do this properly, voila! You have your very own chat.

Good luck!