Floating button on a website
Add a floating WhatsApp button to your website for easy conversations without saving contact info. Simply copy and paste the code below into your website's HTML <body> section, and add your WhatsApp Business number after the last slash inside a href=””.
https://api.whatsapp.com/send?phone=[your_WhatsApp_Business_phone_number]
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=[your_WhatsApp_Business_phone_number]" style="position:fixed;
width:60px;height:60px;bottom:40px;right:40px;background-color:#25d366;color:#FFF;border-radius:50px;text-align:center;font-size:30px;box-shadow: 2px 2px 3px #999;z-index:100;" target="_blank">
<i style="margin-top:16px;" class="fa fa-whatsapp"></i>
</a>
Click-to-chat link
Click-to-chat allows users to start a conversation without saving contact info. It works via a generated link, which opens WhatsApp in a pop-up and automatically starts a chat with the target number. This works on both mobile and desktop.
To make it work, add your WhatsApp Business number after the last slash.
https://wa.me/ [your_WhatsApp_Business_phone_number]
To add this as a button on your website, use one of the code versions below. You can customize the image and other parameters as needed.
SVG image
<a aria-label="Chat on WhatsApp" href="https://wa.me/1XXXXXXXXXX"> <img alt="Chat on WhatsApp" src="WhatsAppButtonGreenLarge.svg" />
<a />
PNG image
<a aria-label="Chat on WhatsApp" href="https://wa.me/1XXXXXXXXXX"> <img alt="Chat on WhatsApp" src="WhatsAppButtonGreenLarge.png" />
<a />
