How to add Facebook’s Customer Chat Plugin to your website

By Gerardo Salandra 
How to add Facebook’s Customer Chat Plugin to your website 随笔 第1张

Do you need a live chat plugin on your website? It would be great if your web visitors would chat with you through Facebook Messenger so you could message them back any time you want. However, you would need some kind of Messenger Widget on your site. Guess what? There is one, it's called the Facebook Customer Chat Plugin. It is a simple way to add Facebook Messenger to a website.

In this article we're going to cover:

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

What Is The Facebook Customer Chat Plugin?

Facebook launched the Customer Chat Plugin in 2017. It is one of the Facebook widget for website. What makes the Facebook Customer Chat better than regular live chat? When chatting using the Facebook Web Chat, your website visitors are chatting with you through a Facebook Messenger widget. Once they send their first message, you'll be able to message them back and find out more info about them through Facebook Inbox. You'll even be able to send broadcast messages to all the people who spoke with you through the Facebook Chat Plugin.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第2张 Screenshot of Customer Chat Plugin

It looks just like a live chat website plugin and it does add chat to your website, but the way it works means you basically add Facebook Messenger to your website.

How To Install The Facebook Customer Chat Plugin

We're going to show you how to install a Facebook Messenger Plugin for your website using a special code we developed at Rocketbots. This code is better because it makes installation easier. Instead of pasting the two codes in two different places, we've created a way integrate a Facebook Messenger widget into your website with just one code. To install this code using our script you'll need:

Now that you've got those out of the way, you'll just need to follow the steps below.

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

How to add Facebook’s Customer Chat Plugin to your website 随笔 第3张 Create a Space

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

How to add Facebook’s Customer Chat Plugin to your website 随笔 第4张 Connect Your Facebook Page

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

How to add Facebook’s Customer Chat Plugin to your website 随笔 第5张 Fill In Your Channel Details

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

How to add Facebook’s Customer Chat Plugin to your website 随笔 第6张 Whitelist Your Domains

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

How to add Facebook’s Customer Chat Plugin to your website 随笔 第7张 Add Your Greeting Message

5. Copy the Script and paste it in the footer of your website.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第8张 Copy Your Script

6. Done. Load your website, and the Facebook Messenger Customer Chat plugin will appear in the bottom right of the page. 

How to add Facebook’s Customer Chat Plugin to your website 随笔 第9张 Example of Facebook Customer Chat Plugin on www.rocketbots.io/contact

How To Install The Facebook Customer Chat Plugin with WordPress

Make sure to follow steps 1 to 5 first. This will give you the code you need to copy into your WordPress site.

6 Add The Header and Footers Console on WordPress.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第10张 Add The Header & Footer Console

7 Navigate To Headers and Footers.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第11张 Open The Header & Footer Console

8 Add the Script To The Footer.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第12张 Add The Script Open The Header & Footer Console

Done. Facebook Messenger Live Chat is now on your website.

How To Install The Facebook Customer Chat Plugin with Wix

Make sure to follow steps 1 to 5 first. This will give you the code you need to copy into your Wix site.

6 Log in to Wix and select the site you want to edit.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第13张 Select The Site You Want To Edit

7 Open HTML iframe by going to Add Icon > More > HTML iframe.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第14张 Select HTML iframe

8 Add the script and press Apply to save the changes.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第15张 Add The Script

Done. Facebook Messenger Live Chat is now on your website.

How To Install The Facebook Customer Chat Plugin with Shopify

Make sure to follow steps 1 to 5 first. This will give you the code you need to copy into your Sqaurespace site.

6 Navigate to Online Store and edit code.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第16张 Edit Your Online Store Code

7 Open the footer.liquid section and paste the script

How to add Facebook’s Customer Chat Plugin to your website 随笔 第17张 Add The Script

Done. Facebook Messenger Live Chat is now on your website.

How To Install The Facebook Customer Chat Plugin with Sqaurespace

Make sure to follow steps 1 to 5 first. This will give you the code you need to copy into your Shopify site.

6 Login In To Squarespace, select your site and open Settings

How to add Facebook’s Customer Chat Plugin to your website 随笔 第18张 Open Your Site Settings

7 Open Advanced Settings

How to add Facebook’s Customer Chat Plugin to your website 随笔 第19张 Open Advanced Settings

8 Open the Code Injection console

How to add Facebook’s Customer Chat Plugin to your website 随笔 第20张 Open Code Injection

9 Add the script

How to add Facebook’s Customer Chat Plugin to your website 随笔 第21张 Add The Script

Done. Facebook Messenger Live Chat is now on your website.

FAQs

What if the user isn’t signed in? 

If the user is not signed in to Facebook, the widget will still call out to the user to chat. Only this time they’ll be prompted to sign into facebook. Which is as simple as Facebook popping up their own window in the user’s browser, and prompt a sign in. 

How can I access the conversation? 

Simply sign into your Rocketbots account, and navigate to the Messages page in the lefthand menu. Here you’ll see a list of everyone who’s reached out to you. 

How can I provide 24/7 support?

If you’ve connected your Facebook page with Rocketbots, you’ve already got the winning mix for a real 24/7 support experience in the palm of your hand. Rocketbots uses AI to learn from your conversations. As you continue chatting, the AI gets smarter until it’s ready to start automating responses for you. Making it more likely to have the platform respond to users after hours. So just keep chatting and soon you’ll have a true 24/7 support machine. 

Why Facebook A Facebook Messenger Widget Is Better Than Live Chat

Facebook Web Chat Creates Persistent, Consistent Engagement

With traditional live chat website plugin, once the user has left the website, you've lost them forever. Your only hope of continuing the conversation is them returning to your site.

With a messenger widget on your website all your conversations are saved there are saved in Facebook Inbox. Meaning you can pick up a conversation with a user who chatted with you even if they left your website.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第22张 Facebook Inbox

Along with the conversation, you get to see some of their basic profile info, helping you serve the customer better than any live chat could.

A Facebook Messenger Plugin Let's You Build A Facebook Messenger Contact List

Now that people can message you easily through Facebook using Facebook Customer Chat, they'll be added to your contact list forever.

How to add Facebook’s Customer Chat Plugin to your website 随笔 第23张 Facebook Messenger Open Rates

You can think of a Facebook Messenger Subscribers list the same way you do as an email subscriber list. You can use this as a new communication channel with your audience. You can even use it to deliver messenger newsletters with 90% open rates and 60% click rates.

Further Reading

If you're interested in leveraging a Facebook Messenger plugin and learning about other Facebook Plugins for Websites you should check out these articles:

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄