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>
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="https://api.whatsapp.com/send?text=Hello world!">Share via Whatsapp</a>
This will give feedback and an option to use WhatsApp Web.
Feedback when WhatsApp is not present on a device.
But that feedback comes at a price. The user navigates to another page.
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.