Skip to content

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

WhatsApp Icon

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

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *