WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How to Add a Facebook Messenger Chat Box to WordPress

Last Updated on April 3rd, 2019

Published on September 22nd, 2017

Tags: ,

Share This Article

You know those live chat boxes you see all over the web, now? There’s a reason they’ve become so ubiquitous – people like using live chat to get instant access to a human.

But live chat plugins aren’t the only way you can communicate with your visitors. You can also add a Facebook Messenger chat box to WordPress to communicate with visitors via the world’s most popular social network.

This is a phenomenon I first noticed in Vietnam, where Facebook Messenger is basically the entire country’s preferred method of communication (slight hyperbole – but it is really popular here).

And you know what? I kind of like it. Almost everyone has a Facebook account nowadays, so it lets people send a message without entering any of their details. And, people can always access their message history directly from their Facebook account.

Is adding a Facebook Messenger chat box good for every website? Probably not. But I encourage you to consider it because it is a great idea for certain audiences.

Either way, I’m going to use this post to show you how to add a Facebook Messenger chat box to WordPress.

How Does the Facebook Messenger Chat Box Work?

In case you’re not entirely familiar with what I’m talking about, let me share a real experience I had to illustrate how the Facebook chat box works.

I wanted to buy a speaker from a Xiaomi store in Vietnam. I speak a little Vietnamese…but not enough to want to go through the whole checkout process by myself.

So, I land on the store and see this…

example of facebook messenger chat box

Article Continues Below

I think, hey, I know that logo. So I give it a click. Then, right away I can type straight into the box and start talking with a human being:

When I do that, I can continue my conversation in Facebook Messenger (or the Facebook Messenger app):

It’s actually pretty slick! And helpful even when your visitors speak the same language as you do.

How to Add Facebook Messenger Chat Box to WordPress

It’s possible to manually add the code for Facebook Messenger chat to your WordPress site. But, after playing around with it, I don’t think it’s the most user friendly way to do it, especially when there are several helpful plugins that can do it for you.

It’s pretty easy to add a static chat box, but harder to add a floating chat widget that looks like other live chat solutions.

If you want to play around manually, you can always grab the code from the Facebook Page Plugin area. I’m going to show you how to do it with two different plugins, though.

Add Facebook Messenger Chat With WhatsHelp Chat Button

In addition to Facebook Messenger chat, this plugin can also help you connect with visitors over WhatsApp, Snapchat, and more. Don’t worry, though. You don’t have to use those other networks.

To get started, install and activate the WhatsHelp Chat Button plugin. It’s free, so you can install it straight from your dashboard.

Article Continues Below

Once you activate the plugin, head to the new WhatsHelp tab in your dashboard and click on the link to generate the button code:

How to Add a Facebook Messenger Chat Box to WordPress

You’ll go to the WhatsHelp site where you can configure how you want your chat widget to function.

If you just want to use Facebook Messenger, make sure to only select that option. You’ll then need to enter your Facebook page’s URL, as well.

Below, you can also customize the message and styling for the button.

And you can always view a live preview in the bottom right:

Once you’re happy with how your button looks, you just need to enter your email and click Get Button Code to see the widget code:

Copy that code and go back to the WhatsHelp page in your WordPress dashboard. Then, paste the code in the box and click Save Changes:

Article Continues Below

And that’s it! Your Facebook Messenger chat button should be live on your site:

Add Facebook Messenger Chat With Cresta Facebook Messenger

Cresta Facebook Messenger is a similar integration that’s dedicated entirely to Facebook Messenger.

One significant difference between this plugin and WhatsHelp is that the icon in Cresta Facebook Messenger uses the Facebook logo, whereas WhatsHelp uses a generic icon.

Additionally, Cresta Facebook Messenger lets you turn off the box on certain content types, which you might find helpful.

If those are important differences for you, here’s how to add a Facebook Messenger chat box to WordPress with Cresta Facebook Messenger.

Like WhatsHelp, Cresta Facebook Messenger is free and listed at WordPress.org, so you can install it directly from your WordPress dashboard.

Once you activate it, go to Settings → Cresta Facebook Messenger to configure it.

At the top, you need to enter the URL slug of your Facebook page, as well as the text you want to show over your Facebook Messenger chat box:

Feel free to leave the other General Settings as the defaults.

Below, in the Floating Box area, you can turn the chat box on or off for certain content types (only if you want to).

While there are plenty more features in the Pro version, that’s about all there is to configure in the free version. Go ahead and click Save Changes and you’re all done!

When visitors go to your site, they’ll first see the Facebook button like this:

And if they click on that icon to expand the Facebook Messenger chat box, they’ll see the full interface:

Notice how the message at the top of the box is the same message you’re able to configure in the Cresta Facebook Messenger settings interface? You can also leave that setting blank if you don’t want to show any message.

Remember – Visitors Have to Continue The Conversation in Messenger

One of the downsides with this implementation, and something that I want to remind you of, is that your visitors will have to continue the conversation in the Facebook Messenger interface. They can’t keep chatting right in the message box:

On one hand, this is nice because it lets you stay connected to visitors even after they leave your site. But on the other hand…it does mean that your visitors have to actually leave your site to continue the conversation in the first place.

Wrapping Things Up

With how easy it is to add a Facebook Messenger chat box to WordPress, I encourage you to play around with this implementation and test how it works for your audience.

I can’t promise that it’s a better solution than a more traditional live chat service, but I do think it’s worth investigating.

Speaking personally, there are plenty of situations where I prefer Facebook Messenger to a live chat solution that forces me to stay on someone’s website to keep talking with them.

Now over to you – what do you think about using Facebook Messenger on WordPress like this?

Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.