How to Add a WhatsApp Chat Button to Your Website (2026)

A WhatsApp chat button is just a link. When a visitor taps it, their device opens WhatsApp (the app on mobile, WhatsApp Web on desktop) with a chat to your number already open — and, if you want, a message already typed in the box. There is no special code or paid integration required to make the link itself work. The link format is the click-to-chat URL: https://wa.me/<number>, where the number is your full international number with country code and no plus sign, spaces, dashes or brackets. For an Indian number like +91 98765 43210 the link becomes https://wa.me/919876543210. You can optionally add a prefilled message so the chat opens with text ready to send. So "adding a WhatsApp chat button to your website" really means two things: (1) building the correct wa.me link, and (2) putting it on your site as a clickable button or a floating chat widget. Everything else in this guide is variations on those two steps. If you only want the bare link and nothing else, see our deeper walkthrough on how to create a WhatsApp click-to-chat link.

There are several ways to put the button on a page. They range from a five-minute hand-coded link to a fully featured floating widget. Pick based on the platform you use and how much control you want. The rest of this guide walks through each one with copy-and-paste code where it helps.

This is the universal method — it works on every website because it is just an HTML link styled to look like a button.

1. Build your link. Take your number, remove the plus sign and any spaces: 919876543210. Your base link is https://wa.me/919876543210.
2. Add a prefilled message (optional). Append ?text= followed by a URL-encoded message. "Hi, I have a question" becomes ?text=Hi%2C%20I%20have%20a%20question. Most link builders encode this for you automatically.
3. Wrap it in a button. Paste this where you want the button to appear:

<a href='https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question'
   target='_blank' rel='noopener'
   style='display:inline-block;background:#25D366;color:#fff;
   padding:12px 20px;border-radius:8px;text-decoration:none;
   font-weight:600;'>Chat on WhatsApp</a>

4. Use the brand colour. WhatsApp green is #25D366. Pair it with white text and the WhatsApp glyph so visitors recognise it instantly.
5. Test on mobile and desktop. On a phone it should open the app; on a laptop it should open WhatsApp Web. Always set target='_blank' so you do not navigate the visitor away from your page.

This inline button is perfect for a contact page, the footer, or next to a product price.

A floating widget is the little round green button that sticks to the bottom-right corner of every page and follows the visitor as they scroll. It typically converts better than an inline link because it is always visible.

1. Create a fixed-position container. Add this snippet just before the closing </body> tag of your site template so it loads on every page:

<a href='https://wa.me/919876543210?text=Hi%21%20I%20need%20help'
   target='_blank' rel='noopener'
   style='position:fixed;bottom:20px;right: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,0.15);'
   aria-label='Chat on WhatsApp'>
   <img src='/whatsapp-icon.svg' alt='WhatsApp' width='30' height='30'>
</a>

2. Position it sensibly. Bottom-right is the convention. Keep at least 20px of margin so it does not collide with cookie banners or back-to-top buttons.
3. Add an aria-label. Screen readers and accessibility audits expect a text label on an icon-only button.
4. Avoid overlap. If you already have a live-chat bubble, do not stack two floating buttons — pick one primary channel.

The result is a persistent, always-on chat entry point that costs nothing to run.

WordPress powers a large share of small-business sites, so it gets first-class treatment.

1. Plugin route (easiest). From your WordPress dashboard go to Plugins, Add New, and search for a "WhatsApp chat button" plugin. Install and activate one, then open its settings to enter your number, a prefilled message and the position (bottom-left or bottom-right). Save and it appears site-wide instantly.
2. Block / shortcode route. If you only want a button on one page, edit that page, add a Button block, and set the link to your wa.me URL. Style it green.
3. Theme-code route. For full control, paste the floating-widget snippet from Method 2 into your theme's footer.php (use a child theme so updates do not overwrite it) or a "custom HTML / footer scripts" box if your theme provides one.
4. WooCommerce tip. Put a "Ask about this product on WhatsApp" button on the product page with a prefilled message that includes the product name, so you instantly know what the customer is asking about.

For WooCommerce stores that also want order updates over WhatsApp, that is a separate (and powerful) step — explore PayPerWA's features for automated order and delivery messages.

Shopify gives you two clean paths depending on whether you like apps or code.

1. App route. Open the Shopify App Store from your admin, search for a WhatsApp chat button app, install it, and configure your number, greeting and position. Most add a floating widget across the whole storefront with no code.
2. Theme-code route. In your admin go to Online Store, Themes, then Edit code. Open theme.liquid and paste the floating-widget snippet from Method 2 just before </body>. It now shows on every page including product, cart and checkout-adjacent pages.
3. Product-page button. To add an inline button on the product template, edit the product section and insert the styled wa.me link near the Add to Cart area. A prefilled message such as "Hi, is the {{ product.title }} in stock?" works well.
4. Always preview. Use Shopify's theme preview before publishing so you can confirm the button looks right on mobile.

Wix is fully visual, so no code is required.

1. Add a button element. In the Wix Editor click Add, choose Button, and drop it where you want it.
2. Set the link. Click the button, open Link settings, choose "Web address" and paste your full wa.me link with any prefilled text.
3. Open in a new tab. Toggle the option to open the link in a new window so visitors keep your site open behind WhatsApp Web.
4. Want it floating? Wix also offers a built-in WhatsApp chat widget under Add, Contact — enable it, enter your number, and it pins to the corner automatically.
5. Style to match. Recolour the button to WhatsApp green and add the icon so it is recognisable.

The prefilled message (the ?text= part of the link) is the most underused conversion lever. A blank chat makes the visitor do the work; a prefilled one removes friction and gives you context.

1. Keep it short and natural. "Hi PayPerWA, I'd like a demo" beats a long paragraph.
2. Add page context. On a pricing page: "Hi, I have a question about pricing." On a product page, include the product name.
3. Encode special characters. Spaces become %20, commas become %2C, line breaks become %0A. Any link generator does this for you.
4. Never put sensitive data (passwords, full card numbers) in a prefilled message — the text is visible in the URL.

A well-chosen prefilled message also pre-qualifies the lead before they even hit send, which speeds up your reply.

Placement decides how many people actually use the button.

1. Floating bottom-right widget for site-wide reach — the single highest-impact spot.
2. Contact and "Get a quote" pages, where intent is highest.
3. Product and pricing pages, so questions get answered before the visitor leaves.
4. Header or sticky navigation on mobile, where a tap is more natural than typing an email.
5. Cart and checkout-adjacent areas to rescue hesitating buyers.

Do not bury it in the footer alone. The button should be reachable within one thumb-tap from anywhere on the page.

A button you cannot measure is a guess. Add lightweight tracking so you can prove ROI.

1. UTM-style or event tracking. If you use an analytics tool, fire a click event when the button is tapped. Name it clearly, e.g. "whatsapp_button_click".
2. Distinct prefilled messages per page. Use a slightly different ?text= on each page (e.g. mention the page) so when chats arrive you can see which page drove them.
3. Multiple numbers or links for big campaigns let you attribute volume by source.
4. Watch reply time, not just clicks. The button only converts if someone answers quickly. This is where a platform that routes, schedules and automates replies earns its keep.

For high-volume sites that turn these chats into campaigns and follow-ups, pair the button with a proper platform. See WhatsApp lead generation strategies for turning button clicks into a repeatable pipeline.

The wa.me button itself is free forever — it is just a link, and Meta does not charge you for inbound chats a customer starts. That is great for one-to-one support. The moment you want to send at scale — broadcasts, order confirmations, payment reminders, drip sequences — you need the WhatsApp Business API and a platform on top of it. That is where PayPerWA comes in, with no subscription: you pay just ₹0.20 per message ($0.004 on USD wallets) plus Meta's standard per-message charge. In India that means Marketing at ₹0.86 and Utility at ₹0.115 from Meta, shown separately and transparently. International rates vary — see our per-country rates. So the smart play in 2026 is: add the free chat button today to capture inbound interest, then layer a platform on top to follow up and broadcast. Create a free PayPerWA account, or read the developer docs if you want to wire it into your own app. Full pricing lives on the pricing page.