<!–
Beautiful WhatsApp button
Replace YOUR_NUMBER with international format (e.g. 919876543210)
Replace YOUR_MESSAGE with your message (plain text, the script will encode it)
–>
<style>
:root{
–wa-size: 64px;
–wa-gradient-1: #25D366;
–wa-gradient-2: #128C7E;
–wa-shadow: 0 8px 30px rgba(18,140,126,0.18);
–wa-accent: rgba(255,255,255,0.18);
}
.whatsapp-btn {
position: fixed;
right: 22px;
bottom: 22px;
width: var(–wa-size);
height: var(–wa-size);
display: inline-grid;
place-items: center;
border-radius: 50%;
text-decoration: none;
box-shadow: var(–wa-shadow);
background: linear-gradient(135deg, var(–wa-gradient-1), var(–wa-gradient-2));
color: white;
font-family: system-ui, -apple-system, “Segoe UI”, Roboto, “Helvetica Neue”, Arial;
z-index: 9999;
transform: translateZ(0);
transition: transform 220ms cubic-bezier(.2,.9,.3,1), box-shadow 220ms;
will-change: transform;
border: 1px solid rgba(255,255,255,0.10);
padding: 8px;
}
.whatsapp-btn .wa-inner{
display: inline-grid;
place-items: center;
width: calc(var(–wa-size) – 12px);
height: calc(var(–wa-size) – 12px);
border-radius: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
backdrop-filter: blur(3px);
}
.whatsapp-btn svg { width: 58%; height: 58%; display:block; }
.whatsapp-btn:hover {
transform: translateY(-6px) scale(1.03);
box-shadow: 0 18px 42px rgba(18,140,126,0.28);
}
.whatsapp-btn:active { transform: translateY(-2px) scale(.99); }
.whatsapp-btn:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(37,211,102,0.14), 0 10px 30px rgba(18,140,126,0.18);
}
/* subtle pulsing ring */
.whatsapp-btn::after{
content: “”;
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(37,211,102,0.06), transparent 40%);
opacity: 0;
transition: opacity 300ms;
pointer-events: none;
}
.whatsapp-btn:hover::after{ opacity: 1; }
/* small label for larger screens */
.whatsapp-label {
position: fixed;
right: calc(22px + var(–wa-size) + 12px);
bottom: 34px;
background: rgba(0,0,0,0.6);
color: white;
padding: 8px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
backdrop-filter: blur(6px);
display: none; /* hidden on small screens */
align-items: center;
gap: 10px;
z-index: 9998;
}
@media(min-width: 720px){
.whatsapp-label { display: inline-flex; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.whatsapp-btn, .whatsapp-btn:hover { transition: none; transform: none; }
}
</style>
<!– Button + optional label –>
<a id=”wa-btn” class=”whatsapp-btn” href=”#” role=”button” aria-label=”Chat on WhatsApp” target=”_blank” rel=”noopener noreferrer”>
<span class=”wa-inner” aria-hidden=”true”>
<!– WhatsApp SVG icon (keeps DPI crisp) –>
<svg viewBox=”0 0 24 24″ fill=”none” aria-hidden=”true” xmlns=”http://www.w3.org/2000/svg” focusable=”false”>
<path d=”M20.52 3.48A11.94 11.94 0 0012 .5C6.48.5 1.8 4.9 1.2 10.12c-.17.98.02 2.02.52 2.92L.14 20.4l7.8-2.04c.84.25 1.72.38 2.62.38 5.52 0 10.2-4.4 10.8-9.62.18-1.08-.02-2.18-.96-3.24z” fill=”currentColor” opacity=”0.08″/>
<path d=”M17.472 14.382c-.297-.148-1.76-.867-2.032-.967-.272-.1-.47-.148-.67.148-.198.297-.767.967-.94 1.166-.173.198-.347.223-.644.075-.297-.148-1.255-.463-2.39-1.48-.885-.79-1.48-1.763-1.655-2.06-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.173.198-.297.297-.495.1-.198.05-.372-.025-.52-.075-.148-.67-1.611-.918-2.207-.242-.58-.487-.5-.67-.51l-.57-.01c-.198 0-.52.075-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.878 1.213 3.077.148.198 2.095 3.2 5.076 4.486 1.06.458 1.885.732 2.532.937 1.063.343 2.03.295 2.797.179.854-.13 1.76-.72 2.008-1.415.248-.695.248-1.29.173-1.415-.074-.124-.272-.198-.57-.347z” fill=”white”/>
</svg>
</span>
</a>
<div class=”whatsapp-label” aria-hidden=”true”>
<svg width=”20″ height=”20″ viewBox=”0 0 24 24″ fill=”none” style=”opacity:.9″>
<path d=”M20.52 3.48A11.94 11.94 0 0012 .5C6.48.5 1.8 4.9 1.2 10.12c-.17.98.02 2.02.52 2.92L.14 20.4l7.8-2.04c.84.25 1.72.38 2.62.38 5.52 0 10.2-4.4 10.8-9.62.18-1.08-.02-2.18-.96-3.24z” fill=”white” opacity=”0.06″/>
</svg>
<span>Chat with us on WhatsApp</span>
</div>
<script>
(function(){
// === CONFIGURE HERE ===
const phoneNumber = “YOUR_NUMBER”; // e.g. 919876543210 (country code + number, no plus or spaces)
const initialMessage = “Hello! I would like more information.”; // default message
// encode message and create wa.me link
function waLink(number, message){
const encoded = encodeURIComponent(message);
// wa.me requires just digits in number (countrycode + number)
return `https://wa.me/${number}?text=${encoded}`;
}
// apply link to button
const btn = document.getElementById(“wa-btn”);
if(btn){
const href = waLink(phoneNumber, initialMessage);
btn.setAttribute(“href”, href);
}
// keyboard activation: Enter/Space behave like click
btn.addEventListener(“keydown”, function(e){
if(e.key === ” ” || e.key === “Enter”){ e.preventDefault(); btn.click(); }
});
// Optional: you can dynamically change message before opening
// Example: attach data attributes to set custom messages per page element
// If you don’t want JS at all, you can build the URL server-side and put it directly in the href.
})();
</script>