How to Add WhatsApp Button to Website: 5 Methods

To add a WhatsApp button to your website, build a click-to-chat link in the format https://wa.me/yournumber, then attach it to a button or a floating icon in your site's HTML. It takes about five minutes, costs nothing, and opens a chat with you on mobile or desktop.

That's the short version. The long version matters because there are five practical ways to do it, and the right one depends on whether you run a simple brochure site, a WordPress blog, or an online store where every conversation could be a sale. The five methods covered below are: a plain click-to-chat link, floating button code, a WordPress plugin, a Shopify app or theme edit, and a Wix or Squarespace add-on. You'll get code you can paste, platform walkthroughs, tracking setup, and the mistakes that make buttons get ignored.

Why Add a WhatsApp Button to Your Website?

A WhatsApp button lets visitors message you in an app they already use daily, without forms, accounts, or waiting for email. For stores, it shortens the gap between a question ("Does this come in blue?") and a purchase.

The reach is the main reason. Meta has reported that WhatsApp has more than 2 billion users worldwide (see the Meta WhatsApp page), and in markets like Brazil, India, Mexico, and much of Europe and Africa, it's the default way people talk to businesses. If your customers live there, a contact form feels like a detour.

Here's what a button does for you in practice:

• Cuts friction. One tap opens a conversation. No typing an email address, no captcha.
• Captures hesitant buyers. Shoppers with a sizing, shipping, or stock question can ask instead of leaving.
• Works as customer support via WhatsApp. Order status and returns questions get answered in the same thread, with history.
• Costs very little. The WhatsApp Business app is free, and a link needs no software at all.

The trade-off is workload. Fast replies are the whole point. If you can't answer within a few hours, a button can hurt more than help, so decide who's covering the phone before you publish it.

Before You Start: Pick the Right WhatsApp Number

Use the free WhatsApp Business app with a dedicated number rather than your personal account. It keeps customer chats separate from family and friends, and adds business tools like labels, quick replies, and a catalog.

Your WhatsApp business number for your store can be a new SIM, a landline (WhatsApp Business can verify through a call), or a virtual number. Avoid your personal number. Once it's on a public website, it'll receive messages at all hours, and spam finds it quickly.

Set up the basics first

1. Download WhatsApp Business from the App Store or Google Play.
2. Register with your business number and verify it.
3. Fill in your business profile: name, hours, address, website, and description.
4. Set an away message for after-hours, and a greeting for new chats.
5. Create quick replies for the questions you get most, like shipping times and returns.

For higher volume, Meta offers the WhatsApp Business Platform (the paid, official route for multiple agents and automation). Most small shops don't need it on day one. The free app handles one or two people comfortably.

Method 1: How to Add WhatsApp Button to Website With a Click-to-Chat Link

The simplest method is a WhatsApp click to chat link. Write https://wa.me/ followed by your full phone number in international format, with no plus sign, spaces, or dashes. Link any button, image, or text to it.

A US number such as +1 415 555 0123 becomes:

https://wa.me/14155550123

Meta documents this format on WhatsApp's own help center, and it's the same link a wa.me link generator produces. You don't actually need a generator. It's just a number in a URL. But tools that generate the link are handy if you want to add a message and encode it correctly.

Add a pre-filled WhatsApp message

A pre-filled WhatsApp message saves the visitor typing and tells you what they were looking at. Add ?text= followed by your URL-encoded message:

https://wa.me/14155550123?text=Hi%2C%20I%20have%20a%20question%20about%20your%20store

Spaces become %20, commas become %2C. On a product page, include the product name so you know the context the moment the chat arrives, for example ?text=Hi!%20Is%20the%20Linen%20Tote%20still%20in%20stock%3F.

The HTML for a basic button

<a href="https://wa.me/14155550123?text=Hi%2C%20I%20have%20a%20question" target="_blank" rel="noopener noreferrer">Chat with us on WhatsApp</a>

Style it with your site's button class, and it works on any platform that lets you edit HTML or add a link. On mobile it opens the WhatsApp app. On desktop it opens WhatsApp Web or the desktop app.

Method 2: Add a Floating WhatsApp Button With Code

A floating WhatsApp button is a round green icon pinned to the bottom corner of every page. It stays visible as visitors scroll, which is why it usually gets more taps than a link buried in your footer.

Paste this before the closing body tag of your site, or into a custom code block. Replace the number with yours:

<a href="https://wa.me/14155550123?text=Hi%21%20I%20need%20help" class="wa-float" target="_blank" rel="noopener noreferrer" aria-label="Chat on WhatsApp">WhatsApp</a>

.wa-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #fff;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
}

The first line is HTML; the rest goes in your stylesheet (or inside a style tag if your platform only offers a custom code box). Keep it in the bottom right on desktop, and check it doesn't cover your cart button or cookie banner on mobile.

Method 3: WordPress Plugin or Widget (Step by Step)

If you'd rather not touch code, a WhatsApp chat widget does the same job with a settings panel. On WordPress, plugins such as Joinchat and Click to Chat are popular, and both offer free versions for basics.

1. In your dashboard, go to Plugins > Add New and search "Joinchat" or "Click to Chat".
2. Click Install Now, then Activate.
3. Open the plugin's settings and enter your number in international format (country code first, no plus sign).
4. Write a default pre-filled message and a short greeting bubble.
5. Choose the position (bottom right is standard) and which pages show it. Hide it on checkout if it crowds the payment button.
6. Save, then open your site on your phone to confirm it works.

Be careful with plugins. Each one adds scripts that can slow your pages, and some break after updates. If a plugin only draws a green button that opens a wa.me link, you're paying for something a few lines of code can do. We cover how stacked add-ons add up in our guide on WooCommerce maintenance costs.

Method 4: Add WhatsApp to Shopify

Shopify has two routes: an app from the Shopify App Store, or a manual edit to your theme. Many chat apps charge a monthly fee, so check current pricing on each listing before installing.

Option A: Install an app

1. In your Shopify admin, open Apps and search the App Store for "WhatsApp chat".
2. Compare reviews, price, and whether a free plan covers a single number.
3. Install it, enter your WhatsApp business number, and set a pre-filled message.
4. Enable the app embed in Online Store > Themes > Customize > App embeds.

Option B: Edit your theme (no app)

1. Go to Online Store > Themes, click the three dots beside your live theme, and choose Duplicate to make a backup.
2. On the live copy choose Edit code and open theme.liquid.
3. Paste the floating button HTML from Method 2 just above the closing body tag, and add the CSS to your theme's main stylesheet.
4. Save and test on mobile.

On product templates you can build a pre-filled message with the product title using Liquid: https://wa.me/14155550123?text=Is%20{{ product.title | url_encode }}%20in%20stock%3F.

Method 5: Add WhatsApp to Wix or Squarespace

Both builders handle this without code, though the exact menu names change as the platforms update.

• Wix: in the editor, open Add Apps (or the app market) and search for a WhatsApp button, or add a regular button and set its link to your wa.me URL. Wix also lets you add custom code under Settings > Custom Code for the floating version.
• Squarespace: add a button block and paste your wa.me link as the URL. For a floating button, use Settings > Advanced > Code Injection and paste the Method 2 code in the footer field.

Which method should you pick?

Method	Skill needed	Cost	Best for
1. Plain wa.me link	None	Free	Contact pages, email signatures
2. Floating button code	Basic HTML/CSS	Free	Any site that allows custom code
3. WordPress plugin	None	Free tier available; premium varies	WordPress blogs and WooCommerce
4. Shopify app or theme edit	None to basic	Free (code) or app subscription	Shopify merchants
5. Wix/Squarespace button or code injection	None	Free (link) or app pricing	Drag-and-drop site owners

Prices for apps and premium plugins change often, so treat the table as a guide and confirm on each listing. Teams with several agents may eventually need a provider built on the WhatsApp Business Platform, which carries per-conversation fees.

Add WhatsApp to an Ecommerce Website the Right Way

To add WhatsApp to an ecommerce website, put the button where doubt happens: product pages, cart, and shipping information. Pre-fill messages with the product name, and treat every chat as a sales conversation, not a support ticket.

Where a WhatsApp chat button for an online store works best

• Product pages: an "Ask about this item" link with the product name in the pre-filled text.
• Cart page: "Need help before you order?" catches people about to abandon.
• Shipping and returns pages: the places where questions pile up.
• Order confirmation page and emails: an easy path for order-status questions.
• Floating site-wide: a safety net on every other page.

Sell on WhatsApp from your website

Some merchants close sales directly in chat, sending a payment link after the customer confirms what they want. It suits custom orders, high-ticket items, and local delivery. You can sell on WhatsApp from your website by sending a link to a hosted checkout, which keeps payment secure and your order records in one place. Don't take card details in chat.

For standard products, keep the normal checkout as the main path and use WhatsApp as the help layer. Your analytics stay cleaner and you aren't copying orders by hand. If you're still building out the catalog, our guide on adding products to your online store covers the setup, and customer Q&A on product pages shows how to answer common questions publicly so fewer people need to message you.

WhatsApp live chat for online store: realistic expectations

WhatsApp isn't true live chat. Customers expect fast answers, but they don't expect a human to be online around the clock. Post your hours, use the away message, and say "we reply within 2 hours" only if you can keep that promise.

On Rovela, the store builder we make, a chat button is one of the 100+ features included in the subscription, so you ask for it in plain words and don't hunt for an app. If you're on another platform, the code above gives you the same result.

How to Track WhatsApp Button Clicks

Without tracking, you can't tell whether the button earns its place. There are two simple ways to measure it.

Option 1: UTM-style tagging in the message

WhatsApp doesn't pass referrer data, so put a source tag in the pre-filled text. Then you can see in the chat which page it came from:

https://wa.me/14155550123?text=Hi!%20I%20have%20a%20question%20(ref%3Aproduct-page)

Use a different tag per placement (cart, footer, floating) and count them weekly.

Option 2: Google Analytics 4 click event

If you use GA4 through gtag.js, add an onclick handler that sends an event:

<a href="https://wa.me/14155550123" target="_blank" rel="noopener noreferrer"
   onclick="gtag('event', 'whatsapp_click', {link_location: 'floating_button'});">
  Chat on WhatsApp
</a>

In GA4, mark whatsapp_click as a key event, and you can compare clicks against orders. If you use Google Tag Manager instead, create a Click trigger that fires when the link URL contains wa.me, and attach a GA4 event tag to it. Note that a click shows interest, not a completed chat, so pair it with your own count of actual conversations.

Best Practices, Mistakes, and Common Questions

The best WhatsApp buttons are visible, honest about response times, and tracked. Most failures come from the same few mistakes, and they're easy to avoid.

Mistakes to avoid

• Wrong number format. Leading zeros, plus signs, or dashes break the link. Use country code plus number only.
• Using a personal number. Spam and privacy headaches follow.
• Covering key buttons. A floating icon that blocks "Add to cart" on mobile costs sales.
• No follow-up plan. Unanswered chats look worse than no chat option.
• No tracking. Use the setup above so you know how many sales the button drives.
• Skipping privacy notes. If you serve EU customers, mention in your privacy policy that chats are handled through WhatsApp (owned by Meta). Check GDPR guidance on the GDPR.eu site.

Does a WhatsApp button work on desktop?

Yes. Visitors without the app installed land on WhatsApp Web, where they can scan a QR code and continue. Conversion is lower than on mobile, so many shops show the button prominently on phones and more quietly on desktop.

Is WhatsApp for small business free?

The WhatsApp Business app is free to download and use. Costs only appear with the WhatsApp Business Platform, where Meta charges per message based on category. Check Meta's pricing page on business.whatsapp.com for current rates in your country.

Can I add a button without a plugin?

Yes, and for most sites it's the better choice. A wa.me link plus a few lines of CSS is lighter and more reliable than a plugin. Page speed matters for conversion and search, so every script you skip helps. If you're comparing how much a stack of tools costs, see our breakdown on building an online store without coding.

How do I test it?

1. Click the button on your phone and on a desktop browser.
2. Confirm the pre-filled message appears correctly, including accents and emoji.
3. Send a message and check it lands in the right inbox.
4. Test at night to confirm your away message fires.
5. Look at the mobile layout on a small screen for overlaps.
6. Check that your GA4 event shows up in the real-time report.

Should I add other chat channels too?

Only if you can staff them. One well-answered channel beats three ignored ones. Pick WhatsApp if your customers already use it, and add email for anything that needs a paper trail.

Wrapping Up: Your WhatsApp Button Checklist

Adding a WhatsApp button to your website comes down to four moves: set up a business number, build a wa.me link with a pre-filled message, place it as a link or floating button where customers hesitate, and commit to answering quickly. Start with the free code method and only pay for a plugin or app if you need something it can't do.

If you'd rather skip the code and the app stack entirely, Rovela builds a complete store from a plain-language description, with chat, reviews, abandoned cart recovery, and 100+ other features built in. Check the pricing page to see what's included in the flat subscription.