Monday, February 18, 2019

How to add live WhatsApp chat on your website?

WhatsApp chat

Although many are concerned about security and are on Facebook’s property, WhatsApp is one of the most used messaging platforms worldwide by individuals and businesses.

WhatsApp has more than 1,5 billion users around the world. And you can give all of them the possibility to use their favorite chat channel in your website.

Setting up a live chat button on WhatsApp is easy and here we will explain it to you.

¿Are you still wondering why should you add WhatsApp to your WordPress Website?

Here are some big reasons to do it.
  • The response of a live chat is faster than waiting for the response from an email.
  • WhatsApp users who are on your website recognize the icon quickly.
  • It could increase sales, especially in cases in which the answer to the user’s question is decisive in making the purchase decision.
  • It gives you an advantage over your competitors over those who are not sufficiently prepared to use the good use of the tool.
  • It can help you discover opportunities in customer concerns and detect trends that can help develop and improve products and services.
  • Generate loyalty in the clients, a person attends them.

How does it work?

When a visitor touches the WhatsApp icon, it will automatically start and a new conversation will open with the user. If this action is done from a computer, a new tab will open in the browser with the PC version of WhatsApp.

How to install and configure the plugin?

If you are not using the Divi theme:

First, you must download and install the WhatsHelp Chat Button plugin. Once downloaded and activated in your website, go to and click on the “Get your button” button.

From there, follow these steps:

  • Remove Facebook Messenger from the list by clicking on the X on the right side of the text field. Then, enter the phone number associated with the WhatsApp account you use on your page.
  • Customize the button: the URL of your page, a greeting message, position, color, and call-to-action.
  • After these steps, you will be ready to request the code. Enter your email address and click on “Get button code”.
  • Once you have received the code in your email, copy it into the WhatsApp code field in your WordPress.

If you are using Divi

A theme like Divi of Elegant Themes does not require installation, just add the code in the section “Add the code to the <header> of your blog” in the integration tab of the Divi options panel. That is: Dashboard> Divi Theme Options> Integration.

The add-on provides an easy way to add the code to the header of your website.

How to make the button look round?

The button is square by default, but if you prefer it round, insert the following code in the style sheet of your child theme. If you are using Divi, add it to the custom CSS field in the Divi>>General Options tab.

If you have some CSS knowledge you can easily give some more styling to button here.

This is how you can integrate WhatsApp messaging to your WordPress.

If your website doesn’t have it yet you can’t wait no longer.

Take advantage of this powerful and popular chatting service now.

¿Are you already using WhatsApp in your site? Please tell us something about it leaving a comment.

Jefferson Maldonado
the authorJefferson Maldonado
UX WordPress Designer
Ux & Web Designer. Portafolio: Divi Blogger, WordPress Expert, UX Designer, Business Consultant.

Leave a Reply