Add a WhatsApp button to WordPress without a plugin

By the Waani team ยท 22 October 2026

You do not need a WhatsApp chat plugin to add a contact button to a WordPress page. The least fragile option is a normal link or Button block pointing to your WhatsApp number. A floating popup needs more permissive HTML settings.

Option 1: a normal WordPress Button block

  1. Edit the page where visitors should contact you.
  2. Add a Button block and set the label to Chat on WhatsApp.
  3. Set its URL to https://wa.me/YOUR_NUMBER, replacing YOUR_NUMBER with your active number including country code, digits only.
  4. Save the page and view the published front end. Confirm the destination before using it with customers.

This is an in-page button, not a floating popup. It is often enough for a contact page or an enquiry section. You can also use the same URL in a navigation or footer link if your theme supports it.

Option 2: a Custom HTML block

Add a Custom HTML block by typing /html in a new block, then insert:

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

Replace YOUR_NUMBER before publishing. In WordPress 7.0, the Custom HTML block has an Edit HTML interface; CSS and JavaScript panels depend on your account's capabilities. Older releases use a different editing interface.

What we tested

In a disposable WordPress 7.0 installation running PHP 8.3 through WordPress Playground, we created a published page containing the Custom HTML block above with a reserved test number. WordPress saved the block and its REST-rendered output preserved the link, target and rel attributes. No WhatsApp chat plugin was installed. We did not send a message or verify the test number as a WhatsApp account.

This checks the WordPress content/rendering path, not every hosted WordPress plan or a manual tour of the block editor. Do not infer that an inline-script popup works on your site just because a plain anchor survives.

Want the floating WAChat popup?

Generate standalone code on the WAChat homepage and try it in a Custom HTML block on a staging page. Save, reload, and test the actual front end. The generated popup includes styling and inline event handlers; WordPress permissions, security plugins or hosting restrictions may remove or block them.

WordPress documents that users without unfiltered_html have their HTML sanitized, and disallowed markup can be removed on save. WordPress 7.0's separate CSS/JavaScript editing panels are also restricted by that capability. Do not grant broad permissions to untrusted users or disable sanitization to make a widget work.

One page versus the whole website

A block added to one page only appears there. To show a contact link across a block theme, place it in the appropriate shared footer template part using the Site Editor, if your role and theme allow this. Review which templates use that footer. Keep a backup and test a second page.

For classic themes, use an existing supported footer/code-insertion setting if available. Editing the parent theme's footer.php directly can be overwritten by an update. A developer can implement an approved child-theme change; do not paste PHP into a Custom HTML block.

When the code disappears or the button fails

Final checks

View the page while logged out, test desktop and mobile placement, and confirm the contact number. A page click is not proof a message was sent. Ask a consenting tester to confirm the conversation if you need an end-to-end check.

Sources: WordPress Custom HTML documentation and WhatsApp click to chat. For a regular website, use the HTML installation guide.