How to Add a WhatsApp Button to Your Website (Free, 2026)

The wa.me link format

WhatsApp calls this Click to Chat. The link opens a chat with your number on the visitor’s phone, or in WhatsApp Web or desktop on a computer, even if they haven’t saved your number.

Put together:

https://wa.me/919876543210?text=Hi%2C%20I%20saw%20the%20blue%20kurta%20on%20your%20website

The visitor still has to press send; nothing reaches you until they do. That matters later: when they send it, they started the conversation, so you can reply freely for 24 hours.

Write a pre-filled message that tells you where they came from

The pre-filled text is the most useful part, and most sites waste it on “Hi”. Use it to tell you which page the visitor was on, so you can answer without asking.

• Product page: “Hi, I have a question about the Cotton Kurta, size M.”
• Pricing page: “Hi, I’d like a quote for the Gold package.”
• Contact page: “Hi, I’d like to book a visit to your Kochi showroom.”
• Checkout help: “Hi, I need help placing my order.”

Keep it short and in the visitor’s voice. They can edit it before sending, and many won’t, so you get a clean, sorted first message.

Option 1: a floating WhatsApp button (any website)

This is the round green icon in the corner of the screen. Copy the snippet below into your site’s footer or a custom HTML area, and change the number and text. It’s plain HTML and CSS: no script, nothing that slows the page.

<a href="https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question"
   class="wa-float" target="_blank" rel="noopener"
   aria-label="Chat with us on WhatsApp">
  <svg viewBox="0 0 32 32" width="30" height="30" aria-hidden="true">
    <path fill="#fff" d="M16 3a13 13 0 0 0-11.2 19.6L3 29l6.6-1.7A13 13 0 1 0 16 3zm0 23.6c-2 0-3.9-.5-5.6-1.5l-.4-.2-3.9 1 1-3.8-.3-.4A10.6 10.6 0 1 1 16 26.6zm5.8-7.9c-.3-.2-1.9-.9-2.2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7 0a8.7 8.7 0 0 1-4.3-3.7c-.3-.6.3-.5.9-1.7.1-.2 0-.4 0-.5l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6a1.2 1.2 0 0 0-.9.4 3.6 3.6 0 0 0-1.1 2.7 6.3 6.3 0 0 0 1.3 3.3 14.4 14.4 0 0 0 5.5 4.9c2 .9 2.8.9 3.9.8a3.3 3.3 0 0 0 2.1-1.5 2.7 2.7 0 0 0 .2-1.5c-.1-.2-.3-.3-.6-.4z"/>
  </svg>
</a>
<style>
  .wa-float{position:fixed;right:20px;bottom:20px;z-index:9999;
    width:56px;height:56px;border-radius:50%;background:#25D366;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .wa-float:focus-visible{outline:3px solid #075E54;outline-offset:3px}
  @media (max-width:600px){.wa-float{right:14px;bottom:14px}}
</style>

• Keep it out of the way on mobile. Check it doesn’t cover your “Add to cart” bar or a cookie banner; move it with bottom and right.
• Keep the label. The aria-label tells screen readers what the icon does.
• Different pages, different text. If your platform lets you, set a different ?text= per page or product.

Option 2: WordPress, Shopify or Wix

WordPress

For a button inside a page, add a Buttons block and paste the wa.me link as its URL. For a floating button on every page, paste the snippet above into your theme’s footer setting or a header-and-footer code plugin. Plenty of WhatsApp chat plugins exist too; they produce the same wa.me link, so pick one that doesn’t load heavy scripts.

Shopify

Go to Online Store → Themes → … → Edit code, open theme.liquid, and paste the snippet just before </body>. Duplicate the theme first so you can roll back. For a button on product pages only, use a Custom Liquid block in the theme editor and put the product title in the pre-filled text.

Wix

Add an Embed HTML element and paste the snippet, or link a normal Wix button to the wa.me URL. For a site-wide floating button, Wix has a custom code setting in the site dashboard; check that your Wix plan includes it.

Option 3: a QR code for print, packaging and the shop counter

A QR code is the same link, for people who are looking at paper instead of a screen: visiting cards, menus, bills, product boxes, the counter.

• Quick version: turn your wa.me link into a QR code with the free generator.
• API version: on the WhatsApp Business Platform, Meta can generate a QR code and a short link (wa.me/message/…) for your number. According to Meta's QR codes and message links documentation, the short link hides your phone number, the pre-filled message can be up to 140 characters and can be edited or deleted later without reprinting the code, codes don’t expire on their own, and one number can have up to 2,000 of them.
• Print it plain. Meta recommends SVG for print and advises against recolouring the code itself, to keep it readable.

Tracking: what UTM tags can and can’t do

You can’t put a UTM tag on WhatsApp itself: once the visitor taps, they leave your site for the WhatsApp app, and your analytics doesn’t see the conversation. Meta adds that it keeps no analytics for its QR codes and short links, to protect user privacy. What works:

1. Track the click on your site. In Google Analytics or Tag Manager, count clicks on links that start with https://wa.me/ as an event. Your ad and email UTMs still tell you which campaign brought the visitor to the page they clicked from.
2. Track the message. Give each page, ad or QR code its own pre-filled text (“Hi, I’m interested in the Diwali hamper”) and count the messages that start with it.
3. One QR code per place. A different code for the shop counter, the delivery box and the newspaper ad, each with its own text, tells you which one works.

What NOT to do

• Don’t use a personal number. The button will be on every page for years. Use a business number your team can keep when people leave.
• Don’t write the number as +91 98765 43210 in the link. Spaces and the plus sign break it. In the visible text you can format it however you like.
• Don’t treat a chat as permission for offers. A visitor who writes to you can get answers. Sending them promotions later is a separate thing that needs their opt-in; see WhatsApp opt-in explained.
• Don’t add the button and then reply tomorrow. On the API, if more than 24 hours pass after the visitor’s message, you can only reach them with an approved template (error 131047). Answer fast, or set an auto-reply.

Route those chats into a shared inbox

Here’s the part most guides skip. A button that sends every chat to one phone works until the second salesperson joins, or the owner is busy. On the official WhatsApp Business API, chats can land in a shared inbox instead, where the whole team answers from one number. Not sure which you need? Read WhatsApp Business app vs API.

The same wa.me link and the same QR code keep working when you move the number to the API. Nothing on your website changes.

How WaBot handles this

• QR codes and short links from Meta. Under Commerce → QR code, pick your number, write a Pre-filled message, and WaBot generates Meta’s short link and QR code. Download it as PNG or SVG, add your logo, copy the link, or edit the message later.
• An automation per QR code. Each code has a Set up automation action that opens the workflow builder, so the chat from that code can get its own welcome message or menu.
• Sort chats by page. A workflow can check whether the first message starts with or contains your pre-filled text, then add a tag and assign the chat to the right person: a specific teammate, Round-robin, or Least busy. See WhatsApp auto-reply for business.
• Ads too. Chats from Click-to-WhatsApp ads arrive in the same inbox.

Plans: Free (sign up and connect your number), Starter at ₹840/month + GST for the shared inbox and campaigns, and the Base Plan at ₹9,240/year + GST, which adds workflows. Connecting a number starts a 15-day Base Plan trial. Replies to customers who message you first are free for the first 1,000 a month per number under Meta’s pricing, then ₹0.115 each plus GST, billed by Meta directly.

Frequently asked questions

How do I add a WhatsApp button to my website for free?

Create a link in the form https://wa.me/919876543210 (country code and number, no plus or spaces), optionally add ?text= with a URL-encoded message, and put it behind a button or a floating icon. No plugin or paid tool is required.

What is the wa.me link format for India?

https://wa.me/91 followed by the 10-digit mobile number, for example https://wa.me/919876543210. Don’t add a plus sign, a space or a leading zero.

Can I add a pre-filled message to a WhatsApp link?

Yes. Add ?text= and the message with spaces written as %20, for example https://wa.me/919876543210?text=Hi%20I%20need%20a%20quote. The visitor can edit it before sending.

Does the WhatsApp button work with the WhatsApp Business API?

Yes. The wa.me link opens a chat with your number whether it runs on the WhatsApp Business app or the API. On the API, the chat can go to a shared inbox, and you have 24 hours from the customer’s message to reply freely.

Can I track clicks on a WhatsApp button?

You can track the click on your website as an analytics event, and track which page or QR code a chat came from by giving each one its own pre-filled text. Meta doesn’t provide analytics for its WhatsApp QR codes and short links.