How to create a WhatsApp button?

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

The easiest way to create a WhatsApp button is using the whatsapp: scheme. You could be familiar with that other wildly used scheme: mailto:.

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

Share via Whatsapp

Do you want to prefill a phone number? Add the phone parameter: &phone=+316123456789.

Works on phones with WhatsApp installed. On other devices like desktops or laptops, to name a few, it doesn’t work. Firefox gives an error page and Google Chrome does nothing. Users have no idea what the problem is. If you’re sure all your users have WhatsApp it’s fine, but if they don’t the user experience is bad.

To prevent that situation it’s possible to use an https url:

<a href=" world!">Share via Whatsapp</a>

Share via Whatsapp

This will give feedback and an option to use WhatsApp Web.

Screenshot of WhatsApp not installed error.

Feedback when WhatsApp is not present on a device.

But that feedback comes at a price. The user navigates to another page.

You could add a target="_blank" to the link, but at GRRR we have an opinion and blog post about that.

The next question will be: is it possible to detect whether or not WhatsApp is installed? No. The browser doesn’t expose an API with that information. The internet offers some tricks. I found one that does an AJAX call to whatsapp:// to check support for that scheme. But that caused Chrome to ask permission for using WhatsApp. You don’t want to bother visitors with that question when they haven’t used your WhatsApp button.

That’s a bummer. So you have to decide for yourself what’s suitable for your website. In my opinion a good solution is using whatsapp: and give visitors another option like e-mail or phone. Your visitor does the “is-WhatsApp-installed”-check for you.