How to add a WhatsApp button to your website (link, floating button and QR)

The short answer

To add a WhatsApp button to your website you need one thing: a click-to-chat link. WhatsApp's own format is https://wa.me/<number>, where the number is in full international format without zeros, brackets or dashes. Put that link behind a button, an icon or a floating bubble, and a visitor who taps it lands in a chat with you, with your message already typed. No plugin, app or API is required, and the customer does not need to save your number first.

This guide covers the link, ready-to-paste code, the WordPress, Shopify and Wix options, tracking, a QR code for print, and when a WhatsApp chatbot behind the button is worth it. It is for any business that takes enquiries on WhatsApp, whether you use the free Business app or the API.

Step 1: build the wa.me link

WhatsApp's Help Center gives these formats:

Rules that cause most broken buttons:

• Number: country code then number, digits only. For an Indian mobile 98290 12345 that is 919829012345. Do not write +91, 0091, 09829012345 or spaces. WhatsApp's own example of what not to use is a number with a plus, leading zeros, brackets and dashes.
• Message: must be URL-encoded. A space becomes %20, a comma %2C, a line break %0A. Hindi and emoji are encoded the same way and arrive intact.
• The number must be on WhatsApp. Click to chat opens a chat only with a number that has an active WhatsApp account.

The quickest way is our free WhatsApp link generator: pick India, type the number in any format, write the message, and copy the link or a ready HTML snippet. It checks the number length, so typos are caught before customers find them.

Step 2: put the link behind a button

A simple inline button

Paste this where the button should appear, for example on the contact page or under each product's price. Replace the number and message with yours:

<a href="https://wa.me/919829012345?text=Hi%20Sunrise%20Clinic%2C%20I%20want%20to%20book%20an%20appointment"
   target="_blank" rel="noopener" aria-label="Chat with us on WhatsApp"
   style="display:inline-block;background:#25D366;color:#fff;padding:12px 20px;border-radius:8px;font-weight:600;text-decoration:none">
  Chat on WhatsApp
</a>

A floating button on every page

A floating button stays in the bottom corner while the visitor scrolls. Add this once, just before the closing </body> tag of your site template or in your builder's site-wide footer code:

<a class="wa-float" href="https://wa.me/919829012345?text=Hi%2C%20I%20have%20a%20question%20(website)"
   target="_blank" rel="noopener" aria-label="Chat with us on WhatsApp">WhatsApp us</a>
<style>
  .wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 999;
    background: #25D366; color: #fff; padding: 12px 18px; border-radius: 999px;
    font: 600 15px/1 sans-serif; text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.25); }
</style>

Check it on a phone: a floating button must not cover your own Add to cart or Call button, cookie banner or chat widget. Move it to the left or raise bottom if it does.

WhatsApp's official Chat on WhatsApp button

If you prefer WhatsApp's own design, the click-to-chat article links to the official Chat on WhatsApp button files. They come in green and white and in small, medium and large sizes, and are currently available only in English. WhatsApp's guidance is to use the button as it is, use the latest version and keep it visible and readable. You embed the image inside the same kind of link:

<a aria-label="Chat on WhatsApp" href="https://wa.me/919829012345">
  <img alt="Chat on WhatsApp" src="/images/WhatsAppButtonGreenLarge.svg">
</a>

Step 3: the WordPress, Shopify and Wix options

Wix's help article uses the api.whatsapp.com/send?phone= form of the link; it opens the same chat as a wa.me link, so either works there. For WordPress sites that want a pre-chat form before WhatsApp opens (name, service, preferred time), see the WhatsApp chat widget for WordPress.

A worked example

Meera's Bakehouse in Pune sells cakes from a three-page Wix site. She adds a different button on each page so every chat tells her where the customer was:

The Custom cakes message works as a mini form: customers fill in the brackets before sending, and Meera can quote in one reply instead of three questions.

Step 4: test it and track clicks

Test on two devices before you publish. On a phone, the link opens the WhatsApp app. On a computer, it opens WhatsApp Web or the desktop app, where the visitor needs a linked phone. If you see an error screen, the number is almost always wrong: check for a stray +, 0 or space.

wa.me itself gives you no click statistics. Three ways to measure anyway:

1. Analytics click events. In Google Analytics 4, enhanced measurement records an outbound click event, with the link_url, each time a visitor clicks a link that leads away from your domain, and that covers a wa.me link. Filter the event by a link_url containing wa.me to count WhatsApp button clicks per page.
2. Per-page messages. As in Meera's example, a different pre-filled message per page or campaign shows the source in the chat itself.
3. UTM tags on the pages, not on the wa.me link. Tag the links that bring visitors to your page (ads, Instagram bio, email) with UTM parameters, so analytics can tie a WhatsApp click back to the campaign. WhatsApp does not report anything on the wa.me URL, so UTM tags added to it tell you nothing.

Step 5: a QR code for print

The same link works offline as a QR code on counters, menus, packaging, hoardings and visiting cards. Paste your wa.me link into the WhatsApp QR code generator, download SVG for the printer, and scan the printed proof with two different phones before you print in bulk. Keep the pre-filled message short: a long message makes a denser code that needs a bigger print.

When a chatbot behind the button helps

The button only starts the chat. What happens next depends on the number behind it:

• Business app number. Fine while one person answers. The greeting message and quick replies cover common questions; see setting up the WhatsApp Business app.
• API number. Worth it when several people answer, chats arrive outside office hours, or the same questions repeat all day. A chatbot can answer prices and timings, collect the order details and hand over to a person in a shared inbox, and the button on your site stays exactly the same.

When the customer sends the first message, a 24-hour customer service window opens in which you can reply freely. On the API those replies are service messages: since 1 Oct 2026 each business phone number gets 1,000 free per month and Meta charges for service messages after that, so check WhatsApp API pricing before you expect heavy volume. In India, coexistence lets you keep using the Business app on the same number while a platform adds the chatbot and inbox. For no-code bot ideas, read how to build a WhatsApp chatbot without code and our WhatsApp marketing strategy guide.

Web agencies can add this to every site they build. With a white-label WhatsApp platform the chatbot and inbox behind the button run under the agency's own brand.