How To Article

How To Add Facebook Messenger To Your Website

By February 10, 2019August 4th, 2020No Comments
How To Add Facebook Messenger To Your Website

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 and 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, and we've got the ways to add Facebook Messenger to your website today.

In this article we're going to cover:

What Is The Facebook Messenger Widget?

Facebook launched the Customer Chat Plugin in 2017. What makes the Facebook Messenger Widget better than regular live chat? Your website visitors are chatting with you through a Facebook Messenger.

There are ways to add facebook messenger to website. 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. This is how to add facebook messenger to website. 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.
Screenshot of Customer Chat Plugin

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 Install The Facebook Messenger Widget

We're going to show you how to install a Facebook Messenger Plugin for your website using a special code we developed at respond.io. While Facebook asks you to paste two separate scripts, we’ve created a single script to make installation easier.

To install this code using our script you'll need:

1. Log in to the respond.io platform and create a space.

First, you'll need to create a space on the respond.io platform.
Create a Space

2. Press connect a channel to connect a Facebook page.

Start by creating a channel on the respond.io dashboard
Respond.io Dashboard

3. Choose Facebook Messenger from the channel list.

Before you can create the script for the Facebook Messenger Widget, you will need to connect your Facebook page to the respond.io platform.
Respond.io Channel Connection

4. Press Chat Plugin to start creating the Facebook Messenger widget script.

Start creating the Facebook Customer Chat plugin by pressing Chat Plugin on the Respond.io Channel Page.
Respond.io Channels Page

5. Add your website to the whitelist. This is required to add Facebook Messenger to your website.

Before you can insert the Facebook Custom Chat plugin code to your website, you'll need to add your website domain to the whitelist.
Facebook Messenger Widget Whitelist

6. Copy the Script and Paste it in the footer of your website. See how to add this footer for WordPress, Wix, Shopify, Squarespace and Google Tag Manager.

The last step is to add the Facebook Chat plugin script to your website.
Facebook Messenger Widget Script

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

Once you've added the Facebook Messenger Widget to your website it will display like on the respond.io contact page.
Respond.io Contact Page

Now you might be thinking how to insert Facebook Chat plugin code to your website. That depends on your CMS. Below we have guides for WordPress, Wix, Shopify & Squarespace.

How To Add Facebook Messenger to Your WordPress Website

Make sure to follow steps 1 to 7 first. This will give you the code you need to paste into your WordPress site to have a Facebook Messenger Widget on your website.

8. Add The Header and Footers Console on WordPress.

Once you have the Facebook Chat Plugin code ready you can add the headers and footers plugin to your wordpress.
Add The Header & Footer Console

9. Navigate To Headers and Footers.

Once you have the headers and footers plugin added, navigate to it.
Open The Header & Footer Console

10. Add the Facebook Messenger Widget script to the footer.

Now paste the Facebook Customer Chat plugin code into the footer of your wordpress website.
Add The Script Open The Header & Footer Console

Done. You have now added Facebook Messenger Live Chat to your WordPress website.

How To Add Facebook Messenger to A Wix Website

Make sure to follow steps 1 to 7 first. Once done you’ll have the Facebook Messenger Widget script you need to add to your Wix Website.

8. Navigate to Settings > Advanced Settings > Tracking & Analytics > + New Tool > Custom.

Now that you have you have your Facebook Messenger widget code ready, navigate to Custom Code inside Wix.
Add a Custom New Tool In the Tracking & Analytics Tab

9. Paste Facebook Messenger Widget code and select the pages where you want the code to apply. Make sure you place the code in body – end.

Take you Facebook Chat plugin script and paste it inside the custom code dialog.
Fill in the Custom Code Form

10. Done. You have now added Facebook Chat plugin to your Wix website.

Now the Facebook Messenger widget will show up on your Wix Website.
Your New Facebook Customer Chat Plugin Is Installed

How To Add Facebook Messenger to Shopify

Make sure to follow steps 1 to 7 first. Once complete you’ll have the Facebook Chat plugin script you need to add Facebook Messenger to Shopify.

8. Navigate to Online Store and edit code.

Once you have your Facebook Customer chat plugin script ready, Navigate to your spotify themes and edit the code.
Edit Your Online Store Code

9. Open the footer.liquid section and paste the Facebook Messenger Widget script.

Take the Facebook Messenger Widget code and add it into the footer.liquid section of your Spotify website.
Add The Script

10. Done. You have now added Facebook Messenger Live Chat to your Shopify website.

How To Add Facebook Messenger to Squarespace

Make sure to follow steps 1 to 7 first. Once complete you’ll have the Facebook Chat plugin script you need to add Facebook Messenger to Shopify.

8. Log in to Squarespace, select your site and open Settings.

Once you have your Facebook Messenger widget code ready login in to squarespace to start the installation process.
Open Your Site Settings

9. Navigate to Advanced Settings.

There are ways to Add Facebook Messenger to Your Website. To Integrate Facebook Messenger Into Your Squarespace Website Open Advanced Settings. This is how to Add Facebook Messenger to Your Website.
Open Advanced Settings

10. Navigate to Code Injection.

There are ways to Add Facebook Messenger to Your Website. To Integrate Facebook Messenger Into Your Squarespace Website Open Code Injection. This is how to Add Facebook Messenger to Your Website.
Open Code Injection

11. Paste the Facebook Messenger Widget script.

There are ways to Add Facebook Messenger to Your Website. To Integrate Facebook Messenger Into Your Squarespace Website Add The Script. This is how to Add Facebook Messenger to Your Website.
Add The Script

12. Done. You have now added Facebook Messenger Live Chat to a Squarespace 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 in to your respond.io 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. 

Why 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. This is no longer the case once you add Facebook Messenger to your website.

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

All your messenger widget conversations will be saved to Facebook Inbox. This is a benefit when you Add Facebook Messenger to Your Website.
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 Widget 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.

With a Facebook Messenger Widget on your site you can attain 90% open rates on your newsletters. This is a benefit when you Add Facebook Messenger to Your Website
Facebook Messenger Open Rates

You can think of a Facebook Messenger subscribers list the same way you do 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:

How To Add Facebook Messenger To Your Website
Gerardo Salandra

Gerardo Salandra

Gerardo Salandra is the CEO of Respond.io. An IBM & Google veteran, with deep expertise in growth hacking, machine learning, and chatbots. Chairman of the AI Society of Hong Kong, promoting the development and understanding of AI technologies in the Region.

69 Shares
Share via
Copy link
Powered by Social Snap