How to Add Messenger Button on WordPress Website?

How to Add Messenger Contact Button on WordPress Website?

As a website owner, you would want to make yourself available to answer all the general inquiries, pre-sale questions and after-sale support to make your audience happy and satisfied. For that, you can add a contact form or leave your email address and number to establish the communication via email and calls. However, in the digital era dominated by social networks, it would be good to include a contact button integrated with popular social platforms like Messenger, Viber, WhatsApp and Skype to enable your visitors to contact you via live messages.

Why Add Messenger Button on WordPress Website?

According to research, Messenger is considered as one of the most popular chatting application with over 1.3 billion active users worldwide.

So, including its contact button on your website will let your potential customers start the conversation with you via Messenger app for the general queries or pre-sale questions. This will allow you to quickly answer their queries via live chat and can even convert them into leads.

How to Add Messenger Button on WordPress Website?

There are 2 major ways to add Messenger contact button on WordPress website.

The 1st one is by using the tutorial provided by the official Facebook developer. This step requires a fair amount of coding knowledge.

The 2nd option includes the usage of WordPress Messenger button plugin. This process does not require any coding skill and is suitable for both newbies and technical users.

Here, in this blog, we will discuss both these steps to show you how to add Messenger button with or without using a WordPress plugin.

So, let’s get started with the tutorial and add a Messenger contact button on WordPress website:

a) Adding Messenger Button on WordPress by Using Developer Setup

Step 1: Enter Domain Name on Whitelist Domain

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

There, enter your domain name on the Whitelist Domains.

Add Messenger Button on WordPress: WhiteList Domain

Note :-  For security reasons, you will need to whitelist the domain that runs the customer chat plugin. The whitelisting step is included in the setup wizard.

Step 2: Copy Codes

Then copy the code that is generated on the page.

The code may look like this:

Add Messenger Button on WordPress: Source Code

Step 3: Add Codes

Then, go to your WordPress dashboard, Appearance > Editor and paste the source code on the footer.php.

Add Messenger Button on WordPress: Editor

Step 4: Update File

After that, click on “Update File” to save the progress and check out the messenger button on your website.

Note: Since this process include modification of the theme. You might lose the change when the theme is updated. So, to prevent this, please use a child theme. To create a child theme, you can checkout the tutorial: How to install a WordPress Child Theme?

2) Adding Messenger Button By Using WordPress Plugin

Step 1: Installation and Activation

Add Messenger Button on WordPress: WP FB Messenger Lite

Purchase WP FB Messenger Button from CodeCanyon marketplace at a reasonable price of $10. Then, install it on your WordPress website. If you have any difficulties regarding the installation of the plugin then, you can take the help of its documentation.

After that, activate the plugin.

Step 2: User Detail

Upon completing the activation of the plugin, you will see “WP FB Messenger Button” on the left menu of your WordPress backend. Click on it to proceed.

You will land to the user detail page. Here, you need to enter the valid user name of your FB messenger account.

Step 3: Floating Button

Then, shift to the next tab – “Floating button”. It contains all the options to display a floating messenger contact button on your site. The options include:

i) Display Settings:

From here, you can control the appearance of your messenger button. You can enable/disable the messenger chat button for mobiles and desktop. Also, you can enable and add the button text and tooltip as well as set the alignment of the chat button.

ii) Templates:

This section will let you choose the most suitable messenger template from the 10 pre-available templates.

iii) Color Settings:

This settings section will allow you to pick the most favourable color for the button, text, icon and icon background of the messenger button.

iv) Animation Settings:

Here, you can choose the cool animation effects from 10 pre-design button animation available on the plugin.

v) Button Position:

From here, you can set the position of the messenger contact button on 8 different positions of your site’s screen.

vi) Page/Post/Category:

Here, you can specify the page, post and category where you want to display the contact button.

Step 4: Menu Settings

The plugin comes with the feature to add the FB messenger on the menu of your website. This tab contains all the settings available to do that. They are:

i) General Settings:

Here, you can set the position of your messenger button on the menu. Besides, you can also add a custom text on the contact button.

ii) Templates:

You can choose any of the 5 pre-available messenger templates for the contact button that you want to embed on your site’s menu.

iii) Color Settings:

From here, you can pick the custom color for the button, text, icon and icon background.

iv) Menu Option:

Here, you can set the menu in which you want the messenger button to be displayed.

Step 5: Generate Shortcode

The plugin is shortcode ready and allows you to generate a dynamic shortcode as per the settings you have applied on your messenger button. The available settings are :- Display Settings, Templates, Color Settings, Animation Settings, Button Position and Contact Details. These settings contain similar functions as explained on the floating button tab above.

After you have configured and customize all the settings available, click “Click Me to Generate Shortcode” to generate the shortcode. Then, paste it on any location as per your preference to display the messenger button.

Step 6: Custom Chat Button for FB Page

You can add a live customer chat button for FB page to enable you to chat with your customer from your Facebook page. In order to do that, you need to add Facebook App ID and Facebook Page ID.

You can also add choose the theme color, logged in greetings and logged out greetings.

Then, click on the “Save” button to save your configuration and customization.

Which Proccess do You Prefer?

So, these are the 2 major process to add the messenger contact button on WordPress website.

The 1st step can be preferred by the coders who have a good technical knowledge.

While the 2nd process can be used by the non technical webmaster that do not have a good coding skills.

If you have any queries, suggestions and recommendation regarding the step by step tutorial then, feel free to share us on comment box below.

You can also checkout similiar type of tutorial of:

Get latest updates, deals and more from us!
Deals, Updates
and more...
No Thoughts on How to Add Messenger Button on WordPress Website?

Leave A Comment


AccessPress Themes black friday cyber monday sales