Add a Sticky WhatsApp Icon on Your Website

Most of the website you can see that WhatsApp icon on their website. In this tutorial we learn how to add whatsapp icon to your website

Lets get started

HTML 

  
<a href="https://api.whatsapp.com/send?phone=0123456789" class="icon">
  
   <i class="fab fa-whatsapp"></i>
  
</a>

Replace 0123456789 with your WhatsApp phone number.

I use font-awesome for the WhatsApp icon

CSS

  
.icon{
  
  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;
  
}

You can adjust these values to fit the design and layout of your website.

Thanks for reading