WhatsApp Floating Button For Website - [WhatsApp Button HTML Code]

WhatsApp Floating Button For Website - Intro

By integrating a WhatsApp Floating Button into your website, you provide a direct, convenient channel for customer support, sales inquiries, and general communication. This not only simplifies the process for users but also ensures that your business is accessible and responsive, fostering trust and satisfaction. In essence, the WhatsApp Floating Button is more than just a convenient add-on; it’s a strategic tool that bridges the gap between your business and your audience, driving engagement, improving customer service, and ultimately boosting conversions.

Table Of Contents...

The WhatsApp Floating Button is not just a tool; it's a strategic enhancement to your website that can drive higher user satisfaction, increase conversion rates, and create a more interactive online presence. Embrace the WhatsApp Floating Button For Website and watch as your website transforms into an interactive, customer-centric platform, driving higher engagement and satisfaction.

In this article, you will learn how to create a WhatsApp Floating Button For Website that can be easily integrated into any website. We will also share the WhatsApp Button HTML Code for you.

WhatsApp Floating Button For Website

Imagine a potential customer browsing your products and needing immediate assistance; instead of navigating through cumbersome contact forms or waiting for email replies, they can now reach you instantly through WhatsApp Live Chat. This direct line of communication not only enhances user experience but also builds trust and boosts customer satisfaction. The WhatsApp Floating Button For Website is more than a convenience—it's a strategic tool that turns casual visitors into engaged prospects, paving the way for higher conversion rates and stronger customer relationships.

WhatsApp Button HTML Code

Adding a WhatsApp Chat Button On Website HTML Code to your website can significantly enhance user interaction by providing a quick and convenient way for visitors to reach out to you directly through WhatsApp. This button, which stays fixed on the screen as users scroll, ensures that communication is always just a click away.

Below is a step-by-step guide to implementing this feature using HTML, CSS, and JavaScript codes of WhatsApp Floating Button.

• HTML Code: Defines the structure of the WhatsApp Live Chat Button and includes a link to your WhatsApp number.
• CSS Code: Styles the button to make it visually appealing and positions it appropriately on the webpage.
• JavaScript Code: Although optional, can be used to add additional functionality or animations to the WhatsApp Floating Button For Website.

Below, you'll find the HTML, CSS, and optional JavaScript codes needed to integrate a WhatsApp Floating Button into your website. This simple and customizable implementation ensures that the button is always within easy reach without obstructing the view of your content.

WhatsApp Floating Button HTML Code

Here you will get the WhatsApp Button HTML Code For the Website. You don't need to know any programming knowledge to do it. Because it's a very easy and simple WhatsApp Floating Button HTML Code.

• Step #01: Open or access to your website dashboard.
• Step #02: Find the closing of body tag in your website.
• Step #03: Copy the below mentioned HTML code of WhatsApp Floating Button For Website and then paste it before closing of body tag.
• Step #04: Now click on SAVE button to save the code.

<!--[ Floating WhatsApp Button by imamuddinwp.com ]--><div class='nav-whatsapp'><div class='wrapperWA'><div class='wrapperWA-header'><h2>WhatsApp Live Chat</h2><div class='closeWA'>
<svg class='h-6 w-6' fill='none' stroke='#f40076' viewbox='0 0 24 24'><path d='M6 18L18 6M6 6l12 12' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'></path></svg></div></div><div class='form-container' id='waform-IT'><div class='formC'><div class='Fcontrol'><input class='cName' id='cName' name='name' required='required' type='text'>
          <span class='nameC'>Name</span>
          <span class='valid' id='error_name'></span>
        </div>
        <div class='Fcontrol'>
          <input class='cEmail' id='cEmail' name='email' required='required' type='email'>
          <span class='emailC'>Email</span>
          <span class='valid' id='error_email'></span>
        </div>
      </div>
      <div class='formC'>
        <div class='Fcontrol'>
          <select class='cSubject' id='cSubject'>
            <option value='Help'>Help</option>
            <option value='Question'>Question</option>
            <option value='Request'>Request</option>
          </select> <span class='subjectC'>Select Subject</span>
        </div>
        <div class='Fcontrol'>
          <textarea class='cMessage' id='cMessage' name='message' required='required'></textarea>
          <span class='messageC'>Message</span>
          <span class='valid' id='error_message'></span>
        </div>
      </div>
      <div class='formB'>
        <a class='whatsapp-send' onclick='sendToWhatsApp()'><svg viewbox='0 0 32 32'>
        <path d='M16 2a13 13 0 0 0-8 23.23V29a1 1 0 0 0 .51.87A1 1 0 0 0 9 30a1 1 0 0 0 .51-.14l3.65-2.19A12.64 12.64 0 0 0 16 28a13 13 0 0 0 0-26Zm0 24a11.13 11.13 0 0 1-2.76-.36 1 1 0 0 0-.76.11L10 27.23v-2.5a1 1 0 0 0-.42-.81A11 11 0 1 1 16 26Z'></path><path d='M19.86 15.18a1.9 1.9 0 0 0-2.64 0l-.09.09-1.4-1.4.09-.09a1.86 1.86 0 0 0 0-2.64l-1.59-1.59a1.9 1.9 0 0 0-2.64 0l-.8.79a3.56 3.56 0 0 0-.5 3.76 10.64 10.64 0 0 0 2.62 4 8.7 8.7 0 0 0 5.65 2.9 2.92 2.92 0 0 0 2.1-.79l.79-.8a1.86 1.86 0 0 0 0-2.64Zm-.62 3.61c-.57.58-2.78 0-4.92-2.11a8.88 8.88 0 0 1-2.13-3.21c-.26-.79-.25-1.44 0-1.71l.7-.7 1.4 1.4-.7.7a1 1 0 0 0 0 1.41l2.82 2.82a1 1 0 0 0 1.41 0l.7-.7 1.4 1.4Z'></path></svg>Send WhatsApp</a>
      </div>
    </div>
  </div>
  <div class='whatsapp-float'>
    <div class='whatsapp-icon'>
      <svg viewbox='0 0 512 512'><path d='M414.73 97.1A222.14 222.14 0 0 0 256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0 0 29.78 111L32 480l118.25-30.87a223.63 223.63 0 0 0 106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 0 0 414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 0 1-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0 1 71.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 0 1 185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 0 0-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0 0 31.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z'></path></svg>
    </div>
    <span class="whatsapp-text">Talk to us?</span>
  </div>  
</div>

WhatsApp Floating Button CSS Code

Follow below mentioned steps to integrate CSS code of WhatsApp Floating Button For Website.

• Step #01: Open or access to your website dashboard.
• Step #02: Find the closing of head tag in your website.
• Step #03: Copy the below mentioned CSS code of WhatsApp Floating Button For Website and then paste it before closing of head tag.
• Step #04: Now click on SAVE button to save the code.

<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}
.wrapperWA-header{display:flex;align-items:center;margin-bottom:20px;justify-content:center;position:relative}
.wrapperWA-header h2{text-align:center;text-transform:uppercase;letter-spacing:3px;color:#332902;font-size:1rem;flex:1 1 auto;margin:0}
.wrapperWA-header .closeWA svg{width:20px;height:20px;float:right}
.form-container .formC:nth-child(1){display:grid;grid-template-columns:repeat(auto-fit,minmax(45%,1fr));gap:1rem;--gap:1rem}
.form-container .formC:nth-child(2){display:grid;grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}
.form-container .formC .Fcontrol{position:relative}
.form-container .formC .Fcontrol input:focus,.form-container .formC .Fcontrol textarea:focus{border-color:#4caf50}
.Fcontrol input[type="text"],.Fcontrol input[type="email"],.Fcontrol .cSubject,.Fcontrol textarea{width:100%;height:calc(3.5rem + calc(1px * 2));padding:.375rem 2.25rem .375rem .75rem;padding-top:1.625rem;border-radius:5px;margin-bottom:15px;border:1px solid rgba(0,0,0,0.05);background:#fff}
.Fcontrol textarea{height:100px}
.Fcontrol input:focus ~ .nameC,.Fcontrol input:focus ~ .emailC,.Fcontrol textarea:focus ~ .messageC{top:-5px}
.Fcontrol input[type="text"],.Fcontrol input[type="email"],.Fcontrol textarea{padding:.75rem;padding-top:1.625rem;}
.Fcontrol .nameC,.Fcontrol .emailC,.Fcontrol .subjectC,.Fcontrol .messageC{position:absolute;top:0;left:0;z-index:2;height:auto;padding:1rem .75rem;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem);transform-origin:0 0;overflow:hidden;text-overflow:ellipsis;pointer-events:none;white-space:nowrap;color:rgba(33,37,41,0.65);transition:0.1s ease}
.formC .Fcontrol .cSubject{display:block;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center/16px 12px;border:1px solid rgba(0,0,0,0.08);-webkit-appearance:none;-moz-appearance:none;appearance:none}
.valid[data-text]:before{position:absolute;bottom:100%;left:12px;content:"";border:8px solid;border-color:transparent transparent #ffd91a transparent;top:calc(100% - 21px)}
.valid[data-text]:after,.valid[data-text]:before{opacity:1;transition:opacity 0.2s ease;pointer-events:none;z-index:3}
.valid[data-text]:after{content:attr(data-text);position:absolute;background:#ffd91a;left:0;top:calc(100% - 5px);font-size:12px;padding:5px;box-shadow:0 5px 10px rgb(0 0 0 / 8%);border-radius:5px}
.show#cName ~ .valid:after,.show#cEmail ~ .valid:after,.show#cMessage ~ .valid:after,.show#cName ~ .valid[data-text]:before,.show#cEmail ~ .valid[data-text]:before,.show#cMessage ~ .valid[data-text]:before{opacity:0}
.none#cName ~ .valid:after,.none#cEmail ~ .valid:after,.none#cMessage ~ .valid:after,.none#cName ~ .valid[data-text]:before,.none#cEmail ~ .valid[data-text]:before,.none#cMessage ~ .valid[data-text]:before{opacity:1}
.whatsapp-send{display:inline-flex;align-items:center;gap:0.3rem;padding:10px 20px;background-color:#4caf50;color:#fff;text-decoration:none;font-weight:bold;font-size:12px;border-radius:4px;transition:background-color 0.3s;cursor:default;height:auto;width:auto}
.whatsapp-send svg{fill:#fff;width:22px;height:22px}
.whatsapp-send:hover{background-color:#45a049}
.whatsapp-float{display:flex;align-items:center;flex-direction:column;gap:.2rem}
.whatsapp-float .whatsapp-icon{width:60px;height:60px;border-radius:50%;background-color:#4CAF50;display:flex;justify-content:center;align-items:center;animation-name:waAnimation;animation-duration:1.5s;animation-timing-function:ease-out;animation-iteration-count:infinite}
@keyframes waAnimation{0%{box-shadow:0 0 0 0 rgba(74,175,80,0.5)}80%{box-shadow:0 0 0 14px rgba(74,175,80,0)}}
.whatsapp-float .whatsapp-icon svg{fill:#fff;width:30px;height:30px}

select:focus{outline:none}
select::-ms-expand{display:none}
@media screen and (max-width:620px){
	.formC:nth-child(1){gap:0}
	.nav-whatsapp.active .wrapperWA{width:auto;height:auto;right:0;left:0;bottom:0;top:auto;margin:0;transition:all .3s ease}
	.form-container .formC:nth-child(1){grid-template-columns:auto;gap:0}
}
.drK .wrapperWA{background:#202426}
.drK .Fcontrol input[type="text"],.drK .Fcontrol input[type="email"],.drK .Fcontrol .cSubject,.drK .Fcontrol textarea{background:#272b2d}
.drK .wrapperWA-header h2,.drK .Fcontrol .nameC,.drK .Fcontrol .emailC,.drK .Fcontrol .subjectC,.drK .Fcontrol .messageC{color:#fff}
</style>

WhatsApp Floating Button JavaScript Code

It's the final step of adding WhatsApp Floating Button For Website.

• Step #01: Open or access to your website dashboard.
• Step #02: Find the closing of closing of body tag in your website.
• Step #03: Copy the below mentioned JavaScripts code of WhatsApp Floating Button For Website and then paste it before closing of body tag.
• Step #04: Click on SAVE button to save the code.

<script>//<![CDATA[
// WhatsApp Floating Button by imamuddinwp.com

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() {
  /* Input Form */
  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;
  /* Validation for Required Columns */
  var error_name = document.getElementById("error_name"),
    error_email = document.getElementById("error_email"),
    error_message = document.getElementById("error_message");
  var text;
  if (name == "") {
    text = 'Please enter your name';
    error_name.setAttribute('data-text', text);
    return false;
  }
  if (email.indexOf("@") == -1 || email.length < 6) {
    text = 'Please enter valid email';
    error_email.setAttribute('data-text', text);
    return false;
  }
  if (massage == "") {
    text = 'Please enter your Massage';
    error_message.setAttribute('data-text', text);
    return false;
  }
  /* URL Final Whatsapp */ 
  var message = "New message from " + name + "\n\n"; // Opening Message
  message += "*Name:* " + name + "\n";
  message += "*Email:* " + email + "\n";
  message += "*Subject:* " + subject + "\n";
  message += "*Massage:* " + massage + "\n\n";
  message += "=============================" + "\n";
  message += "*Form:* " + postLink + "\n";
  message += "=============================";
  /* WhatsApp Settings */
  var walink = 'https://api.whatsapp.com/send?',
    phoneNumber = '8801406070407'; // Your WhatsApp number
  var encodedMessage = encodeURIComponent(message);
  var whatsappUrl = walink + "?phone=" + phoneNumber + "&text=" + encodedMessage;
  window.open(whatsappUrl, '_blank');
  return true;
}
//]]></script>

Now you have to replace your own phone number with 8801406070407 to get message on your WhatsApp from your potential customers.

By following these instructions, you can easily integrate a WhatsApp Floating Button into your website, enhancing accessibility and improving user interaction.

WhatsApp Floating Button - Final Step [Test & Preview]

We strongly believe that you have done all steps correctly. Now browse your website and you will see the WhatsApp Floating Button in your website.

If you face any difficulties on integrating WhatsApp Floating Button For Website, feel free to write to us in Contact Us form or in the comments box. You can also knock us on our Telegram Group to get quick response or any other solution.

Floating WhatsApp Button WordPress

If your website is running WordPress, Shopify, or any other CMS, this WhatsApp Button HTML Code works perfectly. If you install a plugin of WhatsApp Floating Button For Website, your website loading speed may hamper this. But this Simple WhatsApp Floating Button For Website will not affect on your website loading speed. You can check from here: Website Speed Testing Online.

Do you need Short WhatsApp Link Generator? You can use our free online too to do it perfectly: Free WhatsApp Link Generator. You can Create WhatsApp Link For your Number by using it.

FAQs - WhatsApp Button HTML Code For Website

Whether you are a web developer, a small business owner, or someone looking to improve your online presence, these FAQs will help you understand the process, benefits, and best practices for embedding a WhatsApp Floating Button For Website. Let's see one by one.

How do I add a WhatsApp button in Blogger?

You can use simple HTML, CSS & JavaScript codes to add a WhatsApp button to the Blogger website. You can do it from your blogger website dashboard.

How do I add a WhatsApp button to my website?

You don't need to know a programming language to add a WhatsApp Chat Button to your website. You can do this easily and smartly using simple HTML, CSS, & JavaScript codes from the imamuddinwp.com website.

How to add a floating WhatsApp button in WordPress?

In general, most WordPress website owners always use the plugin WhatsApp Floating Button, but it may hamper on website loading speed. To add a Floating WhatsApp Button In WordPress, you can use simple WhatsApp Button HTML, CSS, and JavaScript codes from the imamuddinwp.com blog.

... ...

You may also like...

Final Words - WhatsApp Floating Button For Website

In conclusion, we would like to say again that a WhatsApp Floating Button For a Website is a valuable tool for any business looking to improve its online communication strategy. By implementing this feature, you can make your website more interactive and customer-friendly, ultimately driving better engagement and fostering trust with your users.

Thank you for exploring this guide on adding a WhatsApp Floating Button For Website and WhatsApp Button HTML Code. We hope it has been informative and helpful, empowering you to enhance your digital communication strategy effectively.