What's the Facebook Customer Chat Widget and why you don't want it on your website?

Facebook is offering free and easy to integrate Messenger widget, also known as Customer Chat Plugin. You can use it on your website as a mean of communication with visitors. Unfortunately, you shouldn't be very enthusiastic about it, and here is why.

Why Customer Chat Plugin?

A few weeks ago we started Curiosum. Our goal is to deliver great Web Development-related content.

That's why we want to gather as much feedback as possible from our visitors to understand whether they like it or not.

Right from the start, we added Contact Page, but nowadays it seems to be less appealing way of communication than messaging solutions similar to Messenger, Whatsapp, etc.

The tools we use for personal interactions every day seem to be a go-to option for most of the people in the Web.

That's how we found out about the Facebook Customer Chat Plugin. It's a free widget integrated with your page on Facebook, that allows visitors to write messages without leaving your website. Sounds great, isn't it?

Integrating Customer Chat Plugin

To begin with, let's see how you can integrate this widget into your web page.

Instalation

It's very easy to start using Messenger on your website. Here are few required steps:

1. Go to Facebook Page.
2. Click Settings.
3. Click Messenger platform.
4. Find Customer Chat Plugin section and click Set Up.

Once you click Set up you'll be guided through a couple of steps. In the end you need to copy Customer Chat Plugin code snippet which looks more or less like this:

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function () {
    FB.init({
      xfbml: true,
      version: 'v4.0'
    });
  };

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

<!-- Your customer chat code -->
<div class="fb-customerchat" attribution=setup_tool page_id="...">
</div>

Whitelist your domain

Once you have your code up and running you need to inform Facebook to whitelist given domain. How to do that?

1. Go back to Page settings.
2. Go to the Messenger Platform.
3. Find Whitelisted Domains section.
4. Put your domain on the list (in our case it's https://curiosum.com).

That's all, you've just integrated Customer Chat Plugin.

So what's the problem with Facebook Customer Chat Plugin?

With an ever-growing number of websites, Google (or any other search engine) is trying to identify the most valuable ones with a constantly changing number of criteria.

There are a lot of factors having an impact on your page rank, but one of the biggest is your website load speed (learn more).

You can check your website speed score on Google PageSpeed Insights.

It turned out that adding Customer Chat Plugin drastically changed our speed rank from more than 90 to less than 60! It's a pretty drastic drop given that we constantly optimize Curiosum page speed.

Just look at how much time it takes to load Facebook scripts and linked assets:

Is that a lot? These are the numbers for our website without Customer Chat Plugin:

37 requests
289 KB transferred
1.5 MB resources
Finish: 807 ms
DOMContentLoaded: 553 ms
Load: 753 ms

So yes, it's a LOT. Fetching external scripts from Facebook and initialization of widget is taking nearly four times more time than our current page load time.

Alternative solution

Let's say you don't want to use Customer Chat Plugin but you still would like to direct users to your Facebook Page chat instead of using other tools.

There is an easy solution for that!

It comes down to two steps:

1. Put Facebook Messenger icon on your website.
2. Direct users to your page's direct Messenger URL.

Here is a code snippet:

CSS

.floating-facebook-icon{
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: 3rem;
  margin-bottom: 3rem;
  width: 5rem;
  height: 5rem;
  cursor: pointer;
}

HTML

<a href="https://m.me/curiosum.dev" rel="noreferrer" target="_blank">
  <img class="floating-facebook-icon" src="/images/messenger.svg">
</a>

You can find the Facebook Messenger icon at facebookbrand.com.

And here is the result:

This solution doesn't rely on any external JavaScript code, and that's why it's fast. The downside, though, is that the visitor loses focus on your website.

As a result, on desktop, he or she lands on the Facebook Messenger page in a new browser tab or the messenger app if it's mobile.

Wrapping up

You still might want to use other messaging solutions on your website, there is plenty of them.

This blog post aimed to show you how Customer Chat Plugin affects your web page speed but Facebook Messenger plugin is not the only one that might drastically affect your Google PageSpeed factor.

Keep in mind that the more plugins you add to your page, the more time it takes to load.

Do you have any questions or suggestions? Let us know in comments, via our Custom Customer Chat Plugin (😉) or Contact Page. See you later!