WHATSAPP FLOAT
BUTTON SETUP

Copy and paste this code into every page on your website — just before the </body> closing tag. Takes 2 minutes per page. Increases enquiry rate by 20–40%.

✅ What this does: Adds a floating WhatsApp button in the bottom-right corner of every page. When a visitor clicks it, it opens a pre-filled WhatsApp chat with Dillip Babu's number and a welcome message. Works on mobile and desktop.

Live Preview — This is what the button looks like

The button floats in the bottom-right corner of every page. It pulses gently to attract attention without being annoying.

Step 1 of 3

Update Dillip's WhatsApp Number in the Code Below

Find 919876543210 in the code and replace it with Dillip's actual WhatsApp number in international format (91 = India country code, then 10-digit mobile number with no spaces or dashes).
Example: if the number is 98765 43210 → replace with 919876543210

Step 2 of 3

Copy This Code — Paste Just Before </body> on Every Page

This is the complete self-contained snippet. No external libraries required. Works on all browsers and devices.

<!-- ═══ WHATSAPP FLOATING BUTTON — DILLIP BABU ═══ -->
<style>
  .wa-float{position:fixed;bottom:1.8rem;right:1.8rem;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
  .wa-float-btn{display:flex;align-items:center;gap:.7rem;background:#25D366;border-radius:50px;padding:.75rem 1.2rem .75rem .9rem;box-shadow:0 8px 24px rgba(37,211,102,.45);text-decoration:none;transition:transform .25s,box-shadow .25s;animation:waBtnPulse 2.5s ease infinite}
  .wa-float-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 36px rgba(37,211,102,.6)}
  @keyframes waBtnPulse{0%,100%{box-shadow:0 8px 24px rgba(37,211,102,.45)}50%{box-shadow:0 8px 32px rgba(37,211,102,.7)}}
  .wa-float-icon{width:26px;height:26px;fill:white;flex-shrink:0}
  .wa-float-text{display:flex;flex-direction:column}
  .wa-float-label{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1;font-family:sans-serif}
  .wa-float-action{font-size:.8rem;font-weight:600;color:white;line-height:1.3;font-family:sans-serif}
  .wa-float-tooltip{background:#0d0d0d;color:white;font-size:.72rem;padding:.4rem .9rem;border-radius:3px;font-family:sans-serif;white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none;border-radius:3px}
  .wa-float-btn:hover + .wa-float-tooltip, .wa-float-tooltip:hover{opacity:1}
  @media(max-width:600px){.wa-float{bottom:1rem;right:1rem}.wa-float-btn{padding:.65rem 1rem .65rem .8rem}.wa-float-text{display:none}}
</style>
<div class="wa-float" role="complementary" aria-label="WhatsApp contact">
  <a href="https://wa.me/919876543210?text=Hi%20Dillip!%20I%20visited%20your%20website%20and%20would%20like%20to%20know%20more%20about%20your%20digital%20marketing%20services."
     class="wa-float-btn"
     target="_blank"
     rel="noopener noreferrer"
     aria-label="Chat with Dillip Babu on WhatsApp">
    <svg class="wa-float-icon" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
    </svg>
    <div class="wa-float-text">
      <span class="wa-float-label">Chat with us</span>
      <span class="wa-float-action">WhatsApp Now</span>
    </div>
  </a>
</div>
<!-- ═══ END WHATSAPP BUTTON ═══ -->
Step 3 of 3

Paste on Every Page — Just Before </body>

Open each HTML file in your code editor. Find </body> near the very bottom of the file. Paste the entire snippet just above that closing tag. Save and upload. The button will appear immediately.

Pages to add it to: index.html, about_dillip_babu.html, all service pages, all niche pages, all blog posts, 404.html — every single page.

On mobile (screens under 600px) the text label hides automatically and only the WhatsApp icon shows — keeping it clean on small screens.

💡 Customise the pre-filled message: The text after ?text= in the URL is the message that appears in the WhatsApp chat. You can change it to anything — for example, for the restaurant page: ?text=Hi%20Dillip!%20I%20want%20digital%20marketing%20for%20my%20restaurant. Each page can have a different pre-filled message matching the page topic.
← Back to dillipbabu.in