How to Add Facebook Messenger to an Unbounce Page

facebook
messenger
chat

#1

Hey all, lately we’ve been testing the official Facebook Messenger live chat plugin, and got it working on an Unbounce page.

Although it’s technically still in beta, I figured some of you may want to test it out as well, since it’s a fast, easy-to-use, and FREE live chat solution, directly from Facebook. So, here’s how to add Facebook Messenger to an Unbounce page. Enjoy!

Here are the exact steps for getting Facebook Messenger set up on your Unbounce page:

1. Whitelist your domains

First, you’ll need to whitelist your unbounce domain(s) with Facebook. Simply go to your Facebook business page, click on “settings,” then click on “Messenger Platform” from the sidebar on the left, and then scroll all the way down to the “Whitelisted Domains” section. Here you’ll put in the domain(s) you’re using with Unbounce that you want to install Facebook Messenger on. Make sure to include both “http” and “https” versions!

1

2. Grab your Facebook page ID

While your on your Facebook page, copy down your page ID, because you’ll need it in a later step. You can find it by clicking on the “About” section, and scrolling down to the bottom. Save that number for later. We’ll come back to it.

3. Set up a new Facebook Developer App ID

If you haven’t worked within the Facebook developer portal before, you may have to sign up. But it’s quick and easy to do so. Once you’re signed into the developer portal, you’ll want to create a new app ID. I called mine “Messenger for Earnworthy.” It doesn’t have to be anything fancy. All you really need is the app ID number. Once you have it, copy it down, because we’ll need it later.

4. Install the Messenger scripts on Unbounce

If you’re adding the Messenger plugin to just one single Unbounce page (or just a few here and there), you’ll want to add the scripts at the page level. However, if you want it to install on all of your Unbounce pages on a particular domain, you may want to use the Unbounce Script Manager. For our testing purposes, I installed it on just a single page to start with, so I’m working directly within the Unbounce page builder interface.

Click on the “Javascripts” section at the bottom of the builder, and add a new script called “Facebook Messenger” with the placement of “Before Body End Tag.”

You’ll need to install both the Facebook SDK script, and the Facebook Messenger script. Here’s the exact code I used, which simply combines the two. Of course, you’ll need to replace “ENTER YOUR FACEBOOK PAGE ID HERE” with your Facebook page ID, and “ENTER YOUR FACEBOOK APP ID HERE” with your Facebook app ID.

<div class="fb-customerchat"
 page_id="ENTER YOUR FACEBOOK PAGE ID HERE"
 minimized="true">
</div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'ENTER YOUR FACEBOOK APP ID HERE',
      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>

After you’ve saved the script, go ahead and save and publish your Unbounce page. When you visit the page, you should now see the Facebook Messenger icon in the lower right corner of the screen.

If you want your Facebook Messenger welcome message to pop up automatically, simply change “true” to “false” in the minimized="true" line in the code above.

Other than that, you should now be able to receive messages directly from your Unbounce page.

5. Test everything

Of course, make sure you’re able to get notifications from Messenger. There’s nothing worse than losing leads or sales because you didn’t get a live chat message from a visitor. Test everything fully before you launch it as part of a live campaign!

And if you want to get even deeper with Facebook Messenger’s chat plugin, check out the official documentation from Facebook.


Embedded Live Chat on PAGE Integration
#2

#3

:scream: :scream: :scream: You’re the real MVP @Nicholas! Thanks so much for sharing this!


#4

@Nicholas !!! :raised_hands: :raised_hands: :raised_hands: * waits for overwhelming amount of messages * :joy:

Question – I saw the reference on the documentation about detecting messenger origin (copied below), where would I add that to your script? (I’m assuming this will then show me that a message came via the app … ?)

Detecting Message Origin
At times, it may be necessary to determine whether a message was sent from the customer chat plugin. To enable this, the Messenger Platform will include a “source”: “customer_chat_plugin” property in the tags array of the message payload for all messages sent from the plugin:

"message": {
  "mid":"mid.14577641449818:41d102a3e1ae206a38",
  "text":"hello, from customer chat!",
  "tags": [
    {
      "source": "customer_chat_plugin"
    }
  ]
}

#5

Love this. Definitely want to give this a try!


#6

@Nicholas. Got this set up now, but not getting any notifications when I get new messages. I noticed this seems to be a problem in the Facebook support forum. Do you have any tips on this?


#7

I had this issue too @Finge – I went through and made sure notifications were on across the Messenger app, Business Manager (as my page is connected there), and on the Pages app … so I’m not quite sure what got it working but I seem to be getting Pages app notifications for new messages now.


#8

I was able to get them on the Pages app too, @Zoe_Tattersall. Perhaps that’s the only option.


#9

@Finge I think it is. I searched this afternoon and just found a lot of annoyed people with no answers :wink: :frowning:


#10

Yeah, had the same problem. I ended up routing the messages through Intercom since we’re also testing that. It comes in just like a live chat message just like the rest of the Intercom messages.

I’m hoping Facebook improves the notifications system. It’s a bit clunky. But hey, I guess we can’t expect too much for a beta release.


#11

Hey Zoe, I haven’t explored that feature yet. It looks interesting though! If I get it working, I’ll be sure to share here.


#12

Hi Everyone,

Just a quick update here. Facebook released some new features to the to the Messenger Web Chat Plugin today (2/3/18). You can now change the greeting that the visitor sees as well as the color of the Messaging - to match the branding on the site.

Simple tweaks and probably worth it.

Here are the details .https://blog.messengerdevelopers.com/https-blog-messengerdevelopers-com-how-to-customize-the-customer-chat-plugin-336b6b60ca3


#13

Nice, thanks for sharing the update! :slight_smile:


#14

Awesome! Thanks for sharing this update. It keeps getting better.


#15

Tried adding the customized greeting - however - it does not seem to work - instead, my chat box seems to go away.
Can anyone post instructions on how to add this code to the rest of the script, for those of us who are new to coding? thanks!


#16

The code is below. The issue is most likely in the first DIV.

Most likely you’re just missing a quote ("), comma or equal sign somewhere. Good luck

Here is the code - https://gist.github.com/mikesabat/fb096168c3c066b7cc32ae518a17b09d

Won’t let me paste it in here.


#17

that was super helpful and i wanted to say thanks for that! i was just wondering if you don’t mind asking questions in case i would have some during the process?


#18

Sure, just post here. I’m following.


#19

This is great. We just really started to dive into FB Messenger and this will help with our efforts.