Add a WhatsApp Chat Button to Your Website (HTML, WordPress, Shopify)

A WhatsApp button is an anchor tag. Everything else — the plugin marketplace, the widget subscriptions, the scripts that add 60 KB to your page — is decoration on top of one link.

The twelve lines that do the job#

<a class="wa-fab"
   href="https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question%20about%20the%20Starter%20plan"
   target="_blank" rel="noopener"
   aria-label="Chat with us on WhatsApp">
  <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2zm5.6 14.2c-.2.7-1.4 1.3-2 1.4-.5.1-1.1.1-1.8-.1a13 13 0 0 1-5.6-4.9c-.4-.6-.9-1.5-.9-2.4 0-.9.5-1.4.7-1.6.2-.2.4-.3.6-.3h.4c.2 0 .4 0 .5.4l.7 1.7c.1.2 0 .4-.1.5l-.3.4c-.1.2-.3.3-.1.6.4.7.9 1.3 1.5 1.8.6.4 1 .6 1.2.7.2.1.4.1.5-.1l.6-.7c.2-.2.3-.2.5-.1l1.6.8c.2.1.4.2.4.3.1.2.1.6 0 .9z"/>
  </svg>
</a>

<style>
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:60;
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.22)}
.wa-fab:hover{filter:brightness(1.06)}
.wa-fab:focus-visible{outline:3px solid #0b5;outline-offset:3px}
@media (min-width:1024px){.wa-fab{display:none}}  /* mobile only, optional */
</style>

Three details that are not optional: aria-label, because a bare icon link is unreadable to a screen reader; :focus-visible, because keyboard users need to see where they are; and rel="noopener" on the new-tab link.

WordPress#

No plugin needed. Appearance → Editor → Footer template part, or a Custom HTML block in a footer widget area. Paste the markup, save, hard refresh.

Use a plugin only if you actually need what a plugin gives: showing the button on some pages and not others through the admin, business-hours visibility, multiple agents behind one widget. If all you need is a button, twelve lines beats a plugin that loads jQuery.

Shopify#

Online Store → Themes → Edit code → layout/theme.liquid, paste before </body>, save. For a product-aware message, use Liquid to inject the product title:

{% if product %}
<a class="wa-fab" target="_blank" rel="noopener"
   aria-label="Chat with us on WhatsApp"
   href="https://wa.me/919876543210?text={{ 'Hi, I have a question about ' | append: product.title | url_encode }}">
  …
</a>
{% endif %}

Now every conversation from a product page starts with the product name in it. That single change does more for conversion than any styling decision on the button.

Placement decisions that matter more than design#

Desktop or mobile? On mobile the link opens the app the visitor is already signed into. On desktop it opens WhatsApp Web, which is friction if they are not logged in. Many stores show the button on mobile only; if you keep it on desktop, say so in the label — "Chat on WhatsApp" sets the expectation.

Bottom-right, and mind the collisions. Cookie banners, cart drawers and support widgets all live in the same corner. Check your own site on a small screen before shipping.

One button, not three. A floating button plus an inline button plus a header link is noise. Pick the floating button and one contextual placement — next to the price, or next to "out of stock" — where asking a question is the natural next action.

Say what happens after the click. "Chat with us on WhatsApp — replies in 15 mins" converts better than an unlabelled icon, and it makes your response time a promise you then have to keep.

Tracking#

Two layers, and they measure different things:

<a class="wa-fab" href="…" onclick="gtag('event','whatsapp_click',{page:location.pathname})">

Click events tell you which pages produce intent. They do not tell you whether a conversation happened — the click count will always exceed the conversation count, because some people bounce at the app switch. Conversation counts come from your inbox. Compare the two and you learn which pages generate real conversations rather than curious taps.

For attribution across many placements, point the button at a redirect you control (/chat?src=pdp) that logs the hit and forwards — the same pattern used for QR codes.

Performance and accessibility notes#

• Inline the SVG rather than loading an icon font or an external image.
• Do not animate the button constantly. A pulse that never stops is an accessibility problem and reads as desperation.
• Respect prefers-reduced-motion if you do animate on entry.
• Keep total added weight under a couple of kilobytes. Any widget script heavier than that is charging your Core Web Vitals for a link.

The button is the easy half: once it works, several people usually need to answer what it produces. Route website chats into a shared inbox with assignment and internal notes.

Related: building the link itself · what to do with the leads it creates.