facebook messenger customer chat unicorn

How to Add Facebook Messenger Chat to a WordPress Site

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. Here are some Facebook Messenger templates

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

What’s not to like?

News flash: live website chat is a donkey compared to customer chat on your site powered by a Facebook Messenger chatbot.

I’m talking about unicorn-infused customer chat here:

  • No wait times for customers — that means 24/7 instant responses
  • Persistent conversations powering follow-up marketing messaging
  • Creates personalized customer profiles enriched with each interaction
  • 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.

By the way, 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 a Facebook Messenger 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 Facebook Messenger customer chatbot on your website?

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.

Here’s how to add Facebook Messenger chat to a WordPress website in two steps:

  1. Create a customer chat HTML element.
  2. Copy the code into your WordPress footer.

Super quick break-down here followed by tips on desgining the most engaging on-site chatbot.

Step 1: Create a customer chat HTML element

MobileMonkey will generate the code for you to add to your WordPress site.

Go to “HTML Elements” in the left nav, and click the button to “Add HTML Element”:

add-new-html-element

Choose the Facebook Messenger “Customer Chat Widget” from the options:

new-customer-chat-widget

To complete the Facebook Messenger customer chat website widget set up:

setup-facebook-messenger-customer-chat-widget

  1. Name the widget element something descriptive. I recommend adding something like “do not delete” to the name to ensure no accidental deletion of critical website or chatbot infrastructure.
  2. Choose the page you want the website chatbot to respond to users with. By default, the Welcome page will be selected.
  3. Add all domains to the whitelist where you’re using this Facebook Messenger customer chat widget.
  4. Click the “Copy” button to save the code to your clipboard.

A quick note about the Welcome page. Every chatbot from MobileMonkey comes equipped with 3 pages we call “Chatbot Basics”:

  1. Welcome page
  2. Default page
  3. Main Menu

If you create a new chatbot from scratch, this is what the welcome page says:

brand-new-welcome-chatbot-page

We’ve customized our welcome page in line with Facebook’s own customer chat tips, with the users’s first name greeting them and CTA buttons that allow the user to navigate to content they might be looking for:

chatbot-welcome-page

Here’s what it looks like in the website chat on the site:

welcome-chat-page-on-site

Find Facebook Messenger customer chat recommendations below.

Step 2: Copy the code into your WordPress footer

Depending on your theme and WordPress rig, there are probably a few ways to churn out unicorn glitter. Here’s one of the common ways to add the Facebook customer chat code to your WordPress site.

From your WordPress dashboard, go to Appearances > Editor. Choose the “Theme Footer” template to edit.

Scroll to the bottom of the footer code, and right before the closing tag, paste the Facebook Messenger customer chat widget code:

paste-customer-chat-widget-wordpress

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

Facebook Messenger Customer Chat Best Practices

Facebook released the customer chat widget in beta 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.

Be a Unicorn in a Sea of Donkeys

Important next steps:

1 thought on “How to Add Facebook Messenger Chat to a WordPress Site”

  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.

Leave a Comment

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

Chat Marketing 2019: Virtual Conference on the Future of Custo​​​​mer Communication

Launch chatbots. Break records. Free • Live • Online • Dec. 12, 2019