How to add a tap to WhatsApp button to your Divi website

May 28, 2019

In a previous tutorial I showed you how to add a tap-to-text button to the bottom of your website.

(Here’s the demo if you’d like to check it out. It’s only visible on mobile, so if you’re on desktop just drag your screen thinner.)

Someone asked a question though as to what happens if the business is in a different country to you? Sending an SMS internationally usually costs money, so it’s not ideal to make potential customers spend money to get in touch with you.

This got me thinking of other ways you could do this which wouldn’t cost money.

That’s when I came across this article by WhatsApp: https://faq.whatsapp.com/en/android/26000030/

WhatsApp is a service which lets you message and call people internationally completely free, which makes it perfect for this scenario.

In this tutorial I’ll show you how to use this WhatsApp link to add a bar to the bottom of your website on mobile, where when a user “clicks” it, it opens up WhatsApp on their phone.

I don’t want to repeat myself from the previous tutorial, so to start head over there and do steps 1 and 2 then come back here!

Have you done it? Great!

Let’s keep going…

Step 3: Add the HTML
In your “Theme Options”, navigate to “Integrations” in the top purple bar. Scroll down to the “Add code to the < body >” box, and paste the following HTML:

<a href="https://wa.me/<your-phone-number>" class="tap-to-text">Get a question? WhatsApp us!</a>

Replace <your-phone-number> with your actual phone number, in international format, without any spaces.

For example a UK link would look like https://wa.me/447123456789

Where 44 is the country code, and 7123456789 is the phone number (without the beginning 0).

If you’re unsure there’s more instructions on the WhatsApp website.

Step 4: Save!
Click the green “Save changes” button at the bottom and you’re done!

The great thing about this method is as it opens up WhatsApp it gives the customer the option to either phone OR text you. So they can decide on the form of communication they’re most comfortable with.

Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: hello@andyhooke.co.uk

You can also checkout more Divi tutorials below.

Get FREE Divi tutorials and layouts each month!