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.

When website visitors send an inquiry via the widget, you can reply through the Meta Business Suite Inbox. This is sufficient for businesses that receive low to medium volumes of messages and rely on Facebook Messenger for customer communication.

Businesses that handle high volumes of conversations or chat with customers across multiple channels should use an omnichannel messaging inbox like respond.io. In addition to streamlining all conversations in a single inbox, it offers additional benefits such as advanced automation and analytics.

Why Use Messenger Widget: Facebook Chat Plugin Benefits

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.

Firstly, the Messenger widget is the fastest tool for your clients to reach you and get their questions resolved. It ensures customers can address you instantly and effortlessly on a familiar and comfortable messenger.

It also enables personal communication directly on your website to offer technical support, product consultation, order or booking assistance and more. Customers can reach you while interest is high to drive sales conversions.

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.

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.

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 or links 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.

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:

1. Navigate to your Meta Business Suite and open your Inbox
2. Click on the Settings icon and select View All Settings
3. Select Chat Plugin
4. 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.

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.

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

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.

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

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.

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.

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.

2. Choose Messenger from the channel list.

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

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

6. Copy the script and paste it in the footer of your website.

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.

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

1. Search for Facebook Chat Plugin and select it.
2. Click Install now.
3. Click Activate.
4. Look for the tab that says Customer chat. Navigate to the Getting started section and click Edit chat plugin.
5. 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.

2. Navigate to Headers and Footers.

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

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.

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.

You have now added Facebook Chat Plugin to your Wix website.

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.

2. Open the footer.liquid section and paste the Facebook Messenger Widget 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.

2. Navigate to Advanced Settings.

3. Navigate to Code Injection.

4. Paste the Facebook Messenger Widget 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.

Further Reading

And that’s how you get a Messenger widget to add Facebook Messenger to your website. If you enjoyed reading about how to grow your business with the ultimate chat plugin, learn more about instant messaging for business with these blog posts:

• How to Use WhatsApp Integration with Website
• The Ultimate Guide to Telegram Business
• The Ultimate Guide to Viber for Business