Integrate Whatsapp Click to Chat on WordPress
Last modified: January 13, 2020
It’s becoming very important for companies to add other features rather than the same contact form we’ve seen on literally every site we’ve ever been on. Companies want their users to be able to contact them using more simple ways and ways they are used to communicating, and what better way to do that than Whatsapp. Whatsapp is probably used by most people that own a smartphone so it definitely makes a lot of sense to use that medium to connect with your audience.
Lucky enough, it’s really easy to implement a click to chat button on WordPress (or any other open source code based site).
# | Name | Image | |
---|---|---|---|
1 |
Click to Chat for WhatsApp Chat
|
|
More Info
|
2 |
WhatsApp Click to Chat Plugin for WordPress
|
|
More Info
|
* This button will show the rest of the post and open up an offer from a vendor
1. Find a Whatsapp Icon
First of all we need an icon to let the user click on. There are many royalty free image sites you can choose from. Download an icon you like, upload it in the media section and put the URL on the side for now.
2. Define the Parameters
There are 2 parameters you need to decide on:
- The phone number you want the Whatsapp message to be sent to
- The message that will be sent to you
3. Put Everything Together
Here is your button:
<a href="https://api.whatsapp.com/send?phone=00155555555&text=I am interested in your service" target="_blank" class="whatsapp"> <img src="https://site.com/wp-content/uploads/2018/07/whatsapp.png" alt="whatsapp"> </a>
Copy the above but make sure you change the phone number and the message.
4. Paste the code
For the sake of this tutorial we’re going to place the icon on the bottom left of the screen and give it a fixed position so you can’t miss it.
So in order to do that I’m going to paste the code from above in my footer.php
file right before the closing body
tag.
Once I save my file and refresh my browser I’ll be able to see the icon at the very bottom of the page. Now we’ll go on and style it.
5. Style the Whatsapp Button
All you need to do is write a few lines of CSS
and paste it in your style.css
file.
.whatsapp { position: fixed; left: 5px; bottom: 65px; }
As you can see, I placed my icon 5 pixels from the left of the screen and 65 pixels from the bottom. The reason I did that is the fact that it blocked some text on my footer when I scrolled to the very bottom of my page but you can play around with it as you wish.
6. The moment of truth
All you should do now is refresh the page, make sure you like the place where the icon is placed, click it and make sure you get transferred to Whatsapp to send your message.
Even though this tutorial should be incredibly easy to do on your site, if you still feel like you need a plugin, here is a plugin that will help you implement a Whatsapp click to call button.
Click to Chat for WhatsApp Chat
This plugin has 10 different design styles and is really easy to use. Here are some further features:
- Choose your own icon/image
- Animations
- Style on a specific page/post basis
- Define your message
- Google analytics and Tag manger event support
- Facebook event support
WhatsApp Click to Chat Plugin for WordPress
The top rated Whatsapp click to chat plugin on Themeforest.
- Multiple Whatsapp accounts available
- Choose when you are available to chat based on time of day
- Customize font and font color
- Built-in Google analytics or Facebook events to keep tracks of clicks and usage
Conclusion
This is a really easy one but if you have trouble, you could always choose to use a plugin instead of getting your hands dirty.