How to Add a WhatsApp Button in Divi

by Hendri Risman

Last updated on October 7, 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