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.
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.
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.
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.
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.
1. Click the blue Set Up button.
2. Select the language for your Messenger Widget.
3. Add the domain for the website you’d like the Facebook Messenger widget to appear.
4. Click Copy Code and then click Next.
5. Paste the code snippet to your website. Learn how 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 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.
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 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.
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 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.
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 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.
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.
You have now added Facebook Chat plugin to your Wix website.
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.
2. Open the footer.liquid section and paste the Facebook Messenger Widget 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.
2. Navigate to Advanced Settings.
3. Navigate to Code Injection.
4. Paste the Facebook Messenger Widget 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.
