Add a WhatsApp button to an HTML website

By the Waani team · 22 October 2026

If you can edit your site's HTML, you can add a WhatsApp contact link without installing a plugin or signing up for a messaging platform. Start with a plain link. Use the generator if you want a floating button and welcome popup.

Start with the smallest working link

<a href="https://wa.me/YOUR_NUMBER?text=Hello"
   target="_blank" rel="noopener noreferrer">
  Chat on WhatsApp
</a>

Replace YOUR_NUMBER with your active WhatsApp number, including the country code, without +, spaces or brackets. For India, prepend 91 to your ten-digit mobile number. Do not publish somebody else's number from a tutorial. The placeholder above deliberately cannot act as a real destination.

The text parameter is the draft the visitor sees. They must send it in WhatsApp. For punctuation, spaces or non-English text, use the generator, which URL-encodes the message for you. A click does not subscribe the visitor to future marketing.

Generate a floating button

1. Open the generator and enter your business number.
2. Set the business name, welcome text, pre-filled message and button label. Use an honest response-time tagline.
3. Choose left or right placement. Leave automatic popup opening off unless you have tested that it does not obstruct your page.
4. Select Get Embed Code, then Standalone Code. Copy the entire block.
5. In a backup or staging copy of your HTML file, paste it immediately before the closing </body> tag. Save and reload.

The standalone block includes its own HTML, styling and a click handler. It does not load a WAChat script. Install one copy per page: copying the same block twice creates duplicate element IDs and can make the popup toggle the wrong element.

Standalone versus hosted

Hosted mode loads widget.js from WAChat and then initializes it with your settings. It has a different popup layout and depends on that script being reachable. Use the generated script order unchanged. Standalone mode stays in your page until you replace it; hosted script updates can change its behavior.

Test before putting it in front of customers

• Open the saved page in a fresh browser tab. Use the floating button to open and close the popup.
• Inspect the destination and pre-filled message. Use a consenting test recipient; never run a campaign as a test.
• Check a narrow phone viewport. The button must not cover checkout, cookie choices or other important controls.
• Tab to the button and activate it with the keyboard.
• Try a business name containing quotation marks and a message containing punctuation.

Our standalone and hosted renderers were browser-tested with quoted business names and HTML-like text. A generated wa.me link was checked without sending a message. That verifies rendering and link construction, not the existence of your WhatsApp account or delivery.

If it does not work

• You see code instead of a button: use a custom HTML area, not a paragraph or code-display block.
• The popup does not open: check whether your editor removed onclick or whether your Content Security Policy blocks inline handlers. Do not weaken the whole site's security policy just to add a button. Use the plain link fallback or ask your developer for an approved integration.
• The hosted widget is missing: inspect whether widget.js loads, and whether the initialization script is allowed and runs afterward.
• The wrong number opens: check the generated wa.me URL and country code.
• Old text remains: confirm the new code was deployed, then clear the relevant site/CDN cache.

For WordPress, see the plugin-free WordPress guide. Keep the official click-to-chat reference handy for number formatting.