Add a WhatsApp Button to Your Website with HTML

For a hand-coded or static site, the floating WhatsApp button is a single snippet you paste before the closing body tag. No library, no CSS file and no image to upload — the snippet draws the button itself.

Loading the generator…

Step by step: add the button to HTML

Make the button: enter your WhatsApp number with the country code, the pre-filled message, the label, color, size and corner, press Generate code and copy the snippet.
Open your page’s HTML file (for example index.html) in your code editor, or in your hosting control panel’s file manager.
Paste the snippet on a new line just above </body>.
If your site has a shared footer file (for example footer.php, an include or a template partial), paste it there once instead of in every page.
Upload the changed file(s) to your server (by FTP or the file manager), reload the page and check the button.

See who clicks it

The free button does not count clicks. WhatsApp Chat Button with Click Tracking ($9/month) shows how many visitors open a chat — per page, per device and per day — on your HTML site, with the same button.

Questions

Can I style the button with my own CSS?

The button is drawn inside its own shadow DOM, so your site’s CSS cannot break it. Change color, size, label and corner in the generator and copy the code again.