Add free Whatsapp chat bubble to your website

The code is completely free. You just need to edit it for yourself and then add it to the fields you want to appear on your site.

The button in question will follow when you stick to the screen on your site and move it up and down.

(function () {
var options = {
whatsapp: "901234567890", // WhatsApp nubmer
call_to_action: "Whatsapp Support", // Butonun yaninda gorunmesini istediginiz yazi
position: "left", // position 'right' 'left'
};
var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();

It is completely free.

A WhatsApp button with no external service

The code above depends on a third-party service; if the service shuts down, the button stops working. The example below uses WhatsApp’s official wa.me link and loads no external files. Add it right before your site’s </body> tag and write the number with the country code, without a leading zero:

<a href="https://wa.me/905XXXXXXXXX?text=Hello" target="_blank" rel="noopener"
   style="position:fixed;left:20px;bottom:20px;z-index:999;display:flex;align-items:center;
          justify-content:center;width:56px;height:56px;border-radius:50%;
          background:#25D366;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.2)"
   aria-label="Message us on WhatsApp">WA</a>

Making the button more effective

• Add a ready greeting message with the ?text= parameter.
• Show your working hours next to the button or on your contact page.
• Place the button in a corner where it does not overlap other sticky elements such as a chat assistant.