Floating whatsapp icon/send to WhatsApp function

General
1

Hi everyone,

I’m sharing the WhatsApp floating button code that I’ve implemented on my site. Please note the phone number in the link is a placeholder — make sure to replace it with your own WhatsApp number in international format before using.

This button will lead your customers directly to message you on WhatsApp, making it easy to connect instantly.

How to update your WhatsApp number:
Replace the number 1234567890 in the href attribute of the <a> tag with your own number (without any spaces or symbols).
For example, if your WhatsApp number is +33 7 xxxxxx (France), write it as 337xxxxxx.

Here’s the code snippet:

<!-- WhatsApp Floating Button -->
<style>
  .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
  }

  .whatsapp-float:hover {
    transform: scale(1.05);
  }

  .whatsapp-float img {
    width: 38px;
    height: 38px;
  }
</style>

<!-- Replace the number below with your WhatsApp number -->
<a href="https://wa.me/1234567890" class="whatsapp-float" target="_blank" aria-label="Chat with us on WhatsApp">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp">
</a>

Feel free to use and customize it. I will share all the codes I’ve implemented to help the community. Thanks!

1 Like