How to Add Floating WhatsApp Chat Button in Blogger 2026

BLOGGER GUIDE

How to Add Floating WhatsApp Chat Button in Blogger (2026)

Welcome back to Tech Stack 👋 Today, I’m going to show you how to add a floating WhatsApp chat button in Blogger that allows users to connect with you instantly. This is one of the most powerful features used by professional websites to increase engagement and conversions.

floating WhatsApp chat widget in Blogger

Most bloggers lose visitors because there’s no easy way to contact them 😬 Visitors come… read… and leave — without sending a message. But what if you could add a WhatsApp chat button that lets users contact you instantly? In this tutorial, we’ll show you how to create a floating WhatsApp chat widget in Blogger, making communication faster, easier, and more effective 🚀

Wait! Check This Preview First

Preview

★Note:How to Add a Floating WhatsApp Button in Blogger (Step-by-Step)

🚀 Quick Setup:

👉 Step 1: Open Blogger Dashboard → Layout → Add a Gadget
👉 Step 2: Select HTML/JavaScript Widget
👉 Step 3: Paste the code below and click Save

HTML

<!-- Contact Form Floating WhatsApp by FreemiumTech.blogspot.Com -->
<div class='nav-whatsapp'>
  <div class='wrapperWA'>
    <div class='wrapperWA-header'>
      <h2>WhatsApp Chat</h2>
      <div class='closeWA'>Close</div>
    </div>

    <div class='form-container' id='waform-IT'>
      <div class='Fcontrol'>
        <input class='cName' id='cName' name='name' required='required' type='text'>
        <span class='nameC'>Name</span>
      </div>

      <div class='Fcontrol'>
        <input class='cEmail' id='cEmail' name='email' required='required' type='email'>
        <span class='emailC'>Email</span>
      </div>

      <div class='Fcontrol'>
        <textarea class='cMessage' id='cMessage' name='message' required='required'></textarea>
        <span class='messageC'>Message</span>
      </div>

      <a class='whatsapp-send' onclick='sendToWhatsApp()'>Send WhatsApp</a>
    </div>
  </div>

  <div class='whatsapp-float'>
    <div class='whatsapp-icon'>WhatsApp Icon</div>
    <span class='whatsapp-text'>Talk to us?</span>
  </div>
</div>

Customize the select field options based on your website’s requirements. This allows visitors to choose the type of message they want to send, making communication more organized and effective.

⚙️ Next Setup:

👉 Step 4: Click Save button
👉 Step 5: Open Blogger → Theme → Edit HTML
👉 Step 6: Find ]]> or </style> and paste CSS above it

CSS

<style>
.nav-whatsapp{position:fixed;bottom:20px;right:20px;z-index:1000;padding:12px 0}
.nav-whatsapp.active .wrapperWA{opacity:1;visibility:visible;width:400px;height:auto;z-index:6;display:block}
.nav-whatsapp.active .whatsapp-float{opacity:0;visibility:hidden}
.wrapperWA{position:fixed;right:20px;bottom:20px;width:60px;padding:25px;border-radius:5px;box-shadow:rgba(0,0,0,0.1) 0 4px 12px;z-index:-1;opacity:0;visibility:hidden;transition:opacity .3s ease;height:60px;margin:12px 0;background:#fff;display:none}

/* More CSS lines here... */

.drK .wrapperWA{background:#202426}
</style>

⚙️ Final Step:

👉 Step 7: Paste the JavaScript code above </body> in your template

JS

<script>//<![CDATA[
// whatsApp floating form by FreemiumTech

var menuToggle = document.querySelector(".whatsapp-float"),
wrapperMenu = document.querySelector(".nav-whatsapp"),
closeWA = document.querySelector(".closeWA");

var inputs = document.querySelectorAll('.Fcontrol input[type=text], .Fcontrol input[type=email], .Fcontrol textarea');

menuToggle.onclick = function() {
  wrapperMenu.classList.toggle('active');
}

closeWA.onclick = function() {
  wrapperMenu.classList.remove('active');
};

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  input.addEventListener('input', function() {
    var bg = this.value ? 'show' : 'none';
    this.setAttribute('class', bg);
  });
}

function sendToWhatsApp() {
  var name = document.getElementById("cName").value;
  var email = document.getElementById("cEmail").value;
  var subject = document.getElementById("cSubject").value;
  var massage = document.getElementById("cMessage").value;
  var postLink = window.location.href;

  var error_name = document.getElementById("error_name"),
  error_email = document.getElementById("error_email"),
  error_message = document.getElementById("error_message");

  if (name == "") {
    error_name.setAttribute('data-text', 'Please enter your name');
    return false;
  }

  if (email.indexOf("@") == -1 || email.length < 6) {
    error_email.setAttribute('data-text', 'Please enter valid email');
    return false;
  }

  if (massage == "") {
    error_message.setAttribute('data-text', 'Please enter your Massage');
    return false;
  }

  var message = "New message from " + name + "\n\n";
  message += "*Name:* " + name + "\n";
  message += "*Email:* " + email + "\n";
  message += "*Subject:* " + subject + "\n";
  message += "*Massage:* " + massage + "\n\n";
  message += "=============================" + "\n";
  message += "*Form:* " + postLink + "\n";
  message += "=============================";

  var phoneNumber = '+8801625498944';
  var encodedMessage = encodeURIComponent(message);
  var whatsappUrl = 'https://api.whatsapp.com/send?phone=' + phoneNumber + '&text=' + encodedMessage;

  window.open(whatsappUrl, '_blank');
  return true;
}
//]]></script>

Info!
Make sure to update the WhatsApp number with your personal or business number to receive messages.

✅ Final Step:

👉 Step 8: After completing all steps, click the Save to activate your WhatsApp floating chat on the website.

🎉 That’s It!

You have successfully added a floating WhatsApp chat button to your Blogger website. Now your visitors can contact you instantly, and your website will look more modern, professional, and user-friendly.

If this tutorial helped you, don’t forget to share it with your friends and follow our blog for more useful Blogger tutorials.