Cómo agregar un botón WhatsApp en tu página web

En este artículo vas a ver lo fácil que es agregar un botón de WhatsApp en tu página web.

Además, vas a descubrir como posicionarlo de forma fija en la parte inferior derecha de la pantalla.

Código de marcado para el botón de WhatsApp

En algún lugar de tu código HTML debes agregar el código de marcado para mostrar el botón.

Por ejemplo:

Source code

<a id="whatsapp" href="https://api.whatsapp.com/send?phone=34656565656">
    <img src="images/whatsapp-80.png" alt="whatsapp">
</a>

En este tutorial, el botón para contactar mediante WhatsApp lo voy a representar con un enlace pero también se podría representar con un botón o input. Lo puedes hacer como tu quieras.

En el enlace debes fijarte bien en que he agregado un identificador = «whatsapp» que usaré para agregar los estilos personalizados del botón.

Este identificador lo estaré utilizando para posicionarlo en la parte de abajo a la derecha de la pantalla.

En el atributo «href» he agregado el enlace de la API de WhatsApp que nos permite enviar un mensaje al número de teléfono  que puedes indicar en el parámetro «phone».

No te olvides de indicar el prefijo para representar el país y seguidamente el número de móvil.

Diseño del botón de WhatsApp

Como contenido del enlace he agregado una imagen del icono del WhatsApp a 80px que puedes encontrar en el directorio de imágenes de Google.

En la hoja de estilos voy a agregar el código CSS necesario para posicionar el botón de WhatsApp en la parte inferior derecha de la pantalla.

Source code

body {
    position: relative;
}
 
#whatsapp {
    z-index: 9999;
    position: fixed;
    bottom: 15px;
    right: 15px;
}

Al cuerpo de la página o, más bien conocido como body en desarrollo web, lo posiciono de forma relativa.

Luego, al botón WhatsApp, recuerda que le puse un identificador = «whatsapp», le indico que quiero que esté posicionado fijo a 15px del extremo derecho y a 15px del extremo inferior y, además, esté por encima de cualquier elemento de la página.

De esta forma, si tu página tiene mucho scroll, el botón de WhatsApp siempre estará visible en el extremo inferior derecho para que el usuario siempre pueda verlo.

Conclusión

Este servicio de WhatsApp es gratuito y se puede mostrar en dispositivos móviles como en ordenadores.

Para este último caso, el usuario necesitará instalar  WhatsApp Web en la computadora para poder enlazar a la correspondiente conversación y enviar un mensaje.

Si necesitas agregar en tu página web una forma rápida para contactar esta puede ser una muy buena solución utilizando una aplicación que prácticamente utiliza todo el mundo.