Hello Everyone! Welcome back to Tech Zenoh Pro Website. How are you all? I Hope you all are well. Today our Article is all about How to Add or Create a Floating WhatsApp Chat or Contact Form? You can add it Down corner on your blogger website. So let's start today's article.
There are many ways to communicate between visitors and blog owners, one of which is by facilitating a contact page on the blog. A floating contact widget is an excellent way to make it easy for your readers to reach out to you without leaving the page they're on.
There are also various contact form pages, usually site owners provide many alternative contact forms according to needs so that it is easy for visitors to interact. One of them is WhatsApp chat contacts, which has become increasingly popular due to WhatsApp's widespread use worldwide.
In this article we will discuss a tutorial for creating a WhatsApp chat contacts widget on a Blogger site. This floating widget will appear at the bottom corner of your blog, allowing visitors to send you messages directly through WhatsApp with just a few clicks.
BEFORE CREATE THIS LET'S SEE A PREVIEW
Why Add a Floating WhatsApp Chat Widget?
Adding a floating WhatsApp chat widget to your blog offers several benefits:
- Instant Communication: Visitors can contact you immediately without leaving your site.
- Mobile-Friendly: WhatsApp is the most popular messaging app worldwide, especially on mobile devices.
- Builds Trust: Easy access to you helps build trust with your audience.
- Increases Engagement: Visitors are more likely to reach out if it's convenient.
- Supports Customer Service: Quickly answer questions about your content or services.
Step-by-Step Guide: How to Add a Floating WhatsApp Button
Step 1: Open Blogger Layout
Open your Blogger Dashboard > Layout > Add Gadgets.
Step 2: Select HTML/Javascript Widget
Select the HTML/Javascript widget from the list of available gadgets.
Step 3: Paste the HTML Code
Copy and paste the following HTML code into the widget:
<!--[ Contact Form Floating WhatsApp by Tech Zenoh Pro ]-->
<div class='nav-whatsapp'>
<div class='wrapperWA'>
<div class='wrapperWA-header'>
<h2>WhatsApp 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>
Note: Adjust the text elements in the select tag section according to the subject you provide to differentiate the purpose of the WhatsApp chat contact message.
Step 4: Save the Widget
Then click the SAVE button.
Install CSS and JavaScript
The next stage is to install CSS and scripts to activate the WhatsApp floating contact form function.
Step 5: Open Theme Editor
On the Blogger Dashboard, open the menu Theme > Edit HTML.
Step 6: Add CSS Code
Search for ]]></b:skin> or </style>, then copy and place the following CSS right above 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}
/* Remove IE arrow */
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>
Step 7: Add JavaScript Code
Finally, place the JavaScript below above the code </body>:
<script>//<![CDATA[
// whatsApp floating form by Tech Zenoh Pro
/* Open Close Button */
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 = '+8801625498944'; // Your WhatsApp number
var encodedMessage = encodeURIComponent(message);
var whatsappUrl = walink + "?phone=" + phoneNumber + "&text=" + encodedMessage;
window.open(whatsappUrl, '_blank');
return true;
}
//]]></script>
Important: Change the WhatsApp number with your WhatsApp number. Replace +8801625498944 with your actual phone number including country code.
Step 8: Save Template
If everything has been done, now click SAVE template.
Now Refresh your website then you can see the WhatsApp floating button in your website. Click on it to open the contact form, fill in your details, and send a message directly to your WhatsApp.
Customization Options
You can customize the floating WhatsApp widget in several ways:
- WhatsApp Number: Replace the phone number in the JavaScript with your own.
- Subject Options: Modify the select options to match your needs.
- Colors: Adjust the CSS to match your blog's color scheme.
- Position: Change the
bottomandrightvalues in CSS. - Text: Change "Talk to us?" to your preferred message.
Frequently Asked Questions
Q: Do I need a WhatsApp Business account?
A: No, a regular WhatsApp account works fine. However, WhatsApp Business offers additional features like auto-replies and labels.
Q: Can I use this on multiple blogs?
A: Yes, you can add this widget to any Blogger blog by following the same steps.
Q: Will this work on mobile devices?
A: Yes, the widget is fully responsive and works on all devices.
Q: Can I change the position of the floating button?
A: Yes, modify the bottom and right values in the CSS.
Q: Is this widget free to use?
A: Yes, this widget is completely free to use on your Blogger blog.
Conclusion
In this post I have made a tutorial about How to Create a Floating WhatsApp Chat or Contact Form. Which gives a beautiful look to your website. I hope you have liked it and please share with your friends and follow our blog for more.
If you face any problems in this code or have any questions so feel free to ask me in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.
© Copyright: Tech Zenoh Pro™
