Integrate Facebook Messenger Live Chat In Your WordPress Website [How To]

add-facebook-live-chat-messenger-intergration-with-website-themaverickspirit Pin It

Today, I am going to share – how you can add or integrate Facebook live chat messenger to your WordPress website?

You don’t need any WordPress facebook live chat plugin to receive messages from anyone visiting your site.

But before moving ahead won’t you agree with me that the ways of marketing and user engagement approaches keep upgrading with time!

Email marketing services, Live chat services, and Newsletters are some of the common methods among them.

But now that things have changed, so does the ways!

New generation bloggers, marketers and entrepreneurs are certainly showing interests in instant messaging apps like – Facebook Messenger and Whatsapp over tedious email writings.

Especially when we are already aware of the fact that there are more mobile and smartphone users over desktop users now.

And with the release of Google’s Mobile First index Algorithm, bloggers, websites & businesses are now focusing on the marketing ways that are more convenient for mobiles and smartphones rather than desktop applications.

This is one of the biggest reasons why Facebook has already beaten many old-fashioned and orthodox marketing ways with a huge difference.

That’s when we realized and decided to embed the Facebook messenger real-time live chat button as one of our user interaction medium in our websites – TheMaverickSpirit & ThemeMantis – A WordPress Theme Store.

But Live Chat Services Does The Same Thing, So Why Use Facebook Messenger? 

You’re right!

But live chat services like Olark & JivoChat – Best For Business Websites are either paid or comes with a free plan with super limited features.

And obviously, who wants to pay for every project or website he starts!

Also, it’s almost impossible for a blogger who is just starting and startups to opt for paid services from the very beginning. What’s the solution?

The solution is pretty simple. Use your Facebook page as a lightweight CRM, and integrate Facebook messenger as a free live chat solution!

Easy, right?

I am sure you don’t want to get behind and would like to integrate the Facebook messenger in your WordPress website as well.

Let’s get started on how to do it – 

Step-by-step Guide To Integrate Facebook Messenger In Your WordPress Website –

  1. Create a page if you don’t have one for your business or website on Facebook.
  2. If you already have a page on Facebook, then open up your page settings and search forMessenger Platform” on the left menu items.
  3. Once you open Messenger Platform in your Facebook settings, you need to look out for “Customer Chat Plugin” and click on the button “Set Up”.
  4. A window will get open and you will be asked to change the welcome text, response time and color of the messenger button.
  5. But the most important thing you need to do is to whitelist your domain appeared in the last window.
  6. The next and last step is to add the code appearing on the right side of the above image on your WordPress website.
  7. Here’s what you need to do add the code in your website –
  • Copy the code you’re going to get in the last window of Customer Chat Plugin Setup.
  • Locate functions.php in your WordPress theme’s folder. You will probably find it in the root of your theme folder.
  • Paste the below code at the bottom of the functions.php.

Do not forget to replace the text “Enter Your Page Facebook ID” with your Facebook page ID in the code below.

function maverick_add_facebook_messenger() {

?>

<!– Load Facebook SDK for JavaScript –>

<div id=”fb-root”></div>

<script>(function (d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id))

return;

js = d.createElement(s);

js.id = id;

js.src = ‘https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1’;

fjs.parentNode.insertBefore(js, fjs);

}(document, ‘script’, ‘facebook-jssdk’));</script>

 

<!– Your customer chat code –>

<div class=”fb-customerchat”

attribution=setup_tool

page_id=”Enter Your Page Facebook ID”>

</div>

<?php

}

add_action(‘wp_footer’, ‘maverick_add_facebook_messenger’);

Save the file and refresh your website by hitting Ctrl + f5.

Bonus Feature: Bot Support –

I’ve seen many business websites using the Bot Support in their website’s live chat service. But Facebook doesn’t provide anything like that!

What to do to get one?

Well, after spending some time digging the internet, I finally found a reliable solution for creating a bot for my facebook messenger which is, ChatFuel.

ChatFuel is free of cost and can be embedded directly into your website. It is an easy DIY solution to create a personalized facebook messenger chat bot for support. Amazing, isn’t it?

Final Thoughts –

By integrating the Facebook chat messenger with your WordPress website, you are not only increasing the user engagement but also the percentage of lead generation.

Check out this short list of benefits –

  1. You’re just one click away from your users and the best part is they won’t miss a reply, in fact, will get an instant one. 😉
  2. Unlike live chat services, you will automatically have the visitor’s information as they will use their Facebook profile to connect with you.
  3. In future, you can send your users offers, free ebooks, free services, and much more right into their Facebook Messenger.

If you find any difficulties regarding the installation and integration of Facebook Messenger with your website, you can either –

  • comment on this post,
  • write us an email at admin[@]themaverickspirit[dot]com,
  • contact us via TheMaverickSpirit Contact Page
  • or just hit the messenger button visible at the right.

The choice is yours. 😉 We would be very happy to help you out. 🙂 

Leave a Reply

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