¿Cómo crear un botón de WhatsApp chat en Html?

Hace unas semanas la Aplicación WhatsApp decidió lanzar una nueva funcionalidad mediante su API, esta función permite agregar un botón y/o enlace (hipervínculo) para:
– Enviar un Mensaje de texto
– Abrir la conversación de un chat conocido
– Abrir un chat con un número que no tengamos guardado en nuestra agenda de contactos
– Abrir un chat con un mensaje predefinido listo para ser enviado.

whatsapp logo
Y todo esto para qué sirve? existen varios casos en el mundo del desarrollo web donde podemos hacer uso de estos enlaces:

– Generar un sitio web donde los usuarios puedan contactar un usuario específico (como el ejemplo que realicé de una organización – No existente – que ayuda a personas que quieren dar en adopción su perro con personas que quieran adoptar: ver sitio)

– Realizar el proceso de confirmación de compra de un producto (muchos negocios cuando están empezando o incluso grandes empresas, están empezando a usar WhatsApp como su principal canal de ventas)
– Permitir a los visitantes de un sitio web ponerse en contacto con las personas del sitio. Ejemplo

Existen muchos otros ejemplos de lo que se puede hacer con un botón, y aquí vamos a explicar cómo Agregarlo:

 




Básicamente para ello debemos invocar la URL https://api.whatsapp.com/send?phone=[ind][num]
Donde [ind] corresponde al indicativo del país y [num] al número telefónico

también podemos ingresar un texto predefinido que estará listo para ser enviado al contacto desde la URL, ejemplo:
https://api.whatsapp.com/send?phone=[ind][num]&text=[text]
Donde [text] es el texto que estará predefinido en formato URL encoded
Ejemplo:   https://api.whatsapp.com/send?phone=573113474922&text=Hola%2C%20deseo%20adquirir%20un%20soporte%20con%20ustedes

el resultado sería este:

También

Opción 1 Crear un texto con hipervínculo

Whatsapp href

ejemplo: https://api.whatsapp.com/send?phone=573113474922



Opción 2 Crear un botón con hipervínculo
Whatsapp boton web

el resultado es algo así:
botones whatsapp

Opcion 3: enviar un texto pero sin definir un contacto (para enviarlo a cualquier contacto o grupo de WhatsApp)

https://api.whatsapp.com/send?text=Hola%20esto%20es%20un%20mensaje%20de%20prueba
El resultado:

Nota: todos estos ejemplos fueron aplicados desde un pc, si los ejemplos se aplican desde un smartphone, se abrirá directamente la aplicación WhatsApp