The Complete Guide to Adding Facebook Messenger to Any Website, From Easy Plugins to Custom Code

When it comes to running an online business, you need to build consumer trust as quickly and efficiently as possible. Fortunately, the Internet caught on fairly quickly to this in the past few years. I mean, if you can’t try on a pair of shoes, you should at least be able to ask a question about them and receive an answer fairly quickly, right? Um, yeah!

Gone are the days where you have to wait to hear back in 24-48 hours from a business or sales representative about one of their services, products, or blog posts. This is 2021! And, despite a few global setbacks, we can say that 2021’s web services are looking mighty appealing. One of these stellar services is none other than Facebook Messenger.

The use of Facebook Messenger can benefit your business

Facebook Messenger has been around for a while at this point, and most likely, you already know how to use it. But chances are that you don’t know all it can do for you.

According to a 2016 study conducted by Facebook, 53% of customers are more likely to shop with a business that they can message. Knowing that there is someone just a click away builds consumer confidence and can triple conversion rates, according to Ometrics. Why wouldn’t you want something like this for your website?

If you need a reliable, semi-automated chat service for your website, you can download and install the Facebook Chat Plugin. It is free to use, entirely recognizable, and an incredible asset to your sales funnel process. Here is the complete guide to adding Facebook Messenger to any website, from easy plugin to custom code (and there really isn’t that much code work).

What makes Facebook Messenger a unique website feature?

Yes, Facebook Messenger is another live chat service. But behind this, “just another live chat service” is a reliable, global name. Its widespread use offers familiarity and convenience, as guests can feel in control of the application they’re using. And if it’s a chat service they're already using, they’ll be significantly more likely to contact you using this platform.

The benefits of live chat

The benefits of using any chat service on your website, live or otherwise, are both obvious and unique. For one, you can instantly create a good rapport with potential customers and clientele, guiding them closer to the conversion you want to see. It also helps you generate meaningful leads and record customer data (contact information, regional interest, demographics, and more).

If you prefer using a chat client as a customer service AI, you can take advantage of the endless stamina an AI has. That’s right—you won’t have to worry about variables in human thought, attitude, and patience. A chatbot is designed to answer visitors’ questions as you program it to answer and will learn over time how to answer questions it may not be so familiar with.

On the flip side, having a dedicated customer service team behind the chat client is just as important as the consistency an AI can bring to the table. You get all the convenience of quick service, but can better cater to individual requests and questions that may not be a part of your regular algorithm and FAQs.

24/7 availability

Together, using a chatbot and a real-life customer service representative can benefit your website’s customer service game. You can effectively become available 24/7, using humans during office hours and chatbots for evenings, overnights, and holidays.

How Facebook Messenger stands out

When it comes to Facebook Messenger, you get all of this and more. When guests start a conversation on your website, they don’t have to learn brand new tools to keep it going. On the same note, you don’t have to capture information and fear that you’ll lose an entire conversation because you had to refresh a live chat app.

You can continue the conversation right in Messenger with everything you talked about still there. Since your customers will likely have this app on their phone, they’ll get notified when you respond.

How can you use it?

Facebook Messenger is a flexible tool, so if you can find a reason to incorporate a live chat feature in your website’s daily functions, it’ll probably work. Here are a few common and practical ways people use the plugin.

24/7 chatbot

As mentioned before, you can use the Facebook Chat plugin as an AI chatbot. When visitors to your site have a question, the bot will respond with an answer found in FAQs or whatever you specify.

The more information you add ahead of time, the more you can control the narrative and guide customers through the sales funnel.

Welcome message

You can personalize a message to greet visitors on your website. Starting the conversation this way encourages potential customers to engage with the bot, starting the conversion process. And you don’t have to stick with the traditional, “How can we help you?”

You can use leading topics based on frequently asked questions to encourage customers to strike up a conversation.  

Lead generation method

Facebook Messenger allows for a lot more options than just answering questions or handling customer complaints. If you’re looking to gather effective leads to your business, you can use the chat plugin to encourage email list signups, conduct short surveys, ask questions, and collect demographic information.

Of course, you’ll need to include a privacy policy if you do this as you are collecting and exchanging information.

Collect and track feedback

Having a chat transcript on hand is a great way to go back into the archives and see what customers have to say about your products. You’re essentially storing different types of consumer data that you can use to make the user experience better in the future.

Follow up

Not every first-time interaction leads to a sale. That’s just the way it goes. And there’s nothing worse than being in the middle of a chat with a “warm” lead when they sign off — and you’ve lost them. You just have to cross your fingers that they’ll come back and strike up another chat. Facebook Messenger is a great solution to this.

Now, you don’t have to let your leads run cold like yesterday's leftovers—you can keep offering information, help, services, or materials to keep them moving in the right direction. Even after a customer has left your site, you can follow up with them through the app.

Who is Facebook Messenger best suited for?

Though Facebook Messenger can benefit anyone’s website, smaller businesses that have a limited budget may find it the most useful. Cost effectiveness is a very important point here. First, the plugin is free; you can use a quality service at zero cost to you.

And when you have a chatbot at your disposal, you don’t have to spend money on hiring a customer support team. The plugin is also helpful for websites that operate around the clock. Someone, or something, will always be there for your website’s visitors.

How to add Messenger to your website

Adding Facebook Messenger to your website is not as complicated as you think. If you’ve ever used WordPress plugins and extensions before, then you already have a head start in what it takes — which isn’t much!

Before you can use the plugin, however, you’ll either need a Facebook Page or an existing website through WordPress, ManyChat, Chatfuel, Shopify, Wix, Squarespace, or Webflow. Luckily, these options cover several of the most popular site builders available.

Generating chat plugin code from a Facebook page

To add Facebook Messenger directly from your Facebook page, you’ll need to go to Settings > Messaging > Add Messenger to Your Website > Get Started. You’ll essentially be linking your domain here.

Go to Set Up Your Chat Plugin > Set Up. Enter your language, website URL, and any other information it asks of you. You’ll receive a code that you can copy and paste into your website’s builder so that the Facebook Chat plugin appears.

Adding chat plugin to a website

You will have to download the Facebook Chat plugin on your website builder. Remember, this is free, so you don’t have to worry about missing out on any features because you can’t afford a premium subscription.

Different website builders will have different instructions for downloading the plugin. Let’s take a look at Facebook’s recognized seven different web builders. Out of all of them, WordPress is the only one where you do not need to place the code you generated from your Facebook Page.

WordPress

Wordpress Image Source

To download the Facebook Chat plugin on WordPress, you’ll go to Plugins > Add New and search for Facebook Chat Plugin. After you select the correct plugin, click Install > Activate Now. Messages sent to you through Facebook Messenger will appear in your business inbox.

Where to put the code

Like we said at the beginning of this article, you won’t need to get heavily involved in code to use Facebook Messenger on your website, but you will need to copy/paste it for some websites.

Shopify

Shopify Image Source

The e-commerce hosting platform requires the code you generated through your Facebook page to run the Facebook Chat plugin. Open up the Themes option under Online Store and select Customize under your current theme.

Next, go to Theme Actions > Edit Code. Carefully scroll through the code until you find a line that begins with <body>. Paste the Facebook Chat plugin code directly underneath <body>. Click Save.

Webflow

Webflow Image Source

Go to Project Settings > Custom Code. In the footer section of the code, paste the Facebook Chat plugin code. Click Save. Oh, that was easy.

Squarespace

Squarespace Image Source

Another easy copy/paste code here. Navigate to Settings > Advanced > Code Injection. Paste the code in the footer and press save.

ManyChat

ManyChat Image Source

If you’re already using ManyChat, you’ll need to take a few extra steps to get Facebook Messenger to work with your website. From the Growth Tools, press tab, then go to +New Growth Tool. Select Customer Chat > Setup > Install Javascript Snippet.

Add your domain to ManyChat’s authorized list by clicking Add. Then, install the ManyChat Javascript Snippet. Stay with me; we’re almost done. Finally, once you see your website, paste the code wherever you want Facebook Messenger to appear. That’s as complicated as it gets.

Chatfuel

Chatfuel Image Source

From your Chatfuel account, go to Grow. Enable the Chat Plugin and copy the code on the website where you would like to see Facebook Messenger.

Wix

Wix Image Source

Finally, we come to Wix. Wix isn’t too complicated, but there is a lot of navigating and extra steps involved. Go to Settings > Advanced > Custom Code. Look for the Head section, Add Code. Paste the Facebook Chat Plugin Code in the snippet space. You’ll then have to give your code a name under Add Code to Pages. We suggest naming it something obvious, like Messenger.

Once you’ve completed this step, go to All Pages > Load Code Once. Follow this next step carefully, or you won’t get the plugin to work. Under ‘Place Code In,’ select Head. Now, click Apply and Publish.

Adding automated responses

To generate automated responses and engage your audience before they even have a question, navigate to Start the Conversation. You’ll want to write out a welcoming and informative welcome message to your visitors. Consider adding information about any upcoming promo codes, sales, or sweepstakes to generate interest and leads immediately.

Customizing the chat plugin

Don’t like the way your plugin looks? If you want to customize your Facebook Chat plugin, go to Customize Your Chat Plugin. There, you can adjust the plugin’s color, size, and alignment.

Best practices for effective live chat messages

There is an art to every bit of writing, and how you say what you say on live chat can be the difference between a sale and an abandoned cart. If you’re using a chatbot, you’ll also want to make sure that that bot reads as human as possible.

Fortunately, the techniques you use to avoid being unappealing are mostly the same for bots that want to come off as more human. The goal is to be natural, friendly, positive, solution-forward, and convincing.

Avoid all caps

Listen, everybody does it. We use all caps unnecessarily all the time. Maybe it’s for emphasis, a way to write a heading, or just easier for you to read. Either way, that’s not always how it’s perceived on the other end.

All caps is Internet slang for “I’m shouting at you.” And that shouting does very little to help your public image. If you think about it, text in all caps is intrusive and breaks the flow of text. Plus, it just looks angry.

Don’t be afraid to use emojis

Emojis are no longer taboo in a professional setting. In fact, for business-casual customer service, they can go a long way. A customer cannot see your face, and sometimes it’s difficult to read the tone of a message. An emoji is a way to convey exactly how you feel—it’s not your face, but it is a face.

Just make sure you’re not overusing them or using them inappropriately. Stick to simple options, like a smiling emoji in response to a satisfied customer.

Stay consistent during your chat

If you have a very distinct brand voice when working with customers, maintain that tone throughout. It’ll keep the conversation more stable. If you have multiple people answering chat messages, try sharing some common phrases to keep your brand voice more consistent.

Canned responses can also help to save on typing time and ensure that the customer experience is more uniform.

Be a wallflower

There’s a time and place to be bold and beautiful but now is not the time. While you should take advantage of options to customize in a way that coordinates with your site, your chat colors should never look like classic PowerPoint gradient options.

Stick to default text fonts, sizes, and colors. Remember that, in this circumstance, your goal is to make the conversation easy for the customer to read and follow along with. If you go too over-the-top, they might miss out on critical details that can help them convert to the next stage in the sales funnel.

Be precise, not short

You might as well type back, “K.” That’s how misleading a simple “okay,” “fine,” or “yup” can be. When you are working in customer service, take the time for proper responses. Be careful about using abbreviations and texting slang in your messaging.

You don’t necessarily have to use advanced language, but definitely turn “idk” into “I’m not sure. Let me check on that for you.”

“Give me a moment…”

And speaking of looking into something, if you think you’re going to need more than a minute to locate a piece of information or talk with your manager, let the customer know. Don’t leave them wondering where you are or if the chat is still active. Chances are, they’ll go away frustrated, and you won’t get another shot.

Don’t be funny

A live chat is not a place to practice your stand-up routine. Keep your conversation professional and friendly. And remember that sarcasm does not translate well in a customer service setting, no matter how good your intentions were. When it comes to customer service, clarity and accuracy are far more important than a well-timed one-liner.

Pay attention to grammar

The rest of the world may be avoiding proper punctuation, the nuances of spelling out homonyms (there, their, they’re), and sentence structure—but you shouldn’t. A live chat agent should remain professional in both tone and presentation.

Sending messages riddled with spelling errors and basic grammatical mistakes is like looking at a chipped manicure. Your live chat agents are setting your brand up as the expert, so you want to give accurate responses your customers can count on.

Be clear

One of the basic yet most crucial rules to writing your chatbot’s FAQs—and therefore its automated answers—is to always be clear. Seems obvious, right? You’d think so.

But clarity is not about over-explaining. Target your most commonly asked questions and answer them directly; don’t beat around the bush.

In one to two sentences, describe the solution, the steps someone needs to take, and the positive outcomes your products or services provide.

Review the transcripts

You don’t have to read every chatbot transcript, but you should read enough that you can identify the questions your chatbot cannot answer and address them. This will make your chatbot more effective and your website a more enjoyable experience for visitors.

A little time spent adding to your chatbot’s knowledge base can be exponentially helpful as your site gains more traction.

Comparing Facebook Messenger with other message plugins

There are a wide variety of messenger options out there that are built to support businesses just like yours. But how do you know which option to choose, and how does Facebook Messenger stack up against them?

We’ll cover a few of the leading messenger plugins and how their features compare with Facebook Messenger.

LiveChat vs. Facebook Messenger

LiveChat Image Source

LiveChat is a popular messaging option that offers a few similar features to Facebook Messenger. It saves your chat history and lets you connect with social share buttons. This way, customers can talk about how exceptional your customer service is with their friends. Additionally, LiveChat encourages guests to rate their agents and leave feedback about their conversations.

It displays customer wait times and allows you to control chats over multiple websites on one dashboard. These features can come in handy, but they’re not for everyone.

Small business owners who typically use Facebook Messenger integration may not have multiple sites that require chat functions, and they may have no need for social sharing on messenger applications. So is the additional investment really worth it?

While LiveChat, overall, offers more customization to match with your site, it’s also fairly expensive. A premium account starts at $16 per month for one user, and rates increase if you have additional agents handling your live chats. They offer a 14-day free trial, but they also don’t have any free conversation options, unlike other paid plugins.

Olark vs. Facebook Messenger

Olark Image Source

Olark is more complicated to set up. Why? Because you can only install it as a widget using a code. While Facebook Messenger has a code option, it also has an easy-to-set-up plugin feature that’s compatible with the hottest, trending website builders. Similar to Facebook’s app, Olark saves your chat history. It also has a customizable chat box and connects easily with CRMs. Customers can leave feedback, and Olark provides detailed chat reports.

This widget integrates with third party help desk applications. But for small businesses, that might be a feature you’d want your agents to handle. And with Smith.ai handling your Facebook Messenger, you can give the live agents your FAQs sheet so they know what to say. You can also program the Facebook chatbot to respond with automated answers.

One interesting feature is that Olark does allow you to organize and group your chat agents into teams. But this would really only be helpful if you had several agents and a high volume of interactive site traffic. With this program, you can have up to 20 free conversations per month. Beyond that, you’ll need a premium subscription for $20 per month.

Zendesk Chat vs. Facebook Messenger

Zendesk Image Source

Zendesk seems to be a valuable option if you need calculated metrics based on your chats on the fly. Its dashboard is loaded up with information to evaluate your customer conversations. But that’s not necessarily a feature that every site will need.

And you have to log in to the dashboard to respond to customer questions. You do have the ability to customize themes and layouts, and you can have one agent handling multiple chats. However, they can only work with one conversation at a time. Comparing this against Facebook Messenger, you can seamlessly hop between chats with multiple potential customers.

While Zendesk is technically a free plugin, that doesn’t include all of its features. To have access to options like chat triggers, you’ll need to purchase their premium option, which is about $14 per month.

OptinMonster vs. Facebook Messenger

OptinMonster Image Source

Interestingly enough, OptinMonster has both some of the least and most expensive pricing. Their options range from $9 to $80 per month, depending on package and renewal pricing. Still, they have inviting popups and chat boxes you can style with a drag and drop builder.

The most exciting feature is their ability to target visitors with your chat. You can set your chat to show up for more engaged site visitors or have it initiate a chat based on the time a customer has spent on a page.

They have some really unique options, but you have to remember that they don’t actually have their own live chat software—they integrate with others. So even at their most expensive option, they’re still not able to provide the full functionality you might need.

SnapEngage vs. Facebook Messenger

SnapEngage Image Source

One of SnapEngage’s most popular features is its ability to work with other platforms, like Facebook and Twitter. But if you’re already using Facebook Messenger, then that function loses a bit of its luster.

SnapEngage is also a widget-only feature, but it has customizable options and CRM integrations with platforms like Salesforce. It does offer some unique elements, like call-back request functions and the fact that it’s HIPPA compliant.

These would be helpful for niche medical sites but otherwise might not necessarily be worth the $16 to $26 monthly fees compared to Facebook Messenger’s free plugin.

Pricing out your conversations

Available messenger platforms are chock-full of flashy features, but you need to be aware of how they actually affect conversion rates for your target audience. Hey, maybe those extra templates, reports, and evaluations really do make a huge difference on the success of a sale.

Or maybe not.

It’s no secret that lead-generating conversations are usually worth paying for. But the question is, how much are they really worth? You might be throwing away hundreds of dollars a year over features that the customer doesn’t care about. Instead, put your resources towards functionality that can help solve problems, answer questions, and offer the support customers need.

Remember, adding Facebook Messenger to your website is free. And “free” is not a four-letter word (technically it is, but you get the idea). If you can stay on top of your live chat game, you’ll get the conversations and conversions you want without having to pay a penny.

Conclusion

Adding a live chat feature to your website is a total upgrade. And for many small businesses trying to operate an around-the-clock company, it’s become almost a necessity.

Because of its popularity as a social media messenger, it makes a great stepping stone into a complex world of sales funnel services. It also has advanced features, like 24-hour chat retention and automated responses to improve the experience for your guest.

You never have to miss a potential customer with Smith.ai’s 24/7 chat services. Book a free 30-minute sales consultation with us and check out our live chat pricing details to see how we can help your business.

‍