WhatsApp Floating Button For Website

WhatsApp Button HTML Code, WhatsApp button HTML code generator, WhatsApp Floating Button For Website, WhatsApp HTML CSS 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.

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.

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.

<pre>

<div class='nav-whatsapp'><div class='wrapperWA'><div class='wrapperWA-header'><h2>WhatsApp Live Chat</h2><div class='closeWA'>

</div>

<span class='emailC'>Email</span>

</div>

<option value='Question'>Question</option>

<option value='Request'>Request</option>

</select> <span class='subjectC'>Select Subject</span>

</div>

<span class='messageC'>Message</span>

</div>

<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>

</pre>

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.

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;

color: #000000; background-color: #eee;

font-size: 12px; border: 1px dashed #999999;

line-height: 14px; padding: 5px;

overflow: auto; width: 100%">

<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>

</code>

</pre>

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.

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;

color: #000000; background-color: #eee;

font-size: 12px; border: 1px dashed #999999;

line-height: 14px; padding: 5px;

overflow: auto; width: 100%">

<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 = '8801778240630'; // Your WhatsApp number

var encodedMessage = encodeURIComponent(message);

var whatsappUrl = walink + "?phone=" + phoneNumber + "&text=" + encodedMessage;

window.open(whatsappUrl, '_blank');

return true;

}

//]]></script>

</code>

</pre>

Now you have to replace your own phone number with 8801778240630 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.

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

Email the author

WhatsApp Floating Button For Website - Intro

WhatsApp Floating Button For Website

WhatsApp Button HTML Code

WhatsApp Floating Button HTML Code

WhatsApp Floating Button CSS Code

WhatsApp Floating Button JavaScript Code

Related News

Popular News