How to setup Facebook’s game-changing chat widget for your website
This week Facebook announced their Messenger chat widget — which turns Messenger into a web-chat solution. If you don’t have chat on your website, but you do have a Facebook page, you can now get web-chat with a minimum of effort and no cost. With over 1.2 billion people using Facebook Messenger, and a super easy-integration between your existing facebook page and your website, there has never been a better time for this solution.
Messenger Chat is different
The Messenger chat solution is unique because, unlike traditional web-chat solutions, it isn’t anonymous. People using it have to be logged-in to Facebook and their basic profile, which includes their name, is visible to you. This means you know who you’re talking to, which is quite a revelation when compared to the “random person on the internet” feature of more traditional anonymous web-chat solutions.
The other unique feature of Messenger Chat is that the conversation is mirrored in your customer’s Messenger app — so they can continue the conversation after they’ve left your website. If you need to take some time to investigate and find an answer to a question, you no longer need to worry that you may lose contact when the client leaves your website.
Getting Started
The following describes how we setup Messenger Chat on our own website, Humanise.AI.
Prerequisites:
- Facebook Page
- Facebook app
- A website that you can add a few snippets of html to
Estimated time: 20 minutes
Sort the facebook config
TLDR; get your Page ID, whitelist your domain and get your App ID
Facebook’s setup for pages and apps can be a little confusing for beginners.
The best way to think of a Facebook Page is to think of it like a regular Facebook user, in that the Page has a wall and appears as a user when you chat to it. You setup the page through Facebook’s regular website.
Once you’ve got the page you need go to Page (top bar) > About (sidebar, you might need to click on see more) and scroll down bottom until you see Page ID.
While you are editing your page go ahead and whitelist your domain with facebook by going to Settings (top bar) > Messenger Platform (sidebar)> Whitelisted domains and adding your domain.
While the Facebook Page is a sort of channel, the “App” instead is the engine behind responding to that Channel. At Humanise.AI our beta customers use Facebook Apps to connect their Facebook Page to our Bot management platform, which routes customer inquiries automatically to bots and humans.
If you’re just getting started with Facebook you will not need such a complex setup and you can get by with
- Create a developer account at https://developers.facebook.com/
- Create a new app
- Grab the App ID by going to the “dashboard” section in the sidebar.
Add Facebook’s <script /> and <div /> tags on every page that you want the widget
If you have ever setup anything with a drop-in HTML tag, like google analytics, this will feel super-familar. Essentialy, we need a SCRIPT tag to pull in Facebook’s scripts and a DIV tag to tell Facebook where to put the chat widget. Both of these are provided by Facebook, so you need a minimum of HTML skills. The latest DIV and SCRIPT tags are available from Facebook’s developer site.
You probably want the Messenger widget to float in the bottom right of your website. If this is the case, simply add the DIV code to the bottom of the body.
Then add the SCRIPT tag right after the body but before the closing html tag.
This is how your page should look:
<!doctype html>
<html>
<head>
<!-- All the stuff your website loads right away -->
</head>
<body>
<!-- All of the stuff your visitors enjoy --><!-- At the very end of the body section add the div --><!-- Facebook Customer Chat -->
<div
class="fb-customerchat"
page_id="<YOUR_PAGE_ID>"
minimized="true"
></div>
<!-- Facebook Customer Chat END -->
</body><!-- Facebook SDK -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<YOUR_APP_ID>',
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>
<!-- Facebook SDK END -->
</html>
Replace “<YOUR_APP_ID>” and “<YOUR_PAGE_ID>” with your app id and page id.
Now, the hard work!
Now you have your customers engaging with you on facebook, messenger or your website. You are now a truly cross-channel chat organisation, congratulations!
The question you should now be asking is “how do I know when someone is trying to chat with me?”. The easy answer is that you’ll be able to see the chats in your Facebook Page inbox, but that requires you to continuously check it. Customers might expect a quicker response than you might be able to provide using this method, so it’s better to install Facebook’s Pages app, that makes the experience mobile-friendly and sends you push messages when you have a message waiting for you — so you can get onto it immediately. Downloads are available in iTunes for iOS and Google Play for Android (please do that, if nothing else!).
But what you would probably like, would be to have a bot that automates replies for a lot of the simpler questions you get and a solution that provides a more full-featured chat desktop for your staff to answer the questions that need their attention. In an ideal world you might also integrate other channels, like SMS, email or Amazon Alexa, into the same chat infrastructure — so you only have one place to interact with customers. These are topics that we’re working on and hope to share further information in the future.
If you’ve had any interesting lessons using Messenger for chat, please comment below. We plan to post some of our own tips on this medium site, so be sure to follow if you’re interested!
