How To Article

How To Add Facebook Messenger To Your Website (Sep 2021)

Gerardo Salandra
Chief Executive Officer, Respond.io
February 10, 2019

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 website. Guess what? There is one. It's called the Facebook Customer Chat Plugin, and we've got the ways to add Messenger to website.

What Is A Facebook Messenger Widget?

Facebook Messenger Widget (also known as Facebook Chat Plugin) is a website plugin that allows your website visitors to chat with your Facebook Page via Messenger.

This is a picture of Facebook Messenger Widget. Facebook Messenger Widget (also known as Facebook Chat Plugin) is a website plugin that allows your website visitors to chat with your Facebook Page via Messenger.
Messenger Button on Website

Once website visitors send their first message, you'll be able to message them back and find out more info about them through Facebook Business Suite Inbox. You may also access the conversations through a third-party Inbox like respond.io.

Why Use a Facebook Messenger Widget

There are several reasons why you should add Facebook Messenger to your website. For starters, Facebook Web Chat creates persistent, consistent engagement. Plus you can build a Facebook Messenger contact list with a Facebook Messenger Widget.

Facebook Web Chat Creates Persistent, Consistent Engagement

With the traditional website chat plugin, you'll lose the user forever once they leave your website. Your only hope of continuing the conversation is for them to return to your site. This is no longer the case once you add Messenger to your website.

With a Facebook Messenger button on your website, all your conversations are saved in Facebook Business Suite Inbox. This means you can resume 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 Business Suite Inbox

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

A Facebook Messenger Widget Lets 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.

This is an image that show that Facebook Messenger has higher open & click rates than email. Now that people can message you easily through Facebook using Facebook Customer Chat, they'll be added to your contact list forever. You can think of a Facebook Messenger subscriber list the same way you do an email subscriber list. Use this as a new communication channel with your audience or even use it to deliver Messenger broadcasts, which has a whopping 92 percent open rate.
Facebook Messenger Has Higher Open & Click Rates Than Email

You can think of a Facebook Messenger subscriber list the same way you do an email subscriber list. Use this as a new communication channel with your audience or even use it to deliver Messenger broadcast, which has a whopping 92 percent open rate.

Messenger Widget is just one way to build a Facebook Messenger subscriber list. To get more Messenger Contacts, you can set up Facebook Comment Auto Reply or use Messenger Codes.

Keep in mind, your customers need to sign in to their Facebook accounts in order to be added to a subscriber list. You can’t add customers who message you in Guest Mode to your contact list.

Messenger Widget: Guest Mode

Facebook introduced Guest Mode in 2020, allowing customers to chat with businesses through Messenger widget without logging into their Facebook account. To enter Guest Mode, simply tap Continue as Guest.

Guest Mode offers customers the flexibility to chat with a company anonymously. But the feature has a few downsides for businesses.

This is an image with A Facebook Messenger Widget With A Guest Mode button. Facebook introduced Guest Mode in 2020, allowing customers to chat with businesses through Messenger widget without logging into their Facebook account. To enter Guest Mode, simply tap Continue as Guest.
Facebook Messenger Widget with Guest Mode

For a start, Guest Mode prevents businesses from building lasting connections with customers. Businesses can’t reopen Guest conversations once Guests end the chat or 24 hours from the start of the conversation, whichever comes first.

Guest Mode also makes it challenging to offer a personalized customer experience, as you can’t access customers’ profile info including names. Those who chat with you in Guest Mode will have their names displayed as Guest followed by a short numeric string.

Thankfully, you can disable Guest Mode during the widget setup process. Read on to find out how.

How to Set Up A Facebook Messenger Widget

There are two parts to adding Facebook Messenger to a website:

  • Creating a Facebook Messenger Widget Code
  • Adding the Messenger Widget Code to Your Website

How to Create a Facebook Messenger Widget Code

You can either generate a Messenger Widget Code on Facebook Business Suite Inbox or respond.io. While both platforms serve the same purpose, they offer different features. Facebook Business Inbox gives you the option to turn off Guest Mode, while respond.io lets you set up advanced automation like automated surveys.

B2C companies should opt for Facebook Business Suite Inbox which allows turning off Guest Mode. With Guest Mode disabled, you’ll be able to offer a personalised customer experience and reengage your customers after they leave the website.

That said, disabling Guest Mode can turn away B2B buyers who want to stay anonymous. If you are a B2B business that needs to have Guest Mode on, we recommend going for respond.io which lets you add a reference code to a Messenger widget and set up advanced automation.

Generating a Messenger Widget Code on Facebook Business Suite Inbox

To start, go to the Chat Plugin section in the Facebook Business Suite Inbox. Go to Page Settings > Messaging > Add Messenger to Your Website and click Get Started.

This is a picture showing how to generate a Messenger Widget Code on Facebook Business Suite Inbox. To start, go to the Chat Plugin section in the Facebook Business Suite Inbox. Go to Page Settings > Messaging > Add Messenger to Your Website and click Get Started.
Accessing Chat Plugin from Page Settings

1. Click the blue Set Up button.

This is a picture showing how to generate a Messenger Widget Code on Facebook Business Suite Inbox. Click the blue Set Up button.
Chat Plugin in Facebook Business Suite Inbox

2. Select the language for your Messenger Widget.

This is a picture showing how to generate a Messenger Widget Code on Facebook Business Suite Inbox. Select the language for your Messenger Widget.
Choosing the Language

3. Add the domain for the website you’d like the Facebook Messenger widget to appear.

This is an image showing how to generate a Messenger Widget Code on Facebook Business Suite Inbox. Add the domain for the website you’d like the Facebook Messenger widget to appear.
Adding the Website Domain

4. Click Copy Code and then click Next.

This is picture showing how to Add Facebook Messenger to Website. Click Copy Code and then click Next.
Copying the Code

5. Paste the code snippet to your website. Learn how to add this code to Wordpress, Wix, Shopify and Squarespace.

This is picture showing how to Add Messenger to Website. Paste the code to your website. Learn how to add this code to Wordpress, Wix, Shopify and Squarespace.
Pasting the Code to Website

Click Finish when you’re done. Your Messenger widget is now ready to use. Optionally, you can turn off the Guest Mode for your Messenger Widget.

6. Turn off the Guest Chat toggle to disable Guest Mode. You can find the toggle under Customize Your Chat Plugin.

This is an image showing how to turn off the Guest Mode of a Facebook Messenger Widget.Turn off the Guest Chat toggle to disable Guest Mode. You can find the toggle under Customize Your Chat Plugin.
Disabling Guest Mode

Then, click Publish to make the changes go live. And that’s how you add Facebook Messenger to a website. Alternatively, you can create a Messenger Widget Code on respond.io.

Generating a Messenger Widget Code on Respond.io

To create a Messenger Widget Code on respond.io, you'll need a free respond.io account. Once you have your respond.io account ready, follow the following steps.

1. Navigate to the Channels module. Then, press Add Channel to connect a Facebook page.

Start by creating a channel on the it.respond.io dashboard
How to Make a Messenger Widget for Website: the Channels Module

2. Choose 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 it.respond.io platform.
How to Make a Messenger Widget for Website: Respond.io Channel Connection

3. Press Connect with Facebook. Sign in to the Facebook account that has admin access to the page you’d like to connect to.

This is picture showing how to add Facebook Messenger to it.respond.io Press Connect with Facebook. Sign in to the Facebook account that has admin access to the page you’d like to connect to.

If you are managing multiples pages, you’ll be given the option to choose which page to connect to. Press Done to complete the setup.

4. Press Chat Plugin to start creating the Facebook Messenger Widget Code.

Start creating the Facebook Customer Chat plugin by pressing Chat Plugin on the Respond.io Channel Page.
How to Make a Messenger Widget for Website: 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.
How to Make a Messenger Widget for Website: Facebook Messenger Widget Whitelist

6. Copy the Script and Paste it in the footer of your website.

The last step is to add the Facebook Chat plugin script to your website.
How to Make a Messenger Widget for Website: Facebook Messenger Widget Script

Click Done after adding the code to your website. Now you might be thinking about how to insert Facebook Chat plugin code to your website. That depends on your CMS.

How To Add Facebook Messenger Widget Code to A Website

Below, you’ll find guides to installing the Messenger Widget code on websites like WordPress, Wix, Shopify & Squarespace.

How To Add Facebook Messenger Widget Code To A WordPress Website

Before you integrate Messenger into a WordPress website, make sure you have created a Messenger Widget Code either on Facebook Business Suite Inbox or respond.io.

1. 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.
How to Integrate Messenger in Website: Add The Header & Footer Console

2. Navigate To Headers and Footers.

Once you have the headers and footers plugin added, navigate to it.
How to Integrate Messenger in Website: Open The Header & Footer Console

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

Now paste the Facebook Customer Chat plugin code into the footer of your wordpress website.
How to Integrate Messenger in Website: Add The Script Open The Header & Footer Console

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

How To Add Facebook Messenger Widget Code To A Wix Website

So how do you add live chat to a Wix website? Once you’ve generated a Facebook Messenger widget script, follow the steps below to add it to your Wix Website.

1. 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.
Wix Tracking Tools & Analytics

2. 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

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 Widget Code to Shopify

Once you have the Facebook Chat plugin script, follow these steps to you need to integrate Facebook Messenger into a Shopify website.

1. 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.
Shopify Messenger Chat: Edit Your Online Store Code

2. 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.
Shopify Messenger Chat: Add The Script

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

How To Add Facebook Messenger Widget Code to Squarespace

Once you have the Facebook Chat plugin script, it’s time to embed Messenger in a Squarespace website.

1. 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

2. 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

3. 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

4. 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

You have now added Squarespace live chat plugin to your website.

Further Reading

And that’s how you add Facebook Messenger to your website. If you're interested in knowing more about using Instant Messaging for Business, you should check out these blog posts.

Tags
Copied to Clipboard!

Ready to get started?

Thank you! You are being redirected to sign-up form.
Oops! Something went wrong, refresh your browser and try again.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Sign Up Free