En la entrada de hoy quiero mostrarte cómo añadir el botón de WhatsApp a tu página web o tienda online de Webnode,  así los usuarios de tu web puedan contactar directamente a través de esta aplicación.

Una de las cosas más importantes de disponer de un negocio online es tener un servicio de atención al cliente óptimo. Y es que dar facilidades a tus clientes para que se puedan comunicar contigo en caso de alguna duda, es una de las mejores formas de para que tus ventas sigan creciendo. 

Como todos sabéis, WhatsApp es una aplicación móvil de mensajería instantánea y aunque existen muchas otras, esta es la más popular. 

Si todavía no dispones de tu web página web en Webnode, no esperes más y comienza tu negocio online. Puedes ver todas las ventajas y beneficios que te trae Webnode en el siguiente enlace.

Como siempre, hemos creado un videotutorial en nuestro canal de YouTube para que puedas ver paso a paso cómo se crean los botones de WhatsApp en Webnode.

Crear botón de WhatsApp para Webnode

Al igual que hicimos en un tutorial anterior para añadir botones de redes sociales, también vamos a necesitar de la ayuda de un poco de código CSS. 

No te asustes, es muy sencillo y voy a explicar todo paso a paso para que no tengas ningún problema para añadirlo a tu web en Webnode. 

Si te interesa añadir otra clase de botones sociales, echa un vistazo a este otro tutorial que hicimos. 

📖 Añadir botones sociales a tu blog

Tipos de botones de WhatsApp

Aquí puedes ver que tenemos varios tipos de botones:

· Botón WhatsApp Negro Redondo

<a href="https://wa.me/34XXXXXXXXX/?text="¡Hola! necesito información" target="_blank"><div align="center"><img alt="habla conmigo en whatsapp" src="https://webmasfacil.info/wp-content/uploads/2021/05/icono-whatsapp1-512-blanco.png" title="habla conmigo" height="40" width="40"></a>

· Botón WhatsApp Verde Redondo

<a href="https://wa.me/34XXXXXXXXX/?text="¡Hola! necesito información" target="_blank"><div align="center"><img alt="habla conmigo en whatsapp" src="https://webmasfacil.info/wp-content/uploads/2021/05/icono-whatsapp1-512-color.png" title="habla conmigo" height="40" width="40"></a>

· Botón WhatsApp Transparente Redondo

<a href="https://wa.me/34XXXXXXXXX/?text="¡Hola! necesito información" target="_blank"><div align="center"><img alt="habla conmigo en whatsapp" src="https://webmasfacil.info/wp-content/uploads/2021/05/icono-whatsapp1-512-negro.png" title="habla conmigo" height="40" width="40"></a>

· Botón WhatsApp Negro Cuadrado

<a href="https://wa.me/34XXXXXXXXX/?text="¡Hola! necesito información" target="_blank"><div align="center"><img alt="habla conmigo en whatsapp" src="https://webmasfacil.info/wp-content/uploads/2021/05/icono-whatsapp2-512-blanco.png" title="habla conmigo" height="40" width="40"></a>

· Botón WhatsApp Verde Cuadrado

<a href="https://wa.me/34XXXXXXXXX/?text="¡Hola! necesito información" target="_blank"><div align="center"><img alt="habla conmigo en whatsapp" src="https://webmasfacil.info/wp-content/uploads/2021/05/icono-whatsapp2-512-color.png" title="habla conmigo" height="40" width="40"></a>

· Botón WhatsApp Blanco Cuadrado

<a href="https://wa.me/34XXXXXXXXX/?text="¡Hola! necesito información" target="_blank"><div align="center"><img alt="habla conmigo en whatsapp" src="https://webmasfacil.info/wp-content/uploads/2021/05/icono-whatsapp2-512-negro.png" title="habla conmigo" height="40" width="40"></a>

Configuración del botón de WhatsApp

El código de cada botón tiene este aspecto. Te explico cómo funciona para que puedas entenderlo:

<a href="https://wa.me/34XXXXXXXXX/?text="¡Hola! necesito información" target="_blank"><div align="center"><img alt="habla conmigo en whatsapp" src="URL imagen botón whatsapp" title="habla conmigo" height="40" width="40"></a>

• Teléfono: debes añadir tu número de teléfono. 
• Text: es el texto que mostrará una vez pulsen en el botón.
• Alt: es el texto alternativo, por si la imagen no se puede cargar
• Height y Width: es el alto y el ancho mostrado en píxeles. En el código viene un tamaño de ejemplo, pero puedes sustituirlo por el que mejor se adapte a tu web. Recuerda que el tamaño tiene que ser proporcional, si no el botón se deformará. El tamaño máximo es de 90 x 90 píxeles.

Antes de copiar el código, tienes que añadir tu número de teléfono para que los mensajes lleguen a tu WhatsApp y puedas contestar. 

Añadir botón WhatsApp a Webnode

Una vez ya has modificado la información personal y elegido el tipo de botón que deseas, copia el código y dirígete al editor web Webnode. 

Dentro de tu proyecto, ve a la página o páginas en dónde quieres que aparezca. Lo normal es situarlo en el menú o en la zona de contacto del pie de página. 

Pulsa en la opción de “Añadir contenido», y después en “Código html“. Ahora pega el código, pulsa OK y publica para que se quede todo guardado. 

Si quisieras alinear el botón a la derecha o a la izquierda es tan sencillo como volver al apartado de “Código html” y elegir entre las opciones “center”, “right”, o “left” y vuelve a publicar los cambios. 

Conlcusión

Como ves ahora ya tenemos el botón de WhatsApp en funcionamiento en Webnode, y nuestros usuarios podrán contactar con nosotros directamente en la aplicación de WhatsApp.

En tan solo unos minutos has podido añadir una opción muy útil para tu web de una forma muy sencilla. 

Recuerda que tienes varios estilos de botones en nuestro artículo, por lo que puedes usar el que más te guste.

¡Quiero saber tu opinión!

Me encantaría leer tus propuestas y estrategias para conseguir más clientes. 

¡Cuéntame en los comentarios!

Si te ha gustado el post y crees que puede ayudar a alguien más, compártelo por favor. Entre todos la comunidad Web más fácil se hace más grande.