https://naveencodes.com/whatsapp-float.js

1/**
2 * Floating WhatsApp button — fixed bottom-right on every page.
3 * Self-contained: injects its own styles + markup, no page-side setup needed
4 * beyond <script defer src="/whatsapp-float.js"></script>.
5 */
6(function () {
7  'use strict';
8
9  var PHONE = '918053385815';
10  var MESSAGE = "Hi Naveen, I found your website and I'm interested in working together.";
11  var WA_URL = 'https://wa.me/' + PHONE + '?text=' + encodeURIComponent(MESSAGE);
12
13  function inject() {
14    if (document.getElementById('wa-float')) return; // don't double-inject
15
16    var style = document.createElement('style');
17    style.textContent = [
18      '#wa-float{position:fixed;right:22px;bottom:22px;z-index:9999;display:flex;align-items:center;justify-content:center;',
19      'width:58px;height:58px;border-radius:50%;background:#25D366;box-shadow:0 6px 20px rgba(37,211,102,.45),0 2px 8px rgba(0,0,0,.15);',
20      'text-decoration:none;cursor:pointer;animation:wa-pulse 2.6s ease-in-out infinite;transition:transform .2s,box-shadow .2s}',
21
22      '#wa-float:hover{transform:scale(1.08);box-shadow:0 10px 28px rgba(37,211,102,.55),0 3px 10px rgba(0,0,0,.2)}',
23
24      '#wa-float svg{width:30px;height:30px;fill:#fff;position:relative;z-index:2}',
25
26      '#wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;',
27      'animation:wa-ring 2.6s ease-out infinite;z-index:1}',
28
29      '@keyframes wa-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}',
30      '@keyframes wa-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}',
31
32      '#wa-float-tip{position:fixed;right:88px;bottom:36px;z-index:9998;background:#111;color:#fff;',
33      'font:600 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:8px 14px;border-radius:8px;',
34      'white-space:nowrap;opacity:0;pointer-events:none;transform:translateX(6px);transition:opacity .2s,transform .2s;',
35      'box-shadow:0 4px 14px rgba(0,0,0,.25)}',
36      '#wa-float-tip::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);',
37      'border:5px solid transparent;border-left-color:#111}',
38      '#wa-float:hover + #wa-float-tip,#wa-float-tip:hover{opacity:1;transform:translateX(0)}',
39
40      '@media(max-width:640px){',
41      '  #wa-float{right:16px;bottom:16px;width:52px;height:52px}',
42      '  #wa-float svg{width:26px;height:26px}',
43      '  #wa-float-tip{display:none}',
44      '}',
45      '@media(prefers-reduced-motion:reduce){',
46      '  #wa-float{animation:none}',
47      '  #wa-float::before{animation:none;display:none}',
48      '}'
49    ].join('');
50    document.head.appendChild(style);
51
52    var link = document.createElement('a');
53    link.id = 'wa-float';
54    link.href = WA_URL;
55    link.target = '_blank';
56    link.rel = 'noopener noreferrer';
57    link.setAttribute('aria-label', 'Chat on WhatsApp');
58    link.innerHTML =
59      '<svg 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-.347z"/><path d="M12.001 2C6.478 2 2 6.478 2 12c0 1.85.507 3.585 1.395 5.076L2 22l5.076-1.376A9.955 9.955 0 0012.001 22C17.523 22 22 17.522 22 12S17.523 2 12.001 2zm0 18.163a8.14 8.14 0 01-4.157-1.135l-.298-.177-3.09.838.827-3.022-.194-.312A8.147 8.147 0 013.837 12c0-4.508 3.667-8.163 8.164-8.163 4.508 0 8.163 3.667 8.163 8.163 0 4.508-3.655 8.163-8.163 8.163z"/></svg>';
60    document.body.appendChild(link);
61
62    var tip = document.createElement('span');
63    tip.id = 'wa-float-tip';
64    tip.textContent = 'Chat with Naveen on WhatsApp';
65    document.body.appendChild(tip);
66  }
67
68  if (document.readyState === 'loading') {
69    document.addEventListener('DOMContentLoaded', inject);
70  } else {
71    inject();
72  }
73})();