Skip to main content
mobile

Integrate Whatsapp Click to Chat on WordPress

by July 27, 2020#!31Fri, 07 Aug 2020 17:24:57 +0200+02:005731#31Fri, 07 Aug 2020 17:24:57 +0200+02:00-5Europe/Rome3131Europe/Rome202031 07pm31pm-31Fri, 07 Aug 2020 17:24:57 +0200+02:005Europe/Rome3131Europe/Rome2020312020Fri, 07 Aug 2020 17:24:57 +0200245248pmFriday=4159#!31Fri, 07 Aug 2020 17:24:57 +0200+02:00Europe/Rome8#August 7th, 2020#!31Fri, 07 Aug 2020 17:24:57 +0200+02:005731#/31Fri, 07 Aug 2020 17:24:57 +0200+02:00-5Europe/Rome3131Europe/Rome202031#!31Fri, 07 Aug 2020 17:24:57 +0200+02:00Europe/Rome8#No Comments

1. Find a Whatsapp icon

First, we need an icon for the user to click on. There are many royalty-free image sites to choose from. Download an icon you like, upload it to the media section, and add the URL to the side for now.

2. Define the parameters

There are 2 parameters you need to decide:

  1. The phone number to which you want to send the message Whatsapp
  2. The message that will be sent to you

3. Put it all together

Here is your button:

< A href = "Https://api.whatsapp.com/send?phone=00155555555&text=I I am interested in your service" target = "_Blank" class = "Whatsapp" >
< img src = "Https://site.com/wp-content/uploads/2018/07/whatsapp.png" alt = "Whatsapp" >
< / to >

Copy the above but be sure to change the phone number and message.

4. Paste the code

For the sake of this tutorial we will place the icon at the bottom left of the screen and give it a fixed position so that you cannot lose it.

So to do this, I'll paste the code from above into my footer.phpfiles just before the bodyclosing tag .

Once I save my file and refresh my browser, I'll be able to see the icon at the bottom of the page. Now we'll go ahead and style it.

5. Draw the Whatsapp button

All you have to do is write a few lines CSSand paste it into yours style.cssfile.

.Whatsapp {
position: fixed;
left: 5px;
bottom: 65px;
}

As you can see, I positioned my icon 5 pixels from the left of the screen and 65 pixels from the bottom. The reason I did this is because it blocked some text in my footer when I scrolled to the bottom of my page, but you can play with it as you like.

6. The moment of truth

All you need to do now is refresh the page, make sure you like where the icon is placed, click on it, and make sure you're transferred to WhatsApp to send your message.

While this tutorial should be incredibly easy to do on your site, if you still need a plugin, here's a plugin that will help you implement a WhatsApp click-to-call button.

Click Chat to chat Whatsapp

Click Chat for WhatsApp chat

This plugin has 10 different design styles and is really easy to use. Here are some other features:

  • Choose your icon / image
  • animations
  • Style on a specific page / post
  • Define your message
  • Support for Google Analytics and Tag Manager Events
  • Support for Facebook events

Leave a Reply