Poner el botón de WhatsApp en WordPress

2 min 17/06/2019

Hay gente muy reacia a poner el número de teléfono o el WhatsApp en la web. Quieren que los usuarios pasen si o si por el formulario de contacto. Y me parece muy respetable. Si yo tuviese trabajo de sobra también lo haría!!??. Pero como no es el caso, cuantas más vías de contacto tengan los posibles clientes mejor. Y WhatsApp me parece una de las mejores vías de contacto. ¿Quien no tiene hoy en día WhtasApp? Muy poca gente. ¡Hasta mi suegra con 77 años lo tiene!

Tener un botón de WhatsApp en WordPress me parece muy importante para una comunicación fluida y efectiva con mis posibles clientes. Lo puedes poner tanto en móvil, aprovechando todo el potencial de la aplicación, como en escritorio para que se abra WhatsApp Web. Y es tan fácil poner el botón en las páginas de WordPress que no quiero yo mi web sin él. Por lo menos de momento!!

Te voy a contar dos maneras de poner un botón de WhatsApp en WordPress. La rápida, vía plugin. Y la difícil, con código.

Poner el botón de WhatsApp con el plugin WhatsApp me

Este plugin lo podemos descargar gratis desde repositorio de WordPress. En plugins -> Añadir nuevo y en buscar ponemos WhatsApp me. Ahora aparece el plugin, pulsamos Instalar ahora -> Activar.

Ahora toca configurarlo. No vamos a Ajustes -> WhatsApp me. Como opciones de configuración tenemos dos pestañas. En la pestaña general, tenemos:

• Un campo para introducir el número del móvil.
• Opción para mostrar solo en la versión móvil.
• Un mensaje que se puede personalizar que aparece al pulsar el botón o después de un tiempo (configurable en la casilla Retardo). En vez de que aparezca el pop up, podemos configurar para que aparezca una notificación al estilo de la que aparece en el móvil (un 1 pequeñito en rojo).
• Podemos configurar el mensaje por defecto que le aparezca al usuario al abrir WhatsApp.
• Lo podemos poner flotando a derecha o izquierda.

En la pestaña avanzado podemos configurar en que tipo de contenido va aparecer.

Ya está configurado WhatsApp me!!! Fácil y rápido.

En la parte frontal de la web aparecerá de la siguiente manera:

Poner un botón de WhatsApp con código

El botón de WhatsApp no deja de ser un enlace con una url que llama a la API de WhatsApp y abre la aplicación. Dentro del enlace lo idóneo es poner el icono de WhatsApp. El código para ello es el siguiente:

add_action('wp_footer', 'pie_pagina');
function pie_pagina(){
?>
    <a href="https://api.whatsapp.com/send?phone=34xxxxxxxxx" id="botonWhatsapp" target="_blank"><i class="fab fa-whatsapp"></i></a>//Sustituyes las x por tu número
<?php
};

Este código lo pegas en el functions.php de tu plantilla o en tu plugin de funcionalidades. Si tu plantilla tiene opción para añadir código en el pié de página, pegas la etiqueta a y su contenido (el enlace vamos).

Este código es válido si tu plantilla soporta la librería Font Awesome. En caso contrario, puedes subir el icono como una imagen y sustituyes:

 <i class="fab fa-whatsapp"></i>

por

<img src="ulr-de-la-imagen" />

Para darle forma añadimos el siguiente código CSS en Apariencia-> Personalizar -> CSS Adicional o en el plugin personalizado:

#botonWhatsapp {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    bottom: 20px;
    right: 20px;/*Flotando a la derecha. para que flote a la izq hay que poner la propiedad left*/
    width: 50px;
    height: 50px;
    padding: 5px;
    border-radius: 100%;
    box-shadow: 0px 0px 3px 2px #FF9A1A;/*Para poner sombra*/
    background-color: #FFBC49;/*Color del boton*/
    z-index: 111111;
}

#botonWhatsapp:hover{
    background-color: #FF9A1A;/*Color del botón al poner el ratón encima*/
}

#botonWhatsapp .fab{
    font-size:40px;
    color:white;/*color del icono*/
}

Ya tenemos nuestro botón flotando a la derecha creado con código. Si quieres personalizarlo más, es cuestión de darle unas vueltas al CSS y dejarlo a tu gusto.

Conclusión

Si quieres mejorar la usabilidad de tu página web, una buena alternativa es poner un botón de WhatsApp para facilitar que tus clientes contacten contigo. En este post te dejo dos formas de ponerlo en WordPress. Hay más plugins y más complejos, pero yo te traigo aquí dos soluciones que he probado y funcionan bien.

Para cualquier duda o sugerencia constructiva, no dudes en dejar un comentario ? ?