Quickly add the Facebook Messenger Customer Chat Plugin to your site.

Facebook Messenger plugin allows for cross-platform communication.

Categories: Content, Strategy, WordPress

The Facebook messenger chat plugin for websites is a great way of communicating with your audience and providing customer service. This will also tie into your Facebook page insights.

Install the Facebook SDK

Install the Facebook Javascript SDK and inclide the code just after the opening <body> tag.

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

Find your App ID by visiting the Facebook Developer App and either creating a new app, or copy an existing App ID and replace your-app-id.

Page ID

You can find your page ID by visiting and entering your Facebook Page URL and replace <PAGE_ID>.

Place the customer chat snippet really anywhere on the page. Facebook will position it on the bottom right of your site.

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

Next head over to your Facebook page and click on Settings / Messenger Platform. You will need to link your app to your page.

After that make sure to Whitelist your domain name. An HTTPS connection is required to use messenger. If you don’t have HTTPS then I would highly recommend a service like Cloudflare, You can get free SSL without any fussing around on your server!

Once you have the SDK, customer chat snippet and necessary ID’s have been updated, reload the page and you should see the messenger chat on the bottom right of your site.

If you would rather go with a plugin for WordPress, Give this a try.

Adam Patterson

Adam Patterson

User Interface Designer & Developer with a background in UX. I have spent 5 years as a professionally certified bicycle mechanic and ride year-round.

I am a husband and father of two, I enjoy photography, music, movies, coffee, and good food.

You can find me on Twitter, Instagram, and YouTube!