Looking for a live 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 website visitors to chat with your Facebook Page via Messenger. As one of the top messaging channels in the world, customers naturally prefer chatting over Messenger.
When website visitors send an inquiry, reply to them and gather more information about them through the Inbox in Meta Business Suite. Alternatively, 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 even after they’ve left your website.
Along with the conversation, you get to see some of their basic profile information including name, profile picture, birthday and location, helping you serve the customer better than any live chat could.
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 and Facebook QR codes.
Customers have to be signed in to their Facebook accounts to be added to a contact list. You can’t add customers who message you in Guest Mode to your contact list. Read on to see if you want to enable Guest Mode when you add Facebook chat to a website.
Facebook Chat Plugin: 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.
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.
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 can be confusing. Below, you’ll find instructions on installing the Messenger Widget code on websites 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:
- 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.
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 and other channels, as well as access their contact details and chat history in a centralized inbox? Register for a respond.io account to get your Messenger widget now.
And that’s how you get a Messenger widget to add Facebook Messenger to your website. To learn more about using instant messaging for business, check out these blog posts: