@keyframes whatsapp-pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.2);
opacity: 0.3;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
@keyframes whatsapp-fadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
#whatsapp-floating-btn {
left:5% !important;
bottom : 5% !important;
right: 8px !important;
}
#whatsapp-floating-btn > a > div {
width: 55px !important;
height: 55px !important;
}
#whatsapp-floating-btn svg {
width: 26px !important;
height: 26px !important;
}
}
@media (max-width: 480px) {
#whatsapp-floating-btn {
bottom: 11% !important;
left: 8px !important;
}
#whatsapp-floating-btn > a > div {
width: 50px !important;
height: 50px !important;
}
#whatsapp-floating-btn svg {
width: 24px !important;
height: 24px !important;
}
}
/* Hide on very small screens if needed */
@media (max-width: 320px) {
#whatsapp-floating-btn > a > div {
width: 45px !important;
height: 45px !important;
}
#whatsapp-floating-btn {
bottom: 11% !important;
left: 8px !important;
}
#whatsapp-floating-btn svg {
width: 22px !important;
height: 22px !important;
}
}
(function() {
'use strict';
// Smart loading - show button after page loads and user scrolls
let whatsappBtn = document.getElementById('whatsapp-floating-btn');
let hasScrolled = false;
let isVisible = false;
function showWhatsAppButton() {
if (!isVisible) {
whatsappBtn.style.opacity = '1';
whatsappBtn.style.transform = 'scale(1)';
whatsappBtn.style.animation = 'whatsapp-fadeIn 0.5s ease-out';
isVisible = true;
}
}
function hideWhatsAppButton() {
if (isVisible) {
whatsappBtn.style.opacity = '0';
whatsappBtn.style.transform = 'scale(0.8)';
isVisible = false;
}
}
// Show button after 2 seconds or on first scroll
setTimeout(function() {
if (!hasScrolled) {
showWhatsAppButton();
}
}, 2000);
// Show on scroll
window.addEventListener('scroll', function() {
if (!hasScrolled && window.scrollY > 100) {
hasScrolled = true;
showWhatsAppButton();
}
// Hide/show based on scroll position (optional)
if (window.scrollY > 200) {
showWhatsAppButton();
}
});
// Analytics tracking (optional)
whatsappBtn.addEventListener('click', function() {
// Track click event
if (typeof gtag !== 'undefined') {
gtag('event', 'click', {
event_category: 'WhatsApp Button',
event_label: 'Floating Button Click'
});
}
// Console log for debugging
console.log('WhatsApp button clicked');
});
// Add accessibility
let whatsappLink = whatsappBtn.querySelector('a');
whatsappLink.setAttribute('aria-label', 'Help');
whatsappLink.setAttribute('title', 'मदत');
// Keyboard accessibility
whatsappLink.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.click();
}
});
})();
