Skip to content

Playbook · 6 steps

WhatsApp Chat Widget

Also called: WhatsApp website widget · WhatsApp chat button · Floating WhatsApp button · WhatsApp widget

6steps

Level
Foundation
Reading time
About 6 min

Reviewed

Definition
A button or pop-up embedded on a website that opens a WhatsApp chat with the business or collects opt-in, often with pre-filled text and tracking.

01 · How it works, in 6 steps

How does a WhatsApp chat widget work?

  1. 1

    Build the link

    Use the business number in international format with no +, spaces or leading zeros, and URL-encode the pre-filled text: https://wa.me/919876543210?text=Hi!%20I%20have%20a%20question.

  2. 2

    Pre-fill context per page

    Generate the text from the page: the product name, a short reference such as [web:pricing] and the question visitors most often ask there. Keep it short; the visitor can edit it before sending.

  3. 3

    Render an accessible button

    Use a real link (<a href>) with an aria-label, a visible focus style and a tap target of at least 44 × 44 px. Place it bottom-right, clear of other chat bubbles, cookie banners and the checkout button.

  4. 4

    Track the click and the chat

    Push a click event to your analytics when the button is tapped, and have the webhook handler read the reference from the first message so the conversation can be attributed to the page.

  5. 5

    Answer, and ask before marketing

    Greet with an auto-reply or bot outside office hours, route to the right team, and ask for marketing opt-in in the chat, recording the answer, rather than assuming it.

  6. 6

    Optionally collect opt-in on the page

    A pop-up form with the visitor's number and an unticked consent checkbox lets the business send the first message as an approved template. Store the consent text, time and page.

02Try it

Hands-on: use the controls to work through it yourself.

Read the widget code, line by line

5 / 5
// whatsapp-widget.js: load with <script src="/whatsapp-widget.js" defer></script>
(function () {
var NUMBER = "919876543210"; // country code + number: no +, spaces or leading 0
var ref = document.body.dataset.waRef || location.pathname.replace(/\W+/g, "-");
var topic = (document.querySelector("h1") || {}).textContent || "your products";
var text = "Hi! I have a question about " + topic.trim() + " [web:" + ref + "]";
var a = document.createElement("a");
a.href = "https://wa.me/" + NUMBER + "?text=" + encodeURIComponent(text);
a.target = "_blank";
a.rel = "noopener";
a.className = "wa-widget"; // fixed bottom-right, 44 x 44 px or larger, visible focus ring
a.setAttribute("aria-label", "Chat with us on WhatsApp");
a.textContent = "Chat on WhatsApp";
a.addEventListener("click", function () {
// GTM data layer event; no phone numbers or names
(window.dataLayer = window.dataLayer || []).push({ event: "whatsapp_click", wa_ref: ref });
});
document.body.appendChild(a);
})();

Step 5 of 5 · lines 16–19

The click is pushed to the analytics data layer with the page reference, and no personal data.

Jump to
A dependency-free widget script and the webhook lines that attribute its chats. Step through how the number is formatted, how page context reaches the pre-filled text, how the button stays accessible and how clicks and chats are tracked.

whatsapp-widget.js, step 5 of 5, lines 16–19: The click is pushed to the analytics data layer with the page reference, and no personal data.

03What is a WhatsApp chat widget?

A WhatsApp chat widget is a small piece of website code, usually a floating button in a corner and sometimes a pop-up with a greeting or a short form, that lets a visitor start a WhatsApp conversation with the business in one tap. Under the hood it is a Click-to-Chat link of the form https://wa.me/<number>?text=<message>: on a phone it opens the WhatsApp app, on a computer WhatsApp Desktop or WhatsApp Web, with the business number and an optional pre-filled message ready to send.

The widget itself sends nothing through the WhatsApp Business Platform. The visitor sends the first message from their own WhatsApp; it reaches your API number as an ordinary inbound messages webhook, opens the 24-hour customer service window and can be answered by a bot or an agent in your inbox. Well-built widgets add what the bare link cannot: different pre-filled text per page, office-hours messaging, click tracking in web analytics and, optionally, a form that collects a number and consent so the business can send the first message itself.

A widget is the website entry point; the WhatsApp QR Code plays the same role on print and packaging, and Click-to-WhatsApp ads on Facebook and Instagram. Compared with a live-chat widget, the conversation continues in the customer's own WhatsApp after they leave the site, so the business can follow up later, with an approved template once the window has closed.

Key takeaways

  • A WhatsApp chat widget is a website button or pop-up that opens a chat with the business through a wa.me click-to-chat link.
  • Pre-fill the message with the page or product, so the agent or bot knows the context from the first inbound message.
  • The visitor's first message opens a 24-hour customer service window; it is not a marketing opt-in by itself.
  • Track the click on the website and put a short page reference in the pre-filled text, because the chat itself carries no UTM data.
  • Keep the button small, labelled and clear of cookie banners and checkout controls, especially on phones.

04 · In code

A WhatsApp chat widget in code

<!-- Works without JavaScript: a real link with URL-encoded pre-filled text -->
<a class="wa-widget"
   href="https://wa.me/919876543210?text=Hi!%20I%20have%20a%20question%20%5Bweb%3Ahome%5D"
   target="_blank" rel="noopener" aria-label="Chat with us on WhatsApp">
  Chat on WhatsApp
</a>

The simplest widget is a styled link. Script can then improve the pre-filled text per page.

05 · Mistakes to avoid

Common mistakes with a WhatsApp chat widget

  • A generic 'Hi' with no context

    A chat that opens with 'Hi' forces the agent to ask what the visitor was looking at. Pre-fill the product or page and a reference the webhook can read.

  • Covering important controls on mobile

    A floating button over the pay button, the cookie banner or another chat bubble costs more than it earns. Test on small screens and hide the widget on checkout steps.

  • Treating a widget chat as marketing consent

    A visitor who asks about delivery has not agreed to promotions. Ask for opt-in in the chat or on a form, record it, and send marketing only after that.

  • No tracking, so no credit

    Without a click event and a page reference, widget chats look like any other inbound message and the website gets no credit. Track both ends.

  • Loading a heavy third-party script

    A widget is a link and a few lines of CSS. Large third-party bundles slow the page and may collect visitor data you did not intend to share; prefer a small first-party script.

06 · Pro tips

Best practices for a WhatsApp chat widget

  • Vary the pre-filled text by page: the product page asks about the product, the pricing page about plans.
  • Outside office hours, say so in the pop-up and let an auto-reply set expectations.
  • Use one business number across the site so every chat lands in one shared inbox.
  • Hide the floating button on checkout steps where it competes with the pay button.

07Example: Sofa questions with context at a Hyderabad furniture site

A furniture e-commerce site in Hyderabad adds a floating widget to its product pages. The pre-filled text reads 'Hi! I have a question about the Teak 3-seater sofa [web:sofa-teak-3s]', so the agent sees the product before replying. Clicks go to the analytics data layer, and the webhook handler tags each new chat with the page reference. After a month the team sees that 8% of chats start on the delivery-charges page, which prompts a clearer delivery FAQ, and that sofas, not beds, drive most widget conversations. Agents ask each customer whether they would like sale alerts on WhatsApp and record the answer as an opt-in.

08 · Key facts

A WhatsApp chat widget: key facts and limits

Link format
https://wa.me/{number}?text={URL-encoded text}
Number format
Country code and number: no +, spaces or leading 0
What a tap opens
The WhatsApp app on phones; Desktop or Web on computers
First message
Opens a 24-hour customer service window
Free entry point
Not opened by a website widget (ads and Page buttons only)
Recommended tap target
At least 44 × 44 px

09 · Why it matters

Why does a WhatsApp chat widget matter?

For many Indian businesses WhatsApp is where customers already prefer to ask questions, so a visible chat button often turns more browsing visitors into conversations than a contact form or a phone number does. Done well, each chat arrives with context (which page, which product), lands in the same inbox as every other WhatsApp conversation and stays reachable after the visit. Done badly, with a button that covers the checkout, a generic 'Hi' and no tracking, it adds noise and makes the channel's results impossible to measure.

10WhatsApp Chat Widget FAQs

How do I add a WhatsApp chat button to my website?+
Add a link to `https://wa.me/<number>?text=<message>` styled as a floating button. Use the number in international format without +, URL-encode the text and give the link an aria-label; a few lines of JavaScript can set the pre-filled text per page and track clicks.
Does a website WhatsApp widget need the WhatsApp Business API?+
No. A wa.me link works with any WhatsApp number, including one on the WhatsApp Business app. The API matters for what happens after the tap: a shared inbox, bots, webhooks for attribution and templates for follow-up.
Does a chat from my website widget cost anything?+
The customer's message costs you nothing, but your replies do. Inbound messages are never billed; in India, service replies inside the window have been charged at ₹0.145 since 1 October 2026, and a widget chat does not open the 72-hour free entry point that Click-to-WhatsApp ads do.
Can a chat widget collect WhatsApp opt-in?+
Yes, if it asks clearly. A widget form with the visitor's number and an unticked consent box, saying what you will send and how to stop, gives you a recorded opt-in; a chat on its own does not.
Why don't widget chats show up in Google Analytics?+
Because the conversation happens in WhatsApp, not on your site. Analytics sees only the tap on the widget, so push a click event, and include a short page reference in the pre-filled text that your webhook handler reads.

See InfiQ pricing

* Per-message rates for India, ex-GST: marketing, utility and authentication effective 1 July 2026; service messages ₹0.145 since 1 October 2026 (they were ₹0 until 30 September 2026). Volume commitments earn discounts — final rate is confirmed on your account; applicable GST extra. Rates for other countries differ (see the international rate table on /pricing).

From definition to your first message

InfiQ is an official Meta Business Partner. Start a 7-day free trial — no card needed — and see this running on your own number.

Start free trialBrowse all 550 terms