How to add a WhatsApp button to your website
You do not need a plugin for a simple button. A WhatsApp link and some CSS are enough. Below are two copy-and-paste snippets, one inline and one floating, plus an honest way to measure clicks and conversations.
5 min readUpdated
On this page
An HTML link with CSS is usually enough when all you need is to open a chat. A widget may make sense if you need business hours, consent, routing, or CRM integration. Choose one only if you need those features, and measure its effect on your site.
First, generate your link
Create the link here with your number and a short message. Then replace TU-LINK in either example.
Option 1: inline button
This link works as a text button on its own. target="_blank" is optional: use it if you want the link to open in a new tab or window, and keep rel="noopener".
<a href="TU-LINK" target="_blank" rel="noopener">Message us on WhatsApp</a>
The visible text explains the purpose to everyone, including people using a screen reader. If you use only an icon, add aria-label="Message us on WhatsApp" and keep a visible focus indicator.
Option 2: floating button with HTML and CSS
Paste the HTML into the page body and the CSS into your style sheet or custom CSS block. This example sits at the bottom right, respects the iPhone safe area, and displays keyboard focus:
<a class="wa-float" href="TU-LINK" target="_blank" rel="noopener">WhatsApp</a> .wa-float { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 1000; padding: .8rem 1rem; border-radius: 999px; color: #fff; background: #087f5b; font-weight: 700; text-decoration: none; box-shadow: 0 4px 16px #0003; } .wa-float:focus-visible { outline: 3px solid #111; outline-offset: 3px; } @media (max-width: 480px) { .wa-float { right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); } }
Test it where real conflicts occur
Check the button on mobile and desktop with the cookie banner, cart, and keyboard open. Change right to left if it covers a primary action. A high z-index does not justify covering checkout, accessibility controls, or existing support tools.
Where to install it
| Environment | Implementation | Check |
|---|---|---|
| Custom HTML | Paste the link and CSS into your template. | Test focus, mobile layout, and destination. |
| WordPress | Use an HTML block and the theme's additional CSS. | Make sure the editor does not remove attributes. |
| Website builder | Use its native button with TU-LINK. | You do not need code if the builder lets you set the URL and position. |
| GTM | Reserve it for teams that already manage changes through tags. | Review permissions, CSP, and maintenance. |
What the button should say
- "Message us on WhatsApp" describes the destination better than "Contact."
- If you have business hours, place them next to the button to set expectations.
- Do not open a chat bubble automatically without testing it. It may compete with the main task or cover content.
- On a pricing page, test specific text such as "Ask about plans" against the generic version.
How to measure clicks, conversations, and sales
GA4 enhanced measurement can record a click event for an outbound wa.me link. A separate short link for each placement adds data on opens, countries, and devices and can also be used outside your website. In both cases, you are measuring the move to WhatsApp, not whether the message was sent.
- 1
Separate the placements
Use a different link or identifier for the floating button, product card, and footer.
- 2
Count the open
Count it with a GA4 outbound click or the short link. Choose one primary source to avoid duplication.
- 3
Record the conversation and sale
Use a different pre-filled message for each placement, then apply a label or update your CRM after the message is sent.
- 4
Test one variable at a time
Test placement, text, or timing. Define the test period and success criterion before looking at the results.
Limits of tracked links on Free
Free shows seven days of metrics and allows 100 clicks per month. After that, an ad-supported interstitial page appears. Destination editing is available on Basic and Premium.
Frequently asked questions
Do I need a plugin to add WhatsApp to my website?
Not for a simple button: a link and CSS are enough. A widget can help with business hours, consent, routing, or CRM integration. Measure its performance cost and usefulness on your site before deciding.
Does it work on a computer?
Yes. If the person has the WhatsApp desktop app, the link can open it. Otherwise, it uses WhatsApp Web. The pre-filled message remains in place.
Can I add multiple numbers?
A wa.me link opens one number. To distribute traffic among several numbers, create a general link with weighted destinations. The dedicated WhatsApp generator does not create that distribution directly.
Will a floating button slow down my website?
A link with CSS can be lightweight, but icons, fonts, and styles also add weight. A widget adds resources and scripts. Measure Lighthouse and Core Web Vitals before and after instead of assuming the effect.
How can I tell which website button generates more inquiries?
Use a separate identifier or link for each placement to count opens, then use a message, label, or CRM to confirm conversations and sales. A click alone does not prove that an inquiry occurred.
Make it yours and track every click
Create a free account so your links do not expire and you can measure country, device, and source.