How to Add a WhatsApp Chat Button to Your Website

WhatsApp Chat Button: Quick Answer

The short version:

What Is a WhatsApp Chat Button?

It’s a clickable button, icon or link on your website that opens a WhatsApp chat with your business number. On a phone it opens the WhatsApp app; on a computer it opens WhatsApp Web or the Desktop app. If you set a pre-filled message, the text is already in the message box — the visitor only has to press send.

The click is on your site; the conversation happens in WhatsApp.

Why Add WhatsApp Chat to Your Website?

A contact form asks a visitor to wait for an email. A WhatsApp button asks them to start a conversation in an app they already use every day — and it leaves you with a chat thread and a number you can reply to. It works best where a visitor has a question that’s too small for a form:

The same idea powers Click-to-WhatsApp ads: remove the steps between interest and a first message.

4 Ways to Add a WhatsApp Button to Your Website

All four rest on the same click-to-chat link; they differ in how much work they take and how visible the result is.

If you’re not sure, start with a link on your contact page, add a floating button once you see it gets used, and move to a widget when you want a greeting and one place to manage it.

Setting Up a WhatsApp Chat Button

Step 1: Set the Number and the Pre-Filled Message

Every method starts from the same link: https://wa.me/<number>?text=<message>. The number is the full international number with digits only — no +, spaces, dashes or leading zeros. For an Indian mobile number, 98765 43210 becomes 919876543210.

Source: WhatsApp Help Center — How to use click to chat.

The text after ?text= is the pre-filled message. Visitors can still edit it before they send, so keep it short and useful. Special characters need URL encoding:

Illustration: what the visitor sees after tapping the button — the message is ready, they only press send.

Step 2: Add a Link or an HTML Button

Paste this wherever you want the button — a page, a product template or the footer. Replace the number and the message.

HTML link

<a href="https://wa.me/919876543210?text=Hi%2C%20I%27d%20like%20a%20quote%20for%20a%202%20BHK%20interior."
   target="_blank" rel="noopener">
  Chat with us on WhatsApp
</a>

Most site builders let you do the same without code: add a button element and paste the wa.me link as its URL.

Step 3: Make It a Floating Button

A floating button stays in a corner while the visitor scrolls. Add this once to a site-wide template — a footer or theme file — so it appears on every page. The WhatsApp icon is a file you supply; link it from your own site rather than a third party.

Illustration: a floating button in the bottom-right corner of a product page.

Floating button — HTML and CSS

<a class="wa-float"
   href="https://wa.me/919876543210?text=Hi%2C%20I%27d%20like%20a%20quote%20for%20a%202%20BHK%20interior."
   target="_blank" rel="noopener"
   aria-label="Chat with us on WhatsApp">
  <img src="/images/whatsapp-icon.svg" alt="" width="28" height="28">
</a>

<style>
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  @media (max-width: 480px) {
    .wa-float { right: 16px; bottom: 16px; }
  }
</style>

Step 4 (Optional): Use a Website Widget

A widget is a floating button with a small popup — a greeting, a brand color, a “Chat with us” button — generated by a tool, so you paste one snippet instead of writing the HTML yourself. It still opens WhatsApp. Here’s the flow in , where the widget is built in:

What the generated snippet looks like (addresses and key replaced)

<script defer>
    var WABB_WIDGET_API="https://api.example.com/";
    var WABB_WIDGET_KEY="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
</script>
<script defer src="https://example.com/widget.js"></script>

In the preview the popup carries a small “Powered by Wabb” line. Once the snippet is on your site, open a page in a private window to check the button, the popup and the message.

Best Practices for a WhatsApp Chat Button

A button that’s easy to find and clear about what it does gets used; one that’s everywhere or vague gets ignored. Six habits that make the difference:

Button Text and Pre-Filled Messages That Fit the Page

Match the label to what the visitor wants on that page, and pre-fill a message that carries the context:

Illustration: example button labels with a matching pre-filled message.

Troubleshooting and Tracking Your WhatsApp Button

Most problems come from the number format, the encoding or where the code was pasted:

Count the Clicks

WhatsApp doesn’t tell you who clicked, so measure it on your own site. With Google Analytics 4 already installed, this sends an event every time a visitor clicks a wa.me link:

<script>
  document.querySelectorAll('a[href^="https://wa.me/"]').forEach(function (el) {
    el.addEventListener('click', function () {
      gtag('event', 'whatsapp_click', {
        link_url: el.href,
        page_path: location.pathname
      });
    });
  });
</script>

To see which page produced a conversation, put it in the pre-filled message — for example “Hi, I’m interested in the pricing plans (from the Pricing page)”. UTM parameters don’t carry into WhatsApp, so the message is the simplest way to keep the source.

From WhatsApp Button to Automation

The button solves one problem — getting visitors into a conversation. It doesn’t decide what happens in that conversation. Once the button works, messages arrive at any hour, many ask the same few questions, and not every one is a real lead.

The button starts the conversation; automation handles what comes next.

Illustration: the first reply after a button click, asking the questions a person would ask anyway.

You can start small — a greeting or away message covers the first minutes. When the volume outgrows that, platforms such as WABB can run the conversation itself: qualifying the lead, answering routine questions and routing the chat to the right person. Learn how WhatsApp automation works →

Ready to build the agent? Follow Build a WhatsApp AI Agent in India with WABB.