How do I turn a wa.me link into a WhatsApp button on my own website?

The ready-made code

We made a link in the WhatsApp link generator with an example number and a short message a customer might send about an order, then put it in a link tag:

<a href="https://wa.me/966501234567?text=Hi%2C%20I%20have%20a%20question%20about%20my%20order" target="_blank" rel="noopener">WhatsApp us</a>

Copy the link from the tool with 'Copy link' and paste it between the quotes after href exactly as it is. Do not edit or decode the codes in it; they are what carry your message intact. Replace the text between the tags with whatever words you want on the button.

What each attribute does

• href: the link itself. This is the only part that comes from the tool.
• target=_blank: opens the link in a new tab or window, so the visitor does not leave your site. The tool's own 'Open link' button behaves the same way.
• rel=noopener: stops the new page from controlling yours, a standard habit for any link that opens a new tab.

Why wa.me and not the alternative form

The tool also gives you the api.whatsapp.com form, which has an & between the number and the message. Inside HTML, the strictly correct way to write & in an attribute is &. Browsers usually forgive a bare &, but some editors and code checkers object to it or rewrite it. A wa.me link with a message has no & at all, so the whole question goes away. Use the alternative form only when a particular system asks for it.

Practical ideas for your site

• A general button in the header or footer, with a link that has no message.
• A button on each product page with a message naming the product, made by changing only the message in the tool.
• A button on the order-tracking page with a message like the one above, so the chat starts on the subject of the order.

If your site runs on a hosted platform that does not let you edit HTML, it most likely has a link field for a button or menu item. Paste the same wa.me link there; it works anywhere a link is accepted.

Before you publish

Open the page on your phone and tap the button to check that the chat opens with your number and the message shows in full. The tool checks the number's format only, cannot know whether it is registered on WhatsApp, and never sees the code you put on your site.