How to create a WhatsApp button?

June 5, 2020

It seems a simple question, but there are some pitfalls. I'll give you an overview.

The most straightforward approach involves using the whatsapp: scheme, similar to the widely recognized mailto: protocol.

<a href="whatsapp://send?text=Hello world!">Share via Whatsapp</a>

To include a phone number, append the phone parameter: &phone=+316123456789.

This method functions on devices with WhatsApp installed. However, it fails on desktops and laptops without the app—Firefox displays an error page while Chrome shows no response. Users become confused about what went wrong.

An alternative uses an HTTPS URL instead:

<a href="https://api.whatsapp.com/send?text=Hello world!">Share via Whatsapp</a>

This provides feedback and enables WhatsApp Web access when the app isn't installed. The tradeoff is that users navigate to another page.

A natural follow-up question: can you detect WhatsApp installation? Unfortunately, no. Browsers don't expose this information through APIs. Some workarounds exist—like AJAX calls to whatsapp://—but these prompt Chrome to request WhatsApp permissions, bothering visitors unnecessarily.

A good solution is using whatsapp: and give visitors another option like e-mail or phone.

Originally published on norday.tech.