Add WhatsApp button to your website that links to your WhatsApp Business account

1. Add html for the WhatsApp button

First, you need to insert the following html code into Header or Footer (or any module that is displayed across all your webpages):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=&text=" class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>

If you use WordPress to develop your website, you need to go to your Page Builder and look for a html block to insert your html code. Here is an example for Elementor:

2. Add css for the WhatsApp button

Then, you can add the following css code to your css file to adjust the position and style of your WhatsApp button.

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}

Last updated