How to add a Messenger button on your WordPress website?

How to add a Messenger button on your WordPress website?

Do you want to add a Messenger button on your WordPress site? Including the messenger button on the website lets your audience easily contact you via live chat/call for any type of pre-sale questions, general inquiries, and after-sale support. This will make communication between you and your potential clients more reliable and can increase the conversions and credibility of your work.

Why Add Messenger Button on your Website?

As you know Messenger is a popular mobile application directly integrated with the most popular social media network Facebook. Therefore, most of the mobile users who browse the internet may have Messenger pre-installed on your smartphones. So, adding its contact button on your WordPress website allows a large number of users to communicate your via live chat/call directly from their mobile phones.

How to Embed Messenger Contact Button on WordPress?

Now let’s get along with the step by step tutorial and add Facebook Messenger contact button on your WordPress website.

We will discuss 2 different ways:

  1. Using Developer Setup Method
  2. By using a free WordPress Messenger contact button plugin

The 1st method requires a fair chunk of coding knowledge. So, if you are a technical user with great coding skills, you can carry out this process.

The 2nd method does not require coding. So, this method is feasible for both laymen and coders.

1. Adding Messenger Contact Button Using Developer Setup Method

Step 1: Enter Domain Name on Whitelist Domain

Go to Page Settings >> Messenger Platform >> Customer Chat of your Facebook fan page.

Enter Domain Name

There, enter the domain name of your website.

Step 2: Copy Codes

Then, copy the codes that are generated on the right side of the popup.

<!-- Load Facebook SDK for JavaScript -->
     <div id="fb-root"></div>
       window.fbAsyncInit = function() {
           xfbml            : true,
           version          : 'v4.0'

       (function(d, s, id) {
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) return;
       js = d.createElement(s); = id;
       js.src = '';
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));</script>

     <!-- Your customer chat code -->
     <div class="fb-customerchat"

Step 3: Add Codes

You need to copy the code on each page where you want to display the Messenger contact button. 

Here, we have done on the footer bar.

Add Code

After you are done, update the file to save the codes.

Then, visit the website to check out how the Messenger button will look.

Messenger Chat Button

2. Adding Messenger Contact Button by Using WordPress Plugin

Now let’s talk about adding the Messenger chat button by using the WordPress plugin. The plugin that we will use is Messenger Customer Chat. It is a free WordPress Messenger button plugin developed by the official Facebook developers to place the responsive Messenger button in few clicks.

So, let’s started with the tutorial and display a responsive messenger contact button:

The first thing you do is install and activate Messenger Customer Chat plugin on your WordPress website. To know the detail about the installation, you can check out our article: How to Install a Plugin on your WordPress website

Upon activation, you will see Customer Chat on the left menu of your WordPress dashboard. Click on it to continue.

You will land to the “Messenger Customer Chat Settings” where you can set up the Messenger customer chat button on your website.

Messenger Custom Chat Settings

Click on “Setup Customer Chat” to proceed.

A new Window will be loaded that will ask to you select the Facebook page of which you want to select the messenger button.

Choose Page

Select the Page and Click on “Continue”.

It will direct you to the “Language” page where you can change the language and greeting text to add your own greeting text.

Language Page

After you are done, click “Next”.

Then, it will direct you to the “Appearance” page where you can choose the color for your messenger button that matches the overall design of your website.

Appearance Page

After you are done, click on “Finish”. 

A code snippet containing the codes will be added on the “Messenger Customer Chat Settings”.

For editing your Messenger button, you can always go back through the setup process or edit the code manually.

Now visit your WordPress website to look at how your messenger button will look like.

Messenger Button


Please enter your comment!
Please enter your name here