Best Practices

Facebook Webchat Plugin & Google Tag Manager

By October 18, 2018 February 20th, 2019 No Comments
Facebook Webchat Plugin & Google Tag Manager

The Facebook Customer Chat Plugin is very similar to having a live chat popup on your website. Just like other live chat providers Facebook even provides a platform that allows your staff to talk to your users. Unlike other live chat providers, Facebook will host the conversations on their Facebook Messenger app, instead of a third party live chat server. This means your Facebook Customer Plugin is connected to your company Facebook Page.

The Look & Feel of Facebook Customer Chat

Facebook Customer Chat Rocketbots

It’s a familiar little popup that we’re all used to, and surprisingly feature rich for a free product. It can be customized to call out to your visitors with a special message, contain your logo, and color adjusted.

If you noticed, there is something that makes this chat very special. It calls out to you by your name. This happens because you are logged into Facebook and even though Facebook is not open the chat will still recognize you as long as you have logged in previously with your browser.

This makes it very easy to have a contextual one-click chatting experience. Since the conversation goes through Facebook Messenger both the website visitor and the company can scroll up to see if any conversation has happened before. This, together with the extensive UI provided in Facebook Messenger make the Chat Plugin bot friendly, frictionless, and persistent.

Since every user that talks to you joins a permanent list of contacts, the Facebook Customer Chat Plugin gives you a whole new way grow your list of Facebook users for future use. This is great for both marketing and notifications use cases.

Websites are Already Using the Plugin

There are tons of websites out there that already leveraging the Facebook Customer Chat Plugin and we’re finding more every day.

Chatbot Tutorial is using the Facebook Customer Chat Plugin to entice visitors to chat with their chatbot. Among the customer chat’s best benefits, is the extensive menu, card and quick reply options provided by Facebook Messenger. This makes it perfect for chatbot-related websites to get people to jump right into conversations with their non-human staff.

Facebook Customer Chat chatbottutorial

Conversocial is leveraging the Facebook Customer Chat Plugin to explain it’s platform for companies who intend to make the most out of their social engagement with their customers. Because Conversocial is not a subscription platform, it is highly important for them to enable every website visitor to chat with the team easily. Perhaps even more importantly this allows the team to respond back directly to the users Facebook Messenger app even after they have left the website.

Facebook Customer Chat Conversocial

Spectrm, like Chatbot Tutorial, is using customer chat as a means to advertise its own bots, this time as a product tour. The bot setup in the customer chat is meant to help navigate users along with their website and tour their product.

Facebook Customer Chat Spectrm

If you’re using a third party live chat to your website visitors you are missing out on many great engagement opportunities because of the anonymity of your visitors. By asking users to fill out forms or send emails a lot of your website visitors are leaving without connecting with you. Although collecting visitor emails sounds important for marketing purposes, marketing emails are not as effective as they once were. By electing to use the Facebook Customer Chat Plugin you’ll be able to engage with users in a less crowded space.

Here’s Why You Want Facebook Customer Chat

Enough examples, let’s get to the top 3 reasons why you should be using Facebook Messenger Chat Plugin on your website.

Persistent Chat

With a typical live chat provider, the website visitor can just leave your website and the conversation is over. The Facebook Customer Chat Plugin solves this because the entire is over Facebook. The user chats from their Facebook profile over Facebook Messenger and the business talks from their Facebook Page. The visitors to your website be stored in the Facebook Business Manager along with their chat history. This way you always have a place to continue the conversation should they leave your site.

Remove Anonymity

Ever think you might be chatting to the same person you were chatting to yesterday? Facebook Customer Chat Plugin removes the anonymity when fresh users start a conversation with you. That means no more forms, no more playing 20 questions, all public information from that person’s Facebook profile is now available to you from the get-go.

Free Live Chat and Back End Platform

There are tons of Live Chat providers out there but there aren’t any that can claim to be free forever. The Facebook Messenger Chat Plugin can! Even though there are tons of live chat providers with a freemium package for you to use, at the end of the day they will ask you to pay for more seats or depending on how many contacts you use.

Not only is the Customer Chat Plugin free, so is Inbox on Facebook Business Manager. With Inbox, you can assign contacts to users and even takes notes. Using labels in Inbox you can segment your contacts and you’ll also receive public profile information at your fingertips without even visiting their Facebook Page.

The Embed Code from Facebook doesn’t work on Google Tag Manager 🙁

If you want to manage your embed codes using Google Tag Manager or via WordPress addon, you’re going to find yourself in a bit of a pickle when you retrieve the embed code from Facebook.

The code they provide is an HTML snippet, a <div> that is designed to be pasted on every site page you have. For some, this is an unreasonable amount of work. However, this snippet cannot easily be used with Google Tag Manager (GTM). Inside the div are usefull code snippets which must be pasted into two areas of your website’s HTML. If you’re not a coder doing this on your is likely to be somewhat daunting and you’re likely going to be scrambling on Google to find out how to do it.

Facebook Customer Chat Embed Code

What you really need is a way to transform this embed code into a pure Script, this way GTM or a WordPress HTML management addon can accept the code. The Rocketbots platform allows you to connect your Facebook Page, and from there, you can retrieve a Facebook Customer Chat embed code that is exactly what we’re looking for, Script only.

It works like this, the <div> classes were never actually taken out of the original code. We simply turned the code inside-out and made it so that each time a page on your website is opened, the script dynamically creates the <div> class each time as part of the script’s design. Which means it’s now GTM friendly.

Here’s how it looks:

Rocketbots Customer Chat Embed Code

How to get a better embed code

1 Log in to the Rocketbots platform, and navigate to the Plus sign to add a new Space.

Facebook Customer Chat on Rocketbots

2 Select your Facebook Page, if it is your first time, you may need to give Rocketbots permission from a popup window by Facebook to integrate.

Facebook Customer Chat

3 Select Facebook as your channel

Rocketbots Multichannel

4. Fill out the required info for your Space

Facebook Customer Chat example

5. Copy the Embed Code provided

6. Insert the embed code into GTM.No funny business, just make a Custom HTML Tag, paste the code from Rocketbots As-is, and set your trigger, most usually it’ll be a page view trigger!

Facebook Customer Chat

7. Complete the rest of the setup in Rocketbots by continuing the channel connection.

Facebook Customer Chat

Well, that wasn’t so hard, was it? Using the Rocketbots platform you’ll find it much easier, and far more painless to generate a new Facebook Customer Chat code that actually works with GTM and WordPress add-ons as a Script.

Along with the Facebook Customer Chat Plugin you’ll find that it’s also easier to manage your contacts on the Rocketbots platform. With Rocketbots AI learns from your conversations over Facebook Customer Chat, and the more it learns, the more and more it’ll deliver helpful smart replies, one-click replies that are based on your past answers to similar questions. Let it continue learning and soon the AI can actually start automating your responses.

Gerardo Salandra

Gerardo Salandra

Gerardo Salandra is the CEO of Rocketbots ( An IBM & Google veteran, with deep expertise in growth hacking, machine learning, and chatbots. Chairman of the AI Society of Hong Kong, promoting the development and understanding of AI technologies in the Region.

Leave a Reply