WhatsApp Button Generator
Create a Chat on WhatsApp HTML button for your website.
<a href="https://wa.me/919876543210?text=Hi!%20I'm%20interested%20in%20your%20product." target="_blank" rel="noopener noreferrer" style="background-color:#25D366;color:#ffffff;border:none;padding:12px 24px;font-size:15px;display:inline-flex;align-items:center;border-radius:8px;font-family:sans-serif;font-weight:600;text-decoration:none;cursor:pointer;"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="vertical-align:middle;margin-right:6px;"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>Chat on WhatsApp </a>
How the WhatsApp Button Generator works
The WhatsApp button generator creates a click-to-chat button for your website that opens a WhatsApp conversation with your number pre-loaded and an optional pre-filled message. Enter your phone number (in international format), customise the button style and pre-filled text, then copy the HTML snippet to paste into any webpage — no coding knowledge required.
The wa.me link format
WhatsApp's official click-to-chat URL format is https://wa.me/[country-code][number]?text=[URL-encoded-message]. For an Indian mobile number 98765 43210, the link is https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20query. The country code for India is 91. The generator handles the URL encoding of special characters automatically and validates the number format to prevent broken links caused by including spaces or dashes in the number.
Pre-filled message best practices
A pre-filled message reduces friction by eliminating the "what do I type?" hesitation. Effective pre-filled messages include the source context: "Hi, I found you on your website and have a query about [product/service]." This helps businesses identify the lead source and respond relevantly. Keep the pre-filled message under 100 characters so it displays fully in WhatsApp's compose field without scrolling, reducing the chance a user edits or deletes it before sending.
WhatsApp Business vs personal numbers
WhatsApp Business accounts support away messages, quick replies, labels, and a business profile with address and hours — features that improve customer service quality. The wa.me link works identically for both personal and Business numbers. However, for websites expecting more than 10–20 enquiries per day, a WhatsApp Business API integration (via an approved BSP) handles concurrent conversations, CRM integration, and message templates more reliably than the consumer app.
Float button and inline button styles
The generator offers two button styles: a floating action button (fixed position, bottom-right corner, always visible as users scroll) and an inline button embedded within page content. The floating style achieves higher click rates by maintaining persistent visibility. The inline style suits contact pages, pricing pages, and calls-to-action within blog posts. Both styles use the official WhatsApp green (#25D366) and brand logo by default, which increases recognition and trust.
Frequently asked questions
- How does a WhatsApp chat button work?
- The button links to wa.me/{phone} (WhatsApp's click-to-chat URL). When clicked on a mobile device, it opens WhatsApp directly. On desktop, it opens WhatsApp Web. No WhatsApp Business account is needed — it works with any number.
- Can I add a pre-filled message?
- Yes. Add ?text=Your+message to the wa.me URL and WhatsApp will pre-fill the message in the chat input. This saves the user from typing and increases the chance they'll actually send a message.
- Do I need WhatsApp Business for this?
- No. The wa.me link works with any WhatsApp number — personal or Business. WhatsApp Business does offer additional features like automated replies and a business profile, but the click-to-chat link works with both.
- How do I add this button to WordPress?
- Copy the HTML code and paste it into a Custom HTML block in the Gutenberg editor, or use the Text/HTML tab in the Classic Editor. You can also add it to your theme's header.php or footer.php for site-wide display.