facebook messenger customer chat unicorn

How to Add Facebook Messenger Chat to a WordPress Site [2020 Update]

Today I’m going to show you how to add Facebook Messenger customer chat to a WordPress website with a chatbot you manage in MobileMonkey.

We know that 55% of consumers are interested in interacting with a business using messaging apps.

And we know that adding chat to a website can improve conversion rate 45%.

What’s not to like?

News flash: live chat is a donkey compared to web chat on your site powered by a smart, automated Facebook Messenger bot doing automated lead capture and triage.

What if your website visitor doesn’t use Messenger?

MobileMonkey OmniChat can be set up to offer your web visitor a no-login-required web chat widget instead!

We’re talking about unicorn-infused web chat here:

  • No wait times for customers — 24/7 instant responses
  • For visitors chatting in Messenger, they will save the conversation and can reach out any time with follow-up issues
  • Your business is able to reengage that website chat contact in Messenger with Sponsored Message ads
  • Your business creates customer profiles enriched with each interaction
  • Messenger web chat is cross-device functional and mobile-friendly — the conversation is available on your site, the Messenger app and Facebook desktop!

And Facebook Messenger customer chat powered by a MobileMonkey chatbot costs less than chat staffed by live human operators.

And when a live agent is needed, the chat can easily be handed over to a live agent at just the right time.

The ability to take over for the chatbot is available at any time a la live chat operator takeover. So when a hot lead comes in or the bot can’t answer a tough customer question, you can be notified and follow-up.

See for yourself what interacting with an OmniChat website customer chatbot is like.

Click the “Chat Now” button in the bottom right of this page or any page on MobileMonkey.com and say hi!

facebook-messenger-customer-chat

Ready to launch your own OmniChat web chat that detects if a user is logged into Messenger or not?

We’ll go over the quick 2-step process to installing Facebook Messenger customer chat to a WordPress website powered by Facebook Messenger marketing platform, MobileMonkey. Max interaction and automation engage!

By the way, if you’re not using WordPress, follow our Facebook Messenger customer chat widget installation instructions for Google Tag Manager. You can also do some recommended reading of handy Facebook Messenger templates.

Now, here’s how to add Facebook Messenger chat to a WordPress website in two steps:

  1. Create and customize a customer chat widget.
  2. Install the code to your site using a tag manager or WordPress plugin.

Super quick break-down here followed by tips on designing the most engaging on-site web chat bot.

Create a Facebook Messenger Customer Web Chat Widget

Option 1: If you’re running a WordPress site, you can install the WP-Chatbot WordPress plugin and quickly add MobileMonkey’s OmniChat widget to your site.

Option 2: This option works by generating a little Javascript code that you can add to your website template or tag manager.

Now the options above merge into one easy web chat customization tool. Everyone follow along!

Go to Chatbots > Chat Starters > Customer Chat Widgets and click the button to “Create Customer Chat Widget”:

new customer chat widget

Go through the setup steps for your the Facebook Messenger website chat widget:

facebook chat widget setup 1

First, name the chat widget something descriptive. For example, you can have a different chat widget on your pricing page than the rest of your site, so call one “Pricing Page Widget” and the other “General Chat Widget.”

Next, choose the color, shape, page position, and optional animation for your chat widget look.

Then, customize the greeting message that will show up in a box around the chat widget for new visitors to your site. You can specify a different message for Facebook Messenger customer chat and for web chat (non-logged in visitors).

set up facebook customer chat greeting

Next, it’s time to write the chat conversation flow. Give the visitor a menu of options like a phone tree to help guide them to the information they’re looking for. Connect responses using “paths” to the next question or text in the conversation flow.

facebook customer chat path

To add more content to the flow, click the “+” icon and choose from the different content widgets — like questions that require user replies, text, images, animated GIFs, attachments, and more.

add content widgets to chatWhen you’ve completed the conversation flow, you have the option to show this particular chat only when certain criteria are met (mobile visitor, desktop visitor, first-time visitor, returning visitor, during business hours, and even only on certain website pages).

optional when to show chat widget customization

Next, tell MobileMonkey the domain you’re adding this customer chat widget to and how you plan to add the code snippet to the site. MobileMonkey will give you code to add install on your site.

install chat widget code

And last but not least, there’s a troubleshooting diagnostic tool to give you more info on issues that might be causing your widget to not show up or not behave like expected.

facebook customer chat widget diagnostic tool

Voila! You’ve got a brand new web chat and Facebook Messenger customer chat widget on your WordPress website.

In fact, you can preview this web chat widget using the Preview feature at the top of the chat widget setup page:

The tool will let you toggle between webchat mode and Messenger customer chat widget mode, if you have both enabled.

customer chat widget preview tool

Find Facebook Messenger customer chat recommendations below.

Facebook Messenger Customer Chat Best Practices

Facebook released the customer chat widget at the end of 2017. In the announcement they suggested a couple things.

Facebook customer chat tip #1: Use a welcome message with first name

When someone clicks the button on your site to chat now, your MobileMonkey chatbot can greet the user “Hi, <first name>!”

In MobileMonkey, use the chatbot builder to edit your Welcome page.

Type two left-curly-brackets to see all the user variables you can include in the chat text. {{firstname}} will include the user’s first name from their Facebook profile.

See all the Facebook system variables — those automatically shared by default to Facebook Messenger marketers on the MobileMonkey platform:

custom-attributes-system-variables

Facebook says:

Including your customer’s first name in the greeting message of both new and existing threads is a nice way to drive customer engagement.

Facebook customer chat tip #2: Remind users they can always pick conversations back up in Messenger

One of the major advantages of Facebook Messenger customer chat with chatbots is persistent conversations tied to customer profiles.

Live chat and other on-site chat platforms don’t keep a history of chats and they certainly don’t tie chat history to a rich customer database that can inform marketing objectives.

Because we’re using Facebook Messenger, conversations can happen on mobile and desktop, in the Messenger app, on Facebook, and within your website chat widget. All with a unified chat history!

Facebook tells us to let users know that they can contact a business any time from the Messenger app:

Having a conversation begin on your website and continue it on Messenger is a new experience for many customers. Including text to remind people that the conversation can continue even if they leave the website is helpful context for navigating this new experience.

Facebook even gives us some helpful examples:

“If you ever need to return to this conversation, look for us in your Messenger inbox.”

“We’re currently out of the office but will reply as soon as we’re available. Look for a reply from us in your Messenger notifications.”

All the benefits of website chat — more conversions, quick answers for customers — with a laundry list of next-level unicorn advantages for using Facebook Messenger’s persistent chat, and MobileMonkey’s Facebook Messenger marketing chatbot?

Get MobileMonkey free and install your website customer chat widget in 10 minutes today.

get_mobilemonkey_web_facebookmessenger_sms_chatbot_free

Be a Unicorn in a Sea of Donkeys

Important next steps:

  • Get MobileMonkey for FREE (non-expiring, UNLIMITED contacts).
  • Talk and learn about chatbots with other enthusiasts. Join MobileMonkey Island, a Facebook group of over 35k marketers and entrepreneurs that are ready to support you.
  • Advance your marketing performance with Chatbot University, a free chatbot tutorial and training area for chat marketers.

4 thoughts on “How to Add Facebook Messenger Chat to a WordPress Site [2020 Update]”

  1. This is brilliant and super helpful.

    One of the biggest challenges for marketers is to have conversation continuity with target audience/customers. It is not that easy to achieve.

    But the way bots help in carrying a conversation from one platform to another using bot with so much ease will definitely find lot of favor from businesses and customers alike.

    1. Virginia Nussey

      Thanks for sharing, Umair. I’ve also seen that the continuity aspect can be a challenge, keeping a conversation going once you’ve interacted is can be as tough as making initial contact. Facebook Messenger automation opens up an opportunity for businesses in this regard.

  2. Does mm chatbot work with fb lite?
    I can’t open the chatbot on your site and when I get messages on my site. They show up in my fb notifications but not on my fb lite message feed.

    1. Virginia Nussey

      Hi Dara, good eye. Facebook Lite doesn’t have all the bells and whistles, and apparently, not chatbots.

Leave a Comment

Your email address will not be published. Required fields are marked *