Cómo usar un Clic para Chatear en whatsApp

Facebook
LinkedIn
WhatsApp

Agregar un call to action para mandar un whatsApp con solo 1 click desde nuestra página web

WhatsApp se ha convertido en una herramienta imprescindible de contacto en la vida de todos y cada uno de nosotros. Desde tener comunicación con nuestros familiares y amigos, hasta establecer relaciones de negocios. Es por ello que en la entrega de esta semana estaremos dando un vistazo al API de WhatsApp . 

Haremos que al hacer click en una imagen podamos enviar un mensaje por whatsApp al número que queramos.

1º Paso – Paso contruir nuestro enlace a WhatsApp

WhatsApp nos provee de una estructura que debemos de seguir, ejemplo:

https://api.whatsapp.com/send?phone=525539000734

El parámetro phone se compone de clave de país + número de WhatsApp, en mi caso es 52 de México y mi número telefónico 5539000734.

 

También podemos agregar un parámetro text para un mensaje por defecto para unir teléfono de WhatsApp + Mensaje

https://api.whatsapp.com/send?phone=525539000734&text=Hola

 

2º Paso – Agregar un icono flotante a nuestro sitio web

Es muy posible que no quieras mostrar a tus visitantes un link tradicional y prefieras usar una icono flotante de WhatsApp para agregar un call to action

<a id="whatsapp" href="https://api.whatsapp.com/send?phone=525539000734">
           <img src="ruta/whatssocial.png" alt="Enviar mensaje whatsapp">
        </a>

 

Creamos un anchor o link con el id whatsapp y dentro de el una etiqueta imagen, aquí deberás cambiar el atributo src por la url de tu icono.

Aquí te dejo uno.

 

Por último vamos a darle un poco de CSS para volver el icono un elemento flotante.

 

#whatsapp {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 999999;
}

Donde:

position:fixed.- le indica al navegador que es un elemento que se mueve con respecto del margen del navegador.

bottom y right.- Indican los margenes en los que se colocará el icono con respecto de la ventana, en este caso 20 px del margen inferior y 30 pixeles de la derecha.

z-index.- indica que el icono deberá sobre ponerse por encima de los demás elementos de nuestro sitio.

 

 

Hasta aquí la entrega de esta semana.