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.

Table of contents

    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:

    Customer Chat Plugin Long Load Time

    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:

    Curiosum Custom Customer Chat Plugin

    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!

    Download our ebook
    Szymon Soppa Web Developer
    Szymon Soppa Curiosum Founder & CEO

    Read more
    on #curiosum blog

    Why Disqus slows down your page and how to fix it?

    There are a lot of pages using Disqus as a way to communicate with readers. It's a great comments widget that comes with a free plan included which is probably one of the main reasons for its success.

    It has, however, a drawback - using it causes an increase in page load time. In this article, you'll learn how to fix that with a simple hack.

    Why Teams Will Defeat Slack in the Long Run

    Collaboration software is present almost in every business, in one form or another. The one that first comes to mind and was in many ways a precursor of the field – Slack – has found more and more capable rivals with every passing year. However, now in 2020, Teams by Microsoft seems like it will lead the pack for a while.

    What's the difference between alias, import, require and use in Elixir? A complete guide with use cases

    In most programming languages we often deal with instructions responsible for handling dependencies. Elixir is no different.

    In Elixir, dependency is nothing more than compiled module which for some reason you want to use in another module. There are a couple of instructions that we use in Elixir to either make it easier or possible to interact with modules.

    In this blog post I'll explain and present use case examples of four of them:

    • alias,
    • require,
    • import,
    • use.