Free Tool

WhatsApp Chat Button Generator

Add a floating WhatsApp chat widget to your website. Customise it on the left, watch the live preview, then copy one snippet into your site. No coding.

Customise your widget

Brand name

WhatsApp number

Agent / subtitle line

Welcome message (39/60)

Button label (12/24)

Leave empty to show just the round icon button.

Pre-filled message

Use {{page_url}} and {{page_title}} to auto-insert the visitor's current page.

Avatar image URL (optional)

Position

Brand colour

Open the chat window automatically on page load

Live preview

Click the button to open it

yourwebsite.com

Embed code

Paste this just before the closing </body> tag on every page of your website.

<!-- Whinta WhatsApp Chat Widget -->
<script>
(function(){
  var c = {"phone":"919368322072","brandName":"Whinta Support","subtitle":"Typically replies within minutes","welcome":"Hi there! 👋 How can we help you today?","cta":"Chat with us","prefill":"Hi! I have a question about your website.","avatar":"","position":"right","color":"#25D366","openByDefault":false};
  var side = c.position === 'left' ? 'left' : 'right';
  var esc = function(s){ return String(s).replace(/[&<>"]/g, function(m){ return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'})[m]; }); };
  var waIcon = '<svg viewBox="0 0 32 32" width="30" height="30" fill="#fff"><path d="M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.2 1.6 6L4 29l8.2-1.6c1.7.9 3.7 1.4 5.8 1.4 6.6 0 12-5.4 12-12S22.6 3 16 3zm0 21.8c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-4.9 1 1-4.8-.3-.4C5.4 18.1 5 16.6 5 15 5 9 9.9 4.1 16 4.1S27 9 27 15s-4.9 9.8-11 9.8zm5.5-7.4c-.3-.2-1.8-.9-2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.3 5.2 4.6.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.2-.6-.4z"/></svg>';
  var root = document.createElement('div');
  root.id = 'whinta-chat-widget';
  var s = root.style;
  s.position='fixed'; s.bottom='20px'; s[side]='20px'; s.zIndex='99999';
  s.fontFamily='-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif';
  var avatarHtml = c.avatar
    ? '<img src="'+esc(c.avatar)+'" alt="" style="width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#fff">'
    : '<div style="width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:18px;flex:0 0 auto">'+esc((c.brandName||'S').charAt(0).toUpperCase())+'</div>';
  var panel = document.createElement('div');
  panel.style.cssText='width:320px;max-width:calc(100vw - 40px);border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.18);background:#fff;margin-bottom:14px;display:none;';
  panel.innerHTML =
    '<div style="background:'+esc(c.color)+';padding:16px;display:flex;align-items:center;gap:12px;color:#fff">'+avatarHtml+
      '<div style="min-width:0"><div style="font-weight:600;font-size:15px;line-height:1.2">'+esc(c.brandName)+'</div>'+
      (c.subtitle?'<div style="font-size:12px;opacity:.85;margin-top:2px">'+esc(c.subtitle)+'</div>':'')+'</div>'+
      '<button id="whinta-close" aria-label="Close" style="margin-left:auto;background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.85">&times;</button>'+
    '</div>'+
    '<div style="background:#e5ddd5;padding:18px 16px;min-height:120px">'+
      (c.welcome?'<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 12px;font-size:14px;color:#111;box-shadow:0 1px 1px rgba(0,0,0,.08);max-width:85%;line-height:1.4">'+esc(c.welcome)+'</div>':'')+
    '</div>'+
    '<div style="padding:12px 14px;background:#fff">'+
      '<button id="whinta-start" style="width:100%;background:'+esc(c.color)+';color:#fff;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px">'+
        '<svg viewBox="0 0 32 32" width="18" height="18" fill="#fff"><path d="M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.2 1.6 6L4 29l8.2-1.6c1.7.9 3.7 1.4 5.8 1.4 6.6 0 12-5.4 12-12S22.6 3 16 3z"/></svg>Start chat</button>'+
      '<a href="https://whinta.com" target="_blank" rel="noopener" style="display:block;text-align:center;font-size:11px;color:#9ca3af;margin-top:8px;text-decoration:none">Powered by Whinta</a>'+
    '</div>';
  var launcher = document.createElement('button');
  launcher.setAttribute('aria-label','Open WhatsApp chat');
  var hasLabel = c.cta && c.cta.trim();
  launcher.style.cssText='border:none;cursor:pointer;background:'+esc(c.color)+';color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.25);display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;float:'+side+';'+
    (hasLabel?'border-radius:30px;padding:12px 20px 12px 16px':'border-radius:50%;width:60px;height:60px;justify-content:center');
  launcher.innerHTML = waIcon + (hasLabel?'<span>'+esc(c.cta)+'</span>':'');
  root.appendChild(panel);
  root.appendChild(launcher);
  var clr = document.createElement('div'); clr.style.clear='both'; root.appendChild(clr);
  document.body.appendChild(root);
  function buildLink(){
    var msg = (c.prefill||'').replace(/\{\{\s*page_url\s*\}\}/g, location.href).replace(/\{\{\s*page_title\s*\}\}/g, document.title);
    var url = 'https://wa.me/' + c.phone;
    if (msg.trim()) url += '?text=' + encodeURIComponent(msg);
    return url;
  }
  function open(){ panel.style.display='block'; }
  function close(){ panel.style.display='none'; }
  launcher.addEventListener('click', function(){ panel.style.display==='block'?close():open(); });
  panel.querySelector('#whinta-close').addEventListener('click', close);
  panel.querySelector('#whinta-start').addEventListener('click', function(){
    if(!c.phone){ alert('Add a valid phone number to enable chat.'); return; }
    window.open(buildLink(), '_blank');
  });
  if (c.openByDefault) open();
})();
</script>

Ready for real WhatsApp conversations?

Whinta runs broadcasts, chatbots, shared team inboxes and automations on the official WhatsApp Business API.

Start free with Whinta