How to add WhatsApp to your website: chat link, button, QR code, widget and chatbot

Karthik Subramanian runs a nine-person rooftop solar firm in Coimbatore. His website has a contact form that asks for name, phone, email, roof size and monthly bill. It gets about four submissions a week. His WhatsApp number, printed on the side of the service van, gets four enquiries a day.

So he wants to add WhatsApp to his website. There are five ways to do it, and they aren’t rivals. Each fits a different visitor.

Method	What the visitor does	What you need	Where the chat happens
Chat link	Taps a link or text	Any WhatsApp number	WhatsApp
Floating button	Taps a fixed icon	The same link, plus a little CSS	WhatsApp
QR code	Scans with a phone	A link turned into a QR image	WhatsApp
Web chat widget	Types in a box on your page	A chat tool with a widget	Your website
Chatbot	Gets an automatic answer	A number on the WhatsApp Business Platform, or a widget with an AI agent	Either

The WhatsApp chat link

WhatsApp calls this click to chat. The format, from its help centre, is https://wa.me/<number>, where the number is your full phone number in international format. Leave out the plus sign, any leading zeros, brackets and dashes. The visitor doesn’t need your number saved, and the link works on a phone and on WhatsApp Web.

To prefill the visitor’s first message, add ?text= and the sentence, URL-encoded. In practice that means replacing each space with %20 and encoding punctuation such as commas (%2C) and apostrophes (%27).

Copy this and change the number and the sentence. The number below is a placeholder from a block reserved for fiction.

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

For an Indian number, the part after wa.me/ is 91 followed by the ten digits, twelve digits in all.

Two habits make the link earn more. Write the prefilled text as the customer would say it, in the first person, and keep it short. And change it per page: the pricing page says “I’d like a quote for a 5 kW system”, the service page says “I need a panel cleaning visit”. The visitor can edit or delete the text before sending, so treat it as a strong hint about what they want, not a record.

A floating WhatsApp button

A button is the same link, pinned to the corner of the screen. You don’t need a plugin for it.

<a class="wa-button"
   href="https://wa.me/15550123?text=Hi%2C%20I%20have%20a%20question"
   target="_blank" rel="noopener"
   aria-label="Chat with us on WhatsApp">
  WhatsApp us
</a>

<style>
  .wa-button {
    position: fixed; right: 16px; bottom: 16px; z-index: 50;
    padding: 12px 16px; border-radius: 24px;
    background: #128c4a; color: #fff;
    font: 600 15px/1 system-ui, sans-serif; text-decoration: none;
  }
</style>

A few things that go wrong with these:

• The button sits on top of the cookie notice, the “add to cart” bar or another chat bubble. Check it on a small phone, not just your laptop.
• It’s an icon with no words. Plenty of visitors don’t know whether tapping it calls, chats or opens an app. “WhatsApp us” or “Chat on WhatsApp” removes the doubt.
• It promises a speed you can’t keep. If nobody answers after 7 pm, say so near the button. “We reply 9 am to 7 pm” loses fewer customers than silence does.

If you use WhatsApp’s logo, follow Meta’s brand guidelines for it. Plain text on a green button avoids the question.

A WhatsApp QR code for desktop visitors

Someone reading your site on an office computer may not have WhatsApp open there. A QR code lets them point their phone at the screen and carry on from the phone. The same code works on a visiting card, an invoice or the service van.

You can get one three ways:

• Any QR generator will turn your wa.me link, prefilled text included, into an image.
• In the WhatsApp Business app, your short link and QR code are under Tools, then Short link. You can reset the code later, which stops the old one working.
• On the WhatsApp Business Platform, Meta lets you create QR codes and short links for a number, each with its own prefilled message of up to 140 characters. One number can hold up to 2,000 of them. Because the message is stored with the short link, you can edit it later without reprinting the code. Meta recommends the SVG file for print.

A reasonable pattern is to show the QR code on wide screens and the button on phones. Both lead to the same conversation.

A web chat widget, answered from the same inbox

Some visitors won’t open WhatsApp from your site. They’re on a work laptop, they don’t want to hand a stranger their phone number yet, or they have one quick question and don’t want it sitting in their personal chats. A web chat widget is a small chat box on the page itself.

The trade-off is real. A WhatsApp chat stays in the customer’s phone, and they can come back to it next week. A web chat ends when the tab closes, unless you asked for a way to reach them. So in a web chat, answer the question first, then ask whether they’d like the quote on WhatsApp.

What matters operationally is that both land in one place. If the widget has its own login that one person checks on Mondays, it’s worse than no widget.

A WhatsApp chatbot on your website

People searching for a WhatsApp chatbot for a website usually mean one of two things.

The first is a chatbot that lives in WhatsApp and is reached from the site. The link, button and QR code above all work for this. The visitor taps, WhatsApp opens, and the bot answers there. A bot you design yourself needs your number to be on the WhatsApp Business Platform. The free Business app has greeting and away messages, and since May 2026 Meta’s own Business AI for small businesses in India; our comparison of Business AI and an AI agent says when that one is enough.

The second is a bot that answers inside the widget on the page. No WhatsApp number is involved in that conversation at all.

In both cases the choice is between button menus you design yourself and an AI agent that answers from your own content. Menus suit a short list of predictable questions. An AI agent suits “does a 3 kW system run one AC and a fridge”, where the answer is somewhere in your pages. Either way, give the visitor a clear route to a person. Our guide to a WhatsApp chatbot for business compares the two and what they cost.

What it costs

The link, the button and the QR code are free to make. The conversations that follow are not always free.

On the free WhatsApp Business app, you don’t pay Meta for chats. On the Platform, a visitor’s message opens a 24-hour customer service window, and your replies inside it are service messages. Since 1 October 2026, each business number gets 1,000 of those a month without charge, and after that each one costs ₹0.115 to an Indian number, before GST. A firm like Karthik’s, with around 120 enquiries a month and five or six replies each, stays inside the 1,000. A busy store won’t. Our pricing explainer has the full rate table.

Web chat messages aren’t WhatsApp messages, so Meta’s charges don’t apply to them. Your chat tool’s subscription does.

A chat is not an opt-in for offers

When a visitor taps your button and asks a question, you can answer. That doesn’t give you permission to send them a Diwali offer in three weeks. Meta requires an opt-in that says the person agrees to receive messages from your business, by name.

Ask once, in the chat, after you’ve answered: “Can Suryan Solar send you subsidy updates and offers on WhatsApp? About one a month, reply STOP anytime.” If your website also has a form with a phone field, put an unticked box next to it with the same wording. The full set of wordings, and what to record, is in our WhatsApp opt-in guide.

Tracking where chats come from

This is the weak point of WhatsApp on a website. Your UTM tags and analytics session stop at the tap. WhatsApp doesn’t tell you which page the visitor was on, and Meta’s documentation says analytics aren’t available for its QR codes and short links, to limit the data it logs.

What you can do:

• Use different prefilled text for each page or placement. “Hi, I saw your van in RS Puram” on the van QR code and “I’d like a quote for a 5 kW system” on the pricing page sort themselves in the inbox. Tag chats by that first line.
• Record the tap as an event in your website analytics. That gives you taps per page, which you can set against chats received.
• Use separate short links or QR codes for print, so the van, the brochure and the invoice each have their own opening message.
• For paid traffic, click-to-WhatsApp ads are different: the chat arrives with the ad attached. Our click-to-WhatsApp ads guide covers those.

None of this is exact. A visitor can delete the prefilled line and write “hi”. Most don’t bother, and the ones who leave it in are enough to show which pages bring enquiries.

Which ones to add first

Start with the link and a labelled button on every page, with page-specific prefilled text. That’s an hour’s work. Add the QR code to desktop layouts and anything you print.

Add a widget when your analytics show a lot of desktop visitors who leave without tapping, or when your customers are businesses whose staff sit at computers. Add a chatbot when the same ten questions are eating your team’s mornings, and not before you’ve written down the answers.

Unfamiliar terms such as customer service window and service message are defined in the WhatsApp Business glossary.

Karthik kept his form, cut it to two fields, and put the button above it. Check the same thing on your own site this week: count the form submissions and the WhatsApp chats for seven days, and move the one that wins to the top of the page.