Customer Chat plugin (beta)

Configuring customer chat plugin for your website
Written by Andy Instantano
Updated 4 years ago

What is the Customer Chat plugin by Facebook?

The Messenger customer chat plugin allows you to integrate your Messenger experience directly into your website. This allows your customers to interact with your business anytime with the same personalized, rich-media experience they get in Messenger.

The customer chat plugin automatically loads recent chat history between the person and your business, meaning recent interactions with your business on messenger.com, in the Messenger app, or in the customer chat plugin on your website will be visible. This helps create a single experience for your customers, and enables you to continue the conversation even after they have left your webpage. No need to capture their information to follow up, just use the same conversation in Messenger. More on Facebook

How to set this up for your website?

Easy! First, navigate to Sales Channels, tap Facebook and click Messenger Chat Plugin

Next, key in the URL for the website you want to enable this experience for.

Click Add.

Branding and other bits

  1. To match the personality of your brand, feel free to change the color of the widget.
  2. Configure the welcome message, and...
  3. Paste the code before the </body> tag on your root HTML

We'll be updating this to make it seamless and enhancements to change welcome messages on the fly with our upcoming releases.

Here's what a sample code looks like:

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.2'
});
};

(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="713149312222974"
theme_color="#7540EE"
logged_in_greeting="Hi! How can we help you?" <!-- You can change this here too -->
logged_out_greeting="Hi! How can we help you?"> </div> <!-- You can change this here too -->

Have fun!

Did this answer your question?