How to add a WhatsApp button to your website (HTML and CSS)

A WhatsApp button doesn't need a plugin or a third-party script. It is an ordinary link with a bit of styling. Here are two versions ready to copy.

Published on October 6, 2026 · By the QLinky team

Version 1: button inside the content

Replace the number and the message with your own (or generate the link with QLinky and paste the URL in the href).

<a class="btn-whatsapp"
   href="https://wa.me/13051234567?text=Hi%2C%20I%27d%20like%20some%20information"
   target="_blank" rel="noopener">
  Message us on WhatsApp
</a>

.btn-whatsapp {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  background: #128c7e;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.btn-whatsapp:hover { background: #0e6f64; }

Version 2: floating button in a corner

It stays fixed at the bottom right while the person scrolls the page.

<a class="wa-floating"
   href="https://wa.me/13051234567"
   target="_blank" rel="noopener"
   aria-label="Open WhatsApp chat">
  WhatsApp
</a>

.wa-floating {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  padding: 14px 18px;
  border-radius: 999px;
  background: #128c7e;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

Details that make the difference

• Visible text or aria-label. If the button only shows an icon, add aria-label so screen readers announce where it leads.
• rel="noopener" whenever you use target="_blank", so the page that opens has no access to yours.
• Contrast. The classic light green with white text is hard to read. A darker green, like the one in the example, keeps the text legible.
• Don't cover anything. Check on a phone that the floating button doesn't sit on top of the cookie notice, the cart or a form's submit button.
• A different message per page. On a product page you can leave “Hi, I'm asking about model X” typed. It saves you the first question.

Where to paste it on your platform

• WordPress: add a “Custom HTML” block with the link, and the CSS under Appearance, Customize, Additional CSS.
• Builders like Wix, Shopify or Squarespace: almost all of them let you create a button and assign it a URL. Paste the wa.me link there and you don't need any code.
• Hand-built site: the HTML goes wherever you want the button and the CSS in your stylesheet.

How to know whether people use it

A click on the button is a click to another domain. Google Analytics 4 records those outbound clicks automatically if you have enhanced measurement turned on, and you can filter them by destination URL.