Let's talk about your projectFree discovery callWhatsApp
Web Development8 min read404 AjansSeptember 24, 2026Updated: September 24, 2026

How Do You Add a WhatsApp Button to Your Website and Track the Clicks?

How Do You Add a WhatsApp Button to Your Website and Track the Clicks?

To add a WhatsApp button, you create a link to https://wa.me/ followed by your number in international format without a + or leading zero, and optionally add a URL-encoded prefilled message with the ?text= parameter. To measure clicks, you attach a Google Ads conversion tag or GA4 event to the button in a way that never blocks the link from opening.

How do you build a wa.me link?

A wa.me link is WhatsApp's official short-link format, built from https://wa.me/ followed by the phone number in international format. For Turkey the number starts with 90; no plus sign, leading zero, spaces, dashes or brackets. So the local number 0532 000 00 00 becomes 905320000000 in the link.

  • —Number only: https://wa.me/905320000000
  • —With a prefilled message: https://wa.me/905320000000?text=Merhaba%2C%20web%20sitesi%20i%C3%A7in%20teklif%20almak%20istiyorum
  • —The message must be URL-encoded: a space becomes %20, a comma %2C, the Turkish ç %C3%A7. In JavaScript, encodeURIComponent() does this for you.
  • —Use a different prefilled message per page (e.g. 'I'd like to ask about an e-commerce site') so the first line of the chat tells you which page the lead came from.
  • —Open the link with target="_blank" and rel="noopener"; desktop opens WhatsApp Web or the app, mobile opens the app directly.

Where should the WhatsApp button go on the page?

A WhatsApp button belongs as close to the visitor's moment of decision as possible: a visible button in the header or hero, a call to action at the end of service and product pages, and an option next to the phone number on the contact page. A button hidden in one spot and a button repeated in every section both hurt conversion.

  • —Let the label state the action, such as 'Message us on WhatsApp' or 'Get a quote on WhatsApp', not just an icon.
  • —State your hours: a line like 'We reply weekdays 09:00-18:00' manages expectations.
  • —Don't make WhatsApp the only channel; keep phone and a form too, as some corporate buyers prefer email.

What goes wrong with floating buttons on mobile?

A floating WhatsApp button pinned to a corner of the mobile screen is handy, but done badly it covers content, the cookie banner, a sticky add-to-cart bar or a live-chat bubble. If the button hides the last lines of text or a form's submit button on small screens, it damages the user experience.

  • —Hide the button, or move it above the banner, while the cookie banner is open.
  • —On iPhones, add extra spacing with env(safe-area-inset-bottom) for the home indicator area.
  • —Add bottom padding to the page equal to the area the button could cover.
  • —Make the tap target at least 44-48 pixels, without taking up a quarter of the screen.
  • —Avoid bouncing or shaking animations on load; they distract and can cause layout shift.

How do you track WhatsApp clicks as conversions?

WhatsApp clicks are tracked by attaching a Google Ads conversion tag or a GA4 event to the button's click. The critical point is that the tracking code must not block the link: no preventDefault, no delayed redirect, and the link opens in a new tab. The tag then sends its data in the background while the user never waits.

  • —Google Ads: create a website conversion under Goals > Conversions and copy its send_to value.
  • —Add an onclick call to the button: gtag('event', 'conversion', { send_to: 'AW-XXXXXXX/LABEL' }).
  • —GA4: on the same click send a custom event such as gtag('event', 'whatsapp_click', { page_location: location.href }) and mark it as a key event under Admin > Events.
  • —With Google Tag Manager, use a 'Just Links' click trigger limited to links whose Click URL contains wa.me.
  • —The gtag_report_conversion helper in Google's sample code is meant for links that navigate in the same tab; a WhatsApp link opening in a new tab does not need it.
  • —Confirm the event arrives with DebugView and the tag diagnostics screen in Google Ads.

Remember that a click is not a conversation. A click measures intent; tracking how many turn into messages and quotes with labels in WhatsApp Business keeps the report honest.

What about privacy and KVKK for WhatsApp buttons and tracking?

A WhatsApp button and its click tracking are two separate privacy questions under KVKK. A plain wa.me link sets no cookies on your site, but once a chat starts the data is processed on Meta's infrastructure, so the channel belongs in your privacy notice. A Google Ads or GA4 tag attached to the button counts as a marketing or analytics cookie and must wait for consent.

What are the most common WhatsApp button mistakes?

The most common WhatsApp button mistakes are writing the number in the wrong format, adding the prefilled message without URL-encoding it, letting tracking code delay the link, and leaving people who click unanswered for hours. The technical errors take minutes to fix; response time is what really decides how much the button is worth.

  • —Writing the number with a leading 0 or +90: the link opens but may say the number is not on WhatsApp.
  • —Adding a message with Turkish characters without encoding it: on some devices the text appears garbled or cut off.
  • —Using preventDefault and making navigation wait for the tag: if the tag is slow, the user waits or never gets redirected.
  • —Tracking the same click twice with both gtag and Tag Manager: conversion counts get inflated.
  • —Using a personal number: when that employee leaves, the whole channel and chat history go with them.
  • —Sending no automatic reply outside business hours: the visitor messages a competitor instead.

How should you set up your WhatsApp Business profile?

A WhatsApp Business profile is the first screen a visitor sees after clicking the button, so it should be complete and consistent with the website. Fill in the business name, logo, category, address, opening hours and website link, and use greeting and away messages plus quick replies to cover the first few minutes.

  • —Match the profile name and logo to the brand on the site, so visitors know they reached the right place.
  • —State in the greeting message how quickly you will reply.
  • —Use an away message for requests that arrive at the weekend.
  • —Answer frequent questions on price, process and address consistently with quick replies.
  • —Track the journey from click to sale with labels such as 'new lead', 'quote sent' and 'customer'.
  • —The catalogue feature shows products or service packages inside the chat; keep prices consistent with the website.

Frequently Asked Questions

Can I use an api.whatsapp.com link instead of wa.me?+

Yes, https://api.whatsapp.com/send?phone=905320000000&text=... also works and leads to the same place. wa.me is simply shorter, more readable and the format WhatsApp's own documentation recommends. Whichever you use, make sure your tracking trigger covers that domain.

Should I use a ready-made WhatsApp plugin or custom code?+

Many ready-made plugins load extra JavaScript, fonts and sometimes third-party cookies, which affects both page speed and privacy compliance. A plain link plus a few lines of CSS is usually lighter, faster and easier to control for tracking.

Why does Google Ads sometimes under-report WhatsApp clicks?+

Visitors who decline cookies, ad blockers and a tag that hasn't loaded by the time of the click all reduce the count. On sites using Consent Mode, Google Ads models part of that gap. Comparing against the actual chat count in WhatsApp Business is the easiest sanity check.

Should the button show on desktop as well?+

Yes, but on desktop the click opens WhatsApp Web or the desktop app, and some users may not be logged in. Showing the phone number and a form next to the button on desktop means you are not relying on WhatsApp alone.

E

Efe TacirlioğluFounder & Lead Developer & UI/UX Designer

Founder of 404 Ajans, based in Istanbul. Builds and designs the agency's web design, e-commerce and custom software projects end to end, drawing on a background in the gaming industry.

Ready to elevate your digital presence?

Let's talk about your project and see what we can build together.

Get in Touch