whatsapp

Integrate Whatsapp Click to Chat on WordPress

Last modified: January 13, 2020

Fiverr freelancers

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
Click to Chat for WhatsApp Chat
More Info
2
WhatsApp Click to Chat Plugin for WordPress
WhatsApp Click to Chat Plugin for WordPress
More Info
Show More

* 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:

  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

WhatsApp Click to Chat Plugin for WordPress

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.

Recap:
Save 4 Later
Email liked links to yourself