Who doesn’t use WhatsApp? Okay, I know there are some out there who refuse to use anything owned by Facebook but with around 1.5 billion users, WhatsApp is definitely a platform that a large percentage of your customers are using. Setting up a WhatsApp “Live Chat” floating button on a WordPress website is relatively quick and easy with the help of a free plugin called WhatsHelp Chat Button.
Before we go into the details, let have a look at the potential benefits of live chat. Here’s a few benefits:
- Live chat is convenient, who wants to wait for someone to respond to an email.
- One-on-one engagement can increase sales, especially when a customer has a question that could make or break the sale.
- It gives you an edge over your competitors who aren’t using it.
- Live chat can help you discover customer pain points. Over time you’ll discover trends which can help you develop a better product or service.
- Live chat can build customer loyalty. The personal touch goes a long way to building relationships with your clients.
The Example
The friendly little green icon we all know and love.
When a visitor taps the icon, it will automatically launch WhatsApp and open a new conversation with the visitor. For the curious out there, if you click on the button from a desktop browser, it will open a new browser tab and take the visitor to the browser based version of WhatsApp.
Getting Started – Install and Configure the Plugin
The first step is to download and install the WhatsHelp Chat Button plugin*. Once you’ve done that, head over to getbutton.io and click on the button that says “Get Your Button”. There are three steps.
*If you’re using Divi by Elegant Themes, you can skip this step. I’ll show you in Step 4 where to put the code.
Step 1: Delete Messenger and Add The Mobile Number
Begin by deleting Facebook Messenger from the list. You do this by clicking on the X on the right hand side of the text field. Now, enter the mobile number associated to the WhatsApp account you want to use.
Step 2: Customize The Button
The next section is pretty self explanatory and if you like the defaults, you can leave it as is.
Step 3: Enter Your Email Address
Now that you’ve got everything set up, you’re ready to get the code you’ll need. All that you need to do is to enter your email address and hit the “Get Button Code” button.
Step 4: Add the code to your website
Once you’ve received the email from whatshelp.io, copy the code and head to WhatsHelp on the WordPress Dashboard and past the code in the provided field.
If you’re using a theme like Divi by Elegant Themes, you can skip installing the plugin and just add the code to the section labelled “Add Code to the <head> of your blog” under the Integration tab of the Divi Theme Options panel (Dashboard > Divi Theme Options > Integration). The plugin simply provides a convenient way of adding this code to the head of your your blog.
The CSS to Make The Button Round
By default the button is square. If you prefer a round icon, simply pop the following CSS into your child theme’s style sheet or, if you’ve using Divi, you can add it to the Custom CSS field which you can find under the Divi Theme Options, General tab.
Wrapping it Up
And that is how easy it is to add a WhatsApp live chat button to your website. May it provide you with many happy customer interactions!
Photo by Marjan Grabowski on Unsplash
Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.