whatsapp

Integrate Whatsapp Click to Chat on WordPress

Last modified: August 27, 2018

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).

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:

  1. The phone number you want the Whatsapp message to be sent to
  2. 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&amp;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

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

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.
Save 4 Later
Email these links to yourself