Add Facebook Messenger to Website: A Messenger Widget Guide [Sep 22]

Looking for the ultimate chat plugin? If your web visitors are avid Messenger users, add a Facebook Messenger widget to your website. In this blog post, we’ll show you how to add Facebook Messenger to a website, as well as where to add the Facebook Chat Plugin on website builders like WordPress, Wix and Shopify.

What is a Facebook Messenger Widget?

The Facebook Messenger widget (or Facebook Chat Plugin) is a website plugin that allows site visitors to chat with your Facebook Page via Messenger. As one of the world’s top messaging channels, customers are naturally inclined to chat over 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. If you are in places like the United Kingdom (UK), the United States (US), India or the Philippines, consider Messenger as the ultimate chat plugin. — For the ultimate chat plugin, install Messenger widget on website

When website visitors send an inquiry, reply and chat with through the Inbox in Meta Business Suite. Alternatively, or even to supplement this, connect a third-party inbox like respond.io for additional benefits such as advanced automation and analytics.

Why Use the Facebook Chat Plugin

If you’re leveraging Facebook Messenger to provide customer support or push sales, you know how effective the platform is. Among the key reasons to consider using Facebook web chat is its ability to create persistent conversations and build a contact list.

Facebook Chat Plugin Creates Persistent, Consistent Engagement

With traditional website chats, you'll lose users 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.

When you add Facebook chat to website, a contact’s chat history is saved in Meta Business Suite’s inbox. This means you can resume a conversation with a user who chatted with you on Messenger even after they’ve 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. — Save contact information and chat history when you add Messenger to website

Along with the conversation, you also get to see some of their basic profile information including their name, profile picture, birthday and location. This will help you serve the customer better than any live chat could and build a relationship with them over time.

Add Messenger to Website to 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. — Add Facebook Chat Plugin: Facebook Messenger has higher engagement 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 send Messenger broadcasts, which have a staggering 92 percent open rate.

The Messenger widget is just one way to build a Facebook Messenger subscriber list. There are several ways to grow your Messenger contacts, including Facebook Comment Auto Reply or private replies, Click to Messenger ads and Facebook QR codes.

Customers have to be signed in to their Facebook accounts to be added to your contact list. You can’t add customers who message you in Guest Mode. Read on to see if you want to enable or disable Guest Mode when you add Facebook chat to a website.

Facebook Chat Plugin: Guest Mode

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

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. This is the sort of flexibility that makes Facebook Messenger the ultimate chat plugin in places like the UK, the US, India, Philippines and more. — 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.

It’s also impossible to offer a personalized customer experience in Guest Mode as you can’t access any customer information. 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 Facebook Messenger Widget: Creating a Widget Code

First, let’s talk about the Messenger widget setup process. To add Facebook Messenger to a website, you need to do these two steps in sequence:

Create a Facebook Messenger widget code
Add the Messenger widget code to your website

You can either generate a Messenger widget code in Meta Business Suite or respond.io. While both platforms serve the same purpose, they offer different features.

Meta Business Suite gives you the option to disable Guest Mode. B2C companies should opt for this as turning off Guest Mode allows them to capture leads, offer a personalized customer experience and reengage 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 setting up your Facebook Chat Plugin via respond.io.

Not only can you automate greetings or away messages and processes like chat routing or contact assignment, respond.io lets you add a reference code to a Messenger widget to identify where contacts come from. Large businesses should consider this option.

Generating a Messenger Widget Code in Meta Business Suite

Here’s how to add Facebook Messenger to any website using Meta Business Suite. From your Facebook Page:

Navigate to your Meta Business Suite and open your Inbox
Click on the Settings icon and select View All Settings
Select Chat Plugin
Click on Set Up

To tailor the functionality of your widget to your needs, select the automation and customizations you want from the list before clicking on Set Up. Then, select the setup method you would like to use to generate the Messenger Widget code.

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 to start installing your Facebook chat plugin. — Facebook Chat Plugin in Meta Business Suite

2. Select the Facebook Chat Plugin setup method you would like to use. If you see your site builder on the list, select it. Otherwise, select Standard.

This is a picture showing how to generate a Messenger Widget Code on Facebook Business Suite Inbox. Select the site builder on which you'd like to install the Messenger Widget. — Select your website builder if it’s on the list or select *Standard*

3. Select your preferred language for the chat plugin. Then click Save & continue.

This is an image showing how to generate a Messenger Widget Code on Facebook Business Suite Inbox. Select the language you'd like for the Facebook Messenger widget to appear, like American English for the United States (US) or British English. — Select the language

4. Add the domain for all the websites in which you’d like the chat plugin to appear. Ensure the domain pasted in the code generator does not include a page. Click Save & continue when done.

This is an image showing how to generate a Messenger Widget Code on Facebook Business Suite Inbox. After you add your language, eg American English (US), add the domain for the website you’d like the Facebook Messenger widget to appear. — Add the website domain

5. Click on the Copy code button to copy the code. Then click Next.

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

6. Paste the code snippet to your website. Further down, we’ll briefly show you where 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. — Paste the plugin code snippet on your 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 install Facebook Messenger on website chat! 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 respond.io account. Then, follow these steps:

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

Start by creating a channel on the 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 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 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. — Connect with Facebook

If you manage multiple Pages, you’ll be given the option to choose which Facebook 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 Facebook chat widget code to your website, and there you have it — your Facebook Chat Plugin should be up and running.

Now, you might be wondering how to add Facebook chat to your website. This depends on your CMS. We’ll walk you through some of the methods on how to add Messenger to website for popular site builders.

How to Add Messenger to Website Using Widget Codes

Navigating your CMS to add a chat plugin can be confusing. Below, you’ll find the instructions to install the Messenger widget code on popular site builders like WordPress, Wix, Shopify and Squarespace.

How to Add Facebook Messenger Widget Code to a WordPress Site

You can now install a Messenger plugin by Meta directly from the Plugins tab in the sidebar. While the plugin itself is free, installation is only available to Business plan subscribers or Pro plan users, for those on legacy plans.

This is an image showing you how You can now install a Messenger plugin by Meta directly from the Plugins tab in the sidebar. While the plugin itself is free, installation is only available to Business plan subscribers or Pro plan users, for those on legacy plans. If you are in location where Messenger is the ultimate chat plugin, such as the UK, the US, India or The Phlippines, add this to your WordPress site. — WordPress Pro or Business subscribers can install the Facebook Chat Plugin directly

To install the Facebook Chat Plugin on WordPress, follow these instructions:

Search for Facebook Chat Plugin and select it.
Click Install now.
Click Activate.
Look for the tab that says Customer chat. Navigate to the Getting started section and click Edit chat plugin.
Customize your chat plugin and complete your setup.

Alternatively, integrate Messenger into a WordPress site by using the Messenger widget code. This also requires going through the paywall. There are a few ways you could add a Messenger widget code to WordPress, including installing a header and footer plugin.

1. Add the header and footer plugin of your choice from the Plugins page.

Once you have the Facebook Chat Plugin code ready you can add the headers and footers plugin to your wordpress. — Add a header and footer plugin

2. Navigate to Headers and Footers.

Once you have the headers and footers plugin added, navigate to it. — How to integrate Facebook Messenger on website: Open the header and 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 Facebook Messenger on website: Add the script to the header and footer console

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

How to Add Facebook Chat Plugin Code to a Wix Website

What if you would like to 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. Do note that you’ll require a paid subscription to access this feature.

1. Navigate to Settings > Advanced Settings > Custom Code.

Now that you have you have your Facebook Messenger widget code ready, navigate to Custom Code inside Wix. — Add Messenger widget code to Wix

2. Paste the 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 Chat Plugin is installed

How to Add Facebook Chat Widget 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 shopify themes and edit the code. This is worth doing if you are using Shopify in a country where Messenger is popular, such as India, the Philippines, the United Kingdom (UK) or the United States (US). — 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 the Facebook Chat Plugin on 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 Facebook Messenger live chat to your website.

We’ve shown you how to create your Facebook chat widget code and install Facebook Chat Plugin on some of the most popular site builders. Want to chat with customers on Messenger widget and other channels, as well as access their contact details and chat history in a centralized inbox? Register for a respond.io account now.