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:
<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.