How to Create a WhatsApp Floating Button

  • Updated

To create a WhatsApp Floating Button you need to create the button first then style it to your specification. For example:

<!-- load font awesome for icons -->
<link rel="stylesheet"
href="" />

<!-- add your custom CSS -->
body {
font-family: sans-serif;

/* Add WA floating button CSS */
.floating {
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;

.fab-icon {
margin-top: 16px;

<!-- render the button and direct it to -->
<a href="" class="floating" target="_blank">
<i class="fab fa-whatsapp fab-icon"></i>


Basically we create a button then style it, then we put the link to WhatsApp. You can create any design for the button, you'll just need CSS and/or JavaScript for it. The important part is to direct the location to WhatsApp link as shown in the sample above. You can learn more about this from this reference


Was this article helpful?



Please sign in to leave a comment.