Cómo usar un Clic para Chatear en whatsApp

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on whatsapp
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.