Add CTA Buttons to Show/Open Facebook Chat Window on WordPress.

Written by Nick Li

Nick Li is a web developer and web designer who works for Concentric Digital. He helps others to add values to their WordPress website, and develop cross-platform application using Ionic framework and Angular JS!

March 25, 2021

Official Facebook Messenger chat plugin for WordPress

Facebook has grown beyond than just a social media platform, but also one of the biggest and rapidly growing digital marketing environment that bridges an ultimate connection between buyers and sellers.

In fact, Facebook API keeps developing and bringing new technologies, helping businesses of all size to improve their profitability and their overall growth through their online appearances.

Facebook has released their official Facebook Messenger chat plugins for WordPress, enabling your visitor to contact you directly and instantly on your website through Facebook Messenger live chat. This gives you an edge over your competitors in capturing your potential client immediately on your website.

Key features of the Facebook Chat WordPress Plugin:

  • No disconnection: Using the plugin creates a long-lived thread between you and your customers in Messenger. Customers can start a chat on your website and carry on in their mobile device with the Messenger app.
  • Chat transcripts are automatically created in the customer’s Messenger account
  • The familiar, modern interface of Messenger builds trust and encourages your customers to engage with you
  • You can use the same Inboxes on desktop and mobile that you use to manage your Facebook page messaging
  • You can set up hours of availability, auto replies and FAQ to serve customers when you’re not available

Previously, we had made a tutorial on how to install and configure the plugin.

However, the official plugin lack the function to open the conversation window directly using hyperlink on your call to action (CTA) buttons.

But don’t worry, we have the code snippet here for you. All you need to do is include the code snippet in the site header, and simply add the class “.openChat” to the button.

<script>
(function($) { 
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){
		$(".openChat").click (function (event){
		event.preventDefault();
		FB.CustomerChat.showDialog();
	})
  });    
})( jQuery );
</script>

Not sure what we meant? Read on for more detail instructions on how to achieve this. (Or contact us and we will help you out!)

Method 1: Add custom code to your theme

Most WordPress themes include options for you to insert custom script to site header without using any external plugins. Check your theme options to look for tab like “code integration” or “integration”.

Here in Concentric Digital, we love using Divi from Elegant Themes. Divi includes tons of professional template with no-coding visual editor, and our customer can modify their website themselves with ease when needed. We will show you how to do it with Divi.

First, navigate to Divi Theme Options and click on the Integration tab. First, find the “Enable header code” toggle and make sure it is enabled. Next, scroll down until you see “Add code to the < head > of your blog”, then simply paste in the code from the snippet above and click “Save Changes”.

Now make sure you added the css class “openChat” to your buttons. You can do it by modifying CSS class of the element on Divi in “Button Settings –> Advanced –> CSS ID & Classes”. Viola! That’s it.

Method 2: Use a headers and footers plugin

There are a lot of plugins that allows easy insertion of scripts into headers and footers of your WordPress site. We recommend… well, the “Insert Headers and Footers” plugin which have over 1 millions active users, it cannot be wrong.

Simply activate the plugin, and insert the code snippet from above in the “Scripts in Header”.

And of course, once again, remember to add the class “openChat” to your button element.

That is it! Hopefully it helps you out to get more customer with the Facebook Chat WordPress Plugin.

You May Also Like…

Subscribe

Simplify and fortify with Microsoft Security solutions, wherever you work. For more insights, news, and features,...

0 Comments

Submit a Comment

Your email address will not be published.