How To Article

How To Add Facebook Web Chat With GTM

Gerardo Salandra
October 18, 2018

The Facebook Customer Chat Plugin is an incredible free live chat plugin that put's Facebook Messenger directly on your website. Like traditional live chat vendors, Facebook provides a back end called Facebook Inbox where your support staff can chat with visitors, users, and customers. Unlike other live chats though, Facebook lets you message your contacts back, even after they have left your website, they will receive your messages in the Facebook Messenger app. The trouble is you can't install the Facebook Web Chat with Google Tag Manager, or can you?

Why Facebooks Web Chat Code Doesn't Work With GTM

If you want to manage your embed codes using Google Tag Manager or via a Wordpress addon, you’ll find this isn't possible with the Facebook Customer Chat Plugin Code provided by Facebook.

The code provided is an HTML snippet, a <div> that must be pasted on every site page individually. This is a problem if you have 100 pages. The obvious option is add to the Facebook Customer Chat script to Google Tag Manager (GTM).

Facebook Customer Chat SDK does not work with Google Tag Manager
Facebook Customer Chat SDK

Because the Facebook Customer Chat code requires you to paste the Facebook SDK and the customer chat code, there is no real way to install the Facebook Web Chat with Google Tag Manager (GTM). As the Facebook Customer Chat SDK can not work with Google Tag Manger (GTM).

Facebook Customer Chat Code

You'll need is a way to transform this embed code into a script that can be used with google tag manager.

How To Install Facebook Web Chat With Google Tag Manager

To install the Facebook Customers Chat Plugin on Google Tag Manager (GTM), you'll need the following things:

1 Log in to the Rocketbots platform and create a space. You will need a space to connect your Facebook page(s).

Create a Space If You Don't Have One Already To Add A Facebook Customer Chat Plugin To Your Website Using GTM
Create a Space If You Don't Have One Already

2 Select Facebook Messenger, press next then choose the Facebook Page you would like to connect.

Select Facebook Messenger To Add A Facebook Customer Chat Plugin To Your Website Using GTM
Select Facebook Messenger

3 Fill in your channel details and check add Facebook's Customer Chat Widget to your website?

Check To Add The Optional Customer Chat Plugin To Add It To Your Website Using GTM
Check To Add The Optional Customer Chat Plugin

4. White List Your Domains, Choose a Color and fill in your advanced settings.

Whitelist Domains & Select A Color To Add Facebook Customer Chat Plugin To Your Website With Facebook Customer Chat Plugin
Whitelist Domains & Select A Color

The reference code allows you to start a unique onboarding automation, if the contact comes from the Facebook Customer Chat Plugin.

Adjust Advanced Settings To Add Facebook Customer Chat Plugin To Your Website With Google Tag Manager
Adjust Advanced Settings

5. Copy the Script.

Copy The Script To Add Facebook Customer Chat Plugin To Your Website With Google Tag Manager
Copy The Script

6. Insert the script to GTM as a custom HTML Tag.

Paste The Script To Add Facebook Customer Chat Plugin To Your Website With Google Tag Manager
Paste the Script

7. Click Done on Rocketbots and check your pages.

Check Your Site To Add Facebook Customer Chat Plugin To Your Website With Google Tag Manager
Check your Site

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
Chief Executive Officer
Gerardo Salandra is the CEO and co-founder of respond.io. With previous experience at IBM, Google and Runtastic, he has accumulated expertise in artificial intelligence and growth hacking. He holds an MBA from the Chinese University of Hong Kong.
Tags
mofu
Copied to Clipboard!