Who does not use WhatsApp today? WhatsApp is the most popular instant communication app, with more than 2 billion active users. For this reason, more and more companies are integrating WhatsApp on their website to facilitate contact with customers. But how can you add the WhatsApp button in WordPress? We tell you!
Why should I implement WhatsApp in my WordPress?
For your website to be successful, it is essential that there are communication channels through which users can contact you. Traditionally, the most common channels were the contact form, the email address and the telephone, but it is increasingly common to find other contact channels such as chatbot or WhatsApp.
The more the better. We are used to “less is more” but in the case of communications, forget about it! The more communication facilities you give the user, the more likely you will be contacted. And what is easier and more comfortable than sending a WhatsApp? It is an app that we all have on our phone, instantly and without the need to be on the phone because, let’s face it, most of us are lazy to be calling and having to wait for the right department to attend to you.
This is especially when your business is based on capturing leads or contacts, but it is still important in the field of electronic commerce. How many times has a question arisen in the middle of a purchase and you have abandoned the cart because you couldn’t find the answer? It is true that this could be part of what is known as (Conversion Rate Optimization), but if you make it easy for the user to contact your online store quickly and easily, it will be much easier for them to convert! simple!
How to put WhatsApp button in WordPress with plugin
The simplest thing, especially if you don’t control too much HTML and CSS, is to implement a WhatsApp button using a plugin. In WordPress there are many plugins to integrate both WhatsApp and other contact channels such as chatbots, but from we are going to tell you which ones we like the most.
What these plugins do is add the WhatsApp button on our website. The WhatsApp icon will be permanently displayed on the screen, so that it will always be visible while the user browses. This makes contact easier.
JoinChat
JoinChat is a WordPress plugin that, in its free version, allows you to easily integrate WhatsApp and customize some interesting little thing. But if we like something about JoinChat, it’s that you don’t have to do anything to record the events in Google Analytics: it starts recording them automatically.
The first thing you should do, as always, is to install the plugin. To do this, access the plugin repository and search for JoinChat or download it from . Once activated, we go to the configuration.
Search in the WordPress administration menu for the plugin: Join.chat and enter.
Upon accessing, you will see several tabs that will allow you to configure and customize your WhatsApp button. Let’s start!
Customize WhatsApp
To adjust the basics and customize the message, we will enter the General Menu.
The first thing you will meet will be the phone number and the message that you want to appear by default in the user’s WhatsApp when the conversation begins. This is useful to indicate to the user what type of message we expect from him. For example, if we are in the services sector, we may expect the user to request a visit or consult information about a service. If we are in an ecommerce, perhaps we expect the user to ask us about a product. Thus, we can put «Hello! I want to make an appointment” as the default message. However, this message is not sent automatically, but the user can modify it before sending it.
But not only that, we can use variables that will be modified depending on where the chat is started from. The variables we can add are {SITE} {TITLE} {URL} {HREF}.
For example, we can make it so that if the user is starting the chat from the SEO page, the message is “Hello! I would like to have more information about the SEO service». Here is the example:
The Pop-up information, on the other hand, is a speech bubble that will be displayed next to the WhatsApp button. If you don’t put anything, it simply won’t appear.
In position on screen, you can choose whether you want the icon to appear on the left or right of the screen. As a general rule, they are usually placed on the right, so we recommend that this be the case, since that is where the user expects them to appear. Also, you can choose the appearance delay the WhatsApp button. In this sense, it is always better that it appears with a certain delay (3 seconds is fine) because the appearance of new elements captures the attention. If you want him to whatsapp button only show on mobile, you just have to click. Simpler, impossible.
Show WhatsApp only on some pages
Another notable aspect of Joinchat is the option to choose where we want the WhatsApp button to appear and where it doesn’t. For example, we may not want the button to appear on the blog pages, we will only have to click on the button with the crossed out eye and that’s it!
User consent
If you also need to have the user’s consent to comply with data protection regulations and ensure that they authorize you to receive messages from you, you can do so from the Advanced section, where you can also enter the Google Ads conversion label if you run SEM.
In a few minutes, you will have the WhatsApp button added to your website and you will be ready to receive messages from your clients. Leads, come to me!
How to put the WhatsApp button in WordPress without a plugin
If you do not want to add additional plugins to your WordPress, you can do it through the manual method. In this case, we have two options:
- Put the WhatsApp link in an image or anchor text
- Put a fixed WhatsApp button somewhere on the page
Put WhatsApp link in an anchor text or image
If you don’t have much knowledge of CSS and HTML, this is the easiest way to integrate WhatsApp into your WordPress without the need for a plugin.
We only need to know the phone number that we want the messages to be sent and generate a URL following the following structure:
https://web.whatsapp.com/send?phone=TUTELEFONO&text=LOQUEQUIERAS
We must change YOUR TELEPHONE for the telephone number to which we want the messages to arrive. eye! The number must go all together, including the country extension. For ex: 34619147415
We must change WHATEVER by the text that we want to be written by default in the initial WhatsApp. For example “Hello, I would like to receive more information”
Once the URL is formed, you just have to choose where you want to place the WhatsApp button. It can be an image or text and the link insertion method is the same as any other link.
Insert link to WhatsApp in a link
In WordPress, adding links is the easiest thing to do. If you are in the classic editor (now Gutenberg), you just have to select the anchor text and enter the link generated previously.
If we wanted to add the text directly in HTML, without the help of the WordPress constructor, we would put a code like the following:
To the previous code, we have also added the “whatsapp” CSS class, so we can apply different styles through CSS, such as showing it only on mobile and hiding it on PC.
Insert link to WhatsApp in an image
As when inserting a link in a text, what we must do is choose the image where we want to include the link to WhatsApp.
A good example in which we usually make use of this method is to put a link in the topbar or in the footer of the web. In this case, what we do is upload an image with the WhatsApp icon or an anchor text that says, for example, “Contact us by WhatsApp”.
Insert fixed WhatsApp button in WordPress without plugin
Although the previous method is simpler, the truth is that the CTR to the button improves when the contact method becomes more visible, such as when we have it on a site on the screen and it remains fixed during navigation. Therefore, we are going to teach you how to do it without a plugin.
1. Upload WhatsApp image
The first thing we have to do is upload the WhatsApp image to our WordPress. Add it directly from Media and note the URL of the location.
2. We create the WhatsApp button
Once you have the URL of the location where the image is located, you must put it in the theme. Our recommendation is that you do it in the footer. To do this, you will need to access the footer.php file. You can do it via FTP or from the theme editor. Our recommendation is that you do it through FTP and, first of all, make a copy of the file, as well as a complete backup that includes the database.
eye! When you go to touch any file, make sure you have a backup of the web
To access footer.php from FTP, you will need to access the following path: wp-content/themes //footer.php. Once there, we will place ourselves on top of
Facebook Comments
Disqus