How to add floating WhatsApp icon in html

Adding a floating Whatsapp icon to website is a necessary thing. Because whatsApp is commonly used application for communication. Now we can look how we can archive this.

To add WhatsApp floating icon only by using HTML and CSS without any single line of java script.

HTML

  <!-- Whatsapp Widjet -->


  <div class="whatsapp-wid">

   <a href="https://wa.me/Yournumber?text=I'm%20interested%20in%20your%20Service%20" target="_blank">
    <img src="img/WhatsApp.svg" alt="">
   </a> 
  </div>

Download Whatsapp icon From below

CSS

Write below code in your stylesheet

.whatsapp-wid{

  width: 5%;

  height: auto;

  position: fixed;

  bottom: 10px;

  right: 10px;

  z-index: 999;

}

That’s all you ready to go!

Freelance web designer and developer from Kerala

Jibin Mathew

Hi my name is JIbin Mathew. Freelance Web designer and developer from India. Basically I am a Web Designer and much passionate about blogging. 2018 is my step into the field of web designing. Later I learned a lot from it and put it into practice. I have the good fortune to be able to meet a lot of good clients in a short period of time and do good projects for them. I was able to do good work not only in web designing but also in graphic designing.

prodesignerhub.com is a dream project of mine on blogging. I had such an idea in my mind years ago but it was only 2021 that I was able to put it into practice. Through this website I want to discuss good things that make people more knowledgeable.

Thank you!

See author's posts