How click-to-chat links work
WhatsApp click-to-chat is a plain URL scheme rather than an integration. A link of the form wa.me followed by a phone number opens a chat with that number, on the app if it is installed and in WhatsApp Web otherwise. Adding a text parameter prefills the message box, so the visitor lands in a conversation with an opening line already typed and only has to press send.
The number has to be in full international form with the country code and no leading zeros, plus signs, spaces, brackets, or dashes. This generator strips every non-digit character for you, so pasting a number in any local format still produces a working link, but it cannot supply a country code that was never there.
The api.whatsapp.com version is the older, longer form of the same thing and behaves identically. It is included because some content management systems, email templates, and link validators handle one better than the other, and having both saves a round trip when the short one gets mangled.
- wa.me plus the number opens a chat; a text parameter prefills the message
- Digits only, in full international form, with the country code included
- The api.whatsapp.com link is the same thing in the older longer format
What the HTML snippet contains
The generated button is a single anchor element with the WhatsApp icon inline as an SVG and all the styling written as inline style attributes: the familiar green background, white text, generous padding, a fully rounded pill shape, and a common system font stack. Because nothing depends on an external stylesheet, it works when pasted into a page builder, a newsletter template, or a content management system that strips your CSS.
The link opens in a new tab and carries the attributes that prevent the new page from getting a reference back to yours, which is the standard safe way to open an external link. The label text and the URL are both escaped before being written into the markup, so an apostrophe or an angle bracket in your label does not break the HTML.
The label is the only styling control. There is no color picker, no size selector, no shape option, and no floating widget mode that pins the button to a corner of the page. If you want a different look, paste the snippet into your own stylesheet world and restyle it there; the markup is simple enough to adapt in a minute.
Writing a prefilled message that works
The message is URL-encoded before it goes into the link, which means emoji, accented characters, punctuation, and line breaks all survive correctly. You do not need to escape anything yourself.
What makes a good prefilled message is context rather than greeting. Something that identifies where the visitor came from, such as naming the page or the product they were looking at, means the conversation starts with information instead of a blank hello. If you use several buttons across a site, vary the message per page and you get a free source of routing information in your inbox.
Keep it short. The visitor sees it in the message box and can edit it, and a long prefilled paragraph reads as presumptuous and often gets deleted before sending. One sentence naming the context is the sweet spot.
- Encoding is handled for you, including emoji and line breaks
- Name the page or product in the message so replies arrive with context
- Keep it to one sentence; visitors delete long prefilled text