How to Add a WhatsApp Button in Divi

Updated: June 30, 2022

With more than 2 billion users worldwide WhatsApp is one of the most popular messaging apps. And with the vast majority of people in the world using WhatsApp, you might want to add a WhatsApp button to make it easier for your site visitors to start the conversation with your support team, sales team, or any other team.

In this post, we’re going to show you step-by-step on how to add a tap to WhatsApp button in Divi. When the visitor clicks the button, it will open up the WhatsApp app on their phone when they access your website via smartphone or open the WhatsApp Web when they access your website via laptop.

Adding a Tap to WhatsApp Button in Divi

Step 1: Create a WhatsApp Button

For this step we choose to create a sticky floating button on the right side of the page to start our tutorial. For more detailed instructions on creating a floating button in Divi, you can read our previous article on how to create floating Buttons in Divi.

To get started, you need to create or edit a page with Divi Builder, then add a Blurb module for the WhatsApp button in a new section or on any section of your choice on the page.

Once the module is in place, proceed to clear the text from the Title and the Body in the Blurb Settings.

Now, move on to the Image & Icon block then click on the Use Icon toggle to use an icon instead an image.

On the Icon field, search for the WhatsApp icon so we can use it as our button.

You can change the color of the icon to green for more WhatsApp resemblance by moving to the Design tab Image & Icon Icon Color.

Once you’ve finished your button style, next is to make your button floating in the right side of your page.

Continue by moving to the Advanced tab then modify the value in the Position block as follows:

  • Position: Fixed
  • Location: Middle Right
  • Horizontal Offset : 20px
  • Z Index: 9999

Step 2: Give WhatsApp Link to the Button

Now, to make the button open up the WhatsApp app when it’s clicked, we need to add a link for it.

To do that, go back to the Content tab of the Blurb Settings then open up the Link block and fill the Module Link URL with WhatsApp universal link.

WhatsApp Universal link format is as follow:

https://wa.me/<number> Where the <number> is a full phone number in international format omitting any brackets, dashes, plus signs, and leading zeros. Examples:

  • Correct link: https://wa.me/15551234567
  • Incorrect link: https://wa.me/+001-(555)1234567

And that’s it, the button is ready for some tapping, go save and publish your work to try it on the front end of your website.

Now, when you click the button it will open up the WhatsApp app on your phone if the app is installed.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about Divi and WordPress in general.