CTA GeneratorShould your website have a WhatsApp button?
Add one when visitors commonly need a short answer before they can book or buy, and someone can respond within the timeframe your site implies. Local services, appointments, property enquiries, restaurant questions, and product availability are sensible examples.
Skip it when the inbox is unattended, when the question requires a secure support channel, or when another chat widget already covers the same job. A prominent WhatsApp button creates an expectation of conversational support. The technical setup is easy; meeting that expectation is the real commitment.
What is the official WhatsApp click-to-chat format?
Use https://wa.me/ followed by the full phone number in international format. WhatsApp's official help page says to omit brackets, dashes, plus signs, and leading zeroes. The account must be active on WhatsApp.
For example, +49 151 12345678 becomes the following link:
https://wa.me/4915112345678How do you add a pre-filled message?
Add a text query parameter containing a URL-encoded message. WhatsApp places that text in the chat field; the visitor can review it before sending.
Keep the draft short and useful. “Hi, I have a question about your services” is better than a paragraph that pretends the visitor already agreed to something.
https://wa.me/4915112345678?text=Hi%2C%20I%20have%20a%20question%20about%20your%20servicesWhat should the button say?
Name both the channel and the likely action. “Chat on WhatsApp,” “Ask on WhatsApp,” and “Check Availability on WhatsApp” set clearer expectations than “Message Us.”
Do not promise an instant response unless it is staffed as an instant channel. If replies happen during business hours, say so near the button or on the destination page. Clear availability is more trustworthy than a permanently green status signal.
Where should the WhatsApp button appear?
Bottom-right is a reasonable starting point because visitors associate that area with chat. It is not a rule. Move the control if it collides with a cookie banner, accessibility tool, checkout bar, browser chrome, or another support widget.
On mobile, give the link a generous target. WCAG 2.2 Level AA uses 24 by 24 CSS pixels as the minimum with exceptions; I would aim for at least 44 by 44 for a primary floating action.
What does the complete button code look like?
This example uses a text label rather than relying on a brand icon alone. Replace the number and message, then paste it into the site's footer or custom-code area.
<a
class="whatsapp-floating"
href="https://wa.me/4915112345678?text=Hi%2C%20I%20have%20a%20question"
aria-label="Chat with us on WhatsApp"
>
Chat on WhatsApp
</a>
<style>
.whatsapp-floating {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1000;
display: inline-flex;
min-height: 48px;
align-items: center;
padding: 0 22px;
border-radius: 999px;
background: #25d366;
color: #111;
font: 700 16px/1.2 system-ui, sans-serif;
text-decoration: none;
box-shadow: 0 10px 28px rgb(0 0 0 / 20%);
transition: transform 160ms ease;
}
.whatsapp-floating:hover { transform: translateY(-2px); }
.whatsapp-floating:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.whatsapp-floating { transition: none; }
.whatsapp-floating:hover { transform: none; }
}
</style>Where do you install it on each platform?
Use the platform's supported custom-code route rather than editing a random template. Plan names and editor locations change, so confirm the current documentation for your account before publishing.
Typical installation route
| Platform | Practical route | Check before launch |
|---|---|---|
| WordPress | Child-theme footer hook or snippet manager | Theme updates and cache |
| Shopify | Theme custom code near body end | Theme duplication and checkout limitations |
| Webflow | Project footer code or page embed | Publish the site after editing |
| Squarespace | Code Injection where the plan supports it | Plan access and mobile overlap |
| Wix | Custom code loaded at body end | Page targeting and mobile layout |
| Custom HTML | Before the closing body tag | Template coverage |
Do you need WhatsApp Business?
No. WhatsApp's click-to-chat instructions require an active WhatsApp account, not specifically a Business account. A Business setup becomes useful when you need business identity and operational tools, but the basic wa.me link is not limited to it.
For larger Business Platform setups, Meta also documents managed short links and QR codes with editable pre-filled messages. That is a different workflow from a simple public wa.me link and makes sense only when the business already uses those platform tools.
How should you test and measure it?
Test on a phone and desktop. Confirm that the correct account opens, the draft text is readable, and the page has a fallback contact route for visitors who do not use WhatsApp. WhatsApp says click-to-chat works on phones and WhatsApp Web.
Track the website click as its own event, but do not call every click a lead. The visitor still has to send the message, receive a useful response, and complete the business action. Use a distinct pre-filled phrase for major page groups only if the support team finds that context helpful; do not turn the opening message into tracking clutter.
Ready to build your button?
Design it visually, export clean code, and paste it into your site.
Open the GeneratorFrequently Asked Questions
Do I need WhatsApp Business for a website button?
No. A standard active WhatsApp account can use a wa.me click-to-chat link. WhatsApp Business is useful for business identity and additional tools.
Does click to chat work on desktop?
Yes. WhatsApp's official help says click to chat works on phones and WhatsApp Web, although the visitor may need to sign in or connect their account.
Should the phone number include a plus sign?
No. Use the full international number in the wa.me URL without plus signs, spaces, brackets, dashes, or leading zeroes.
Sources and contextual notes
- WCAG 2.2 target size minimum: W3C guidance used for the 24 by 24 CSS pixel Level AA minimum and its exceptions.
- WCAG enhanced target size: W3C guidance used for the stricter 44 by 44 CSS pixel Level AAA target.
- WCAG contrast minimum: W3C guidance used for the 4.5:1 normal-text and 3:1 large-text contrast requirements.
- prefers-reduced-motion: MDN reference used for respecting a visitor's reduced-motion preference.
- WhatsApp click to chat: Official WhatsApp Help Center instructions used for phone-number formatting, pre-filled messages, and phone/Web behavior.
- WhatsApp links from other apps: Official WhatsApp Help Center reference used to confirm universal-link formatting and URL-encoded messages.
- WhatsApp QR codes and short links: Official Meta developer documentation used for Business Platform short-link and QR-code context.