Cómo añadir un botón flotante de WhatsApp en tu sitio web, aquí te mostraremos dos maneras de incluir el botón de esta famosa aplicación para que tus visitantes, contacten contigo.
WhatsApp se ha vuelto una herramienta de marketing indispensable para cualquier persona que quiera estar en contacto con sus visitantes.
Con más de 3 mil millones de usuarios por todo el mundo, WhatsApp es la aplicación de mensajería instantánea más utilizada en el mundo.
Cómo añadir un botón flotante de WhatsApp, sin plugin
Antes de continuar con este método, vamos a requerir que conozcas un poco WordPress, es para usuarios medio avanzados, no necesitaras saber de programación, pero si tienes algún conocimiento mejor.
Pero si no quieres correr el riesgo de modificar la plantilla que estas utilizando, te recomendamos que bajes hasta el final de este articulo, donde incluimos un momento para agregar el mismo botón, usando un plugin en WordPress.
¿Con plugin o sin plugin, cual es mejor?
Quiero hacer una pausa aquí antes de continuar con el objetivo de este articulo, y explicar de manera breve porque te brindamos dos métodos, y por cual deberías de optar.
Siempre recomendamos que se utilice la menor cantidad de plugin posibles en WordPress, que solo se instalen los plugin esenciales para el funcionamiento optimo.
Pero también existen un motivo, por el cual pudieras preferir un plugin en vez de insertar el código directamente en la plantilla.
Existe la posibilidad de que en algún momento necesites cambiar de plantilla, o que actualices tu plantilla, y eso provocara que el código deje de funcionar. Aunque existen soluciones para eso, que veremos mas adelante.
¡Manos a la obra!
Vamos a dividir el codigo que vamos a insertar en dos partes, podras notar que no es la gran cosa.
La primera parte sera el DIV, donde pondremos nuestro numero de teléfono, y la imagen del botón de WhatsApp que se encontrara en la parte inferior derecha.
El resultado de nuestro código, quedara de la siguiente manera. A continuación el ejemplo, de como debe quedar.
1- Copiando y pegando
Primero antes de copiar el código que aparece a continuación, vamos a explicar brevemente.
Este código insertara un DIV con una imagen enlazada a la API de WhatsApp.
Lo que tendrás que modificar es el numero de teléfono, y tendrás que poner el tuyo,
En la segunda linea podrás ver el siguiente enlace; deberás cambiar el teléfono que se encuentra después del signo igual (=), por el tuyo
https://api.whatsapp.com/send?phone=123456789
Y en la siguiente linea, donde tenemos la etiqueta llamada IMG, si queremos agregar un icono distinto, solo tenemos que reemplazar con la direccion de la nueva imagen.
Adjuntaremos un archivo comprimido con varios iconos de WhatsApp, para que puedas elegir el que mas te guste.
<div class="whatsapp">
<a href="https://api.whatsapp.com/send?phone=123456789" target="_blank">
<img src="https://soportetop.com/wp-content/uploads/2020/03/whatsapp.png" alt="WhatsApp">
</a>
</div>2. Buscando footer.php en el Escritorio de WordPress
Una vez que te encuentres en tu Escritorio de WordPress, puedes ver todas las opciones de administracion de WordPress, que se ubican en la parte izquierda de la pantalla.
Vamos a ir a Apariencia, y después a Editor de Temas
Como muestra la imagen a continuación, se nos abrirá un editor, y en la parte derecha del editor, buscaremos el archivo footer.php
Como se puede ver en la imagen, hemos pegado el código, antes de la etiqueta </body>
Y tocas el botón que dice actualizar archivo.
3- Copiando y Pegando el estilo en header.php
Copiando. Lo primero que tenemos que hacer es copiar el siguiente codigo:
<style>
.whatsapp {
display:block;
width:70px; /*Tamaño del icono*/
height:70px;
color#fff;
position: fixed;
right:20px; /*Cambia right por left para que se vea la izquierda en vez de a la derecha*/
bottom:20px;
border-radius:50%;
line-height:80px;
text-align:center;
z-index:999;
}
</style>Debemos continuar en el mismo lugar donde estábamos, pero en este caso, buscaremos el archivo header.php, y pegaremos el código que acabamos de copiar, como muestra la siguiente imagen.
Es muy importante que pegues el código antes de la etiqueta </head>
Como ultimo paso, toca el botón Actualizar Archivo, y ya podrás ver el botón en tu sitio web.
Como incluir el botón flotante de WhatsApp en tu sitio web, ahora con plugins
El plugin que vamos a utilizar se llama «Add Chat App Button» Y se puede encontrar en el repositorio de plugins.
Existen muchos plugins que podrias utilizar, me decidimos que este plugins es simple, y no requiere que el usuario tenga muchos conocimiento.
Con este plugins, se puede integrar el botón de Whatsapp exactamente como lo hemos hecho solo con códigos insertados en el tema de wordpress.
¡Comencemos!
1- Buscando e instalando el plugins
Como explicamos en el caso anterior, todas las opciones de wordpress, se encuentran en un menu al lado izquierdo de la pantalla, vamos a buscar: «Plugins» y haremos clic en «Añadir Plugins«
Y en el buscador pondremos «Add Chat App Button» como se muestra en la siguiente imagen.
Es el primer plugins que aparece en la imagen, vamos a hacer clic en «Instalar ahora«, y posteriormente en «Activar«.
1- Configurando el Plugin
Este pluglins crea un submenu en Ajustes. Para configurar el plugin, debes ir hasta Ajustes, y después en Add WhatsApp Button
Como se puede apreciar en la imagen a continuación, el plugin se encuentra en ingles, pero no dispone de muchas opciones, y es fácil de entender.
El plugins dispones de dos pestañas, donde podremos configurar las acciones del boton, y otra conde podremos configurar el diseño.
En el primer recuadro que aparece, podemos dejar tal cual esta, o poner un texto que se mostrara en forma de botón, también podremos configurar en diseño, que no aparezca ningún texto, y solo se muestre el icono de whatsapp.-
Y en el siguiente recuadro se debe poner el numero de teléfono de WhatsApp.
Una vez que se complete con los datos correspondientes, solo queda marcar la opcion «Enable WhatsApp Button» para activar el botón en el sitio.
Despues guardamos los datos, haciendo clic en «Save Changes». Ya ya podrás visualizar el botón con el texto que elegiste mostrándose en tu sitio.
2- Jugando con el diseño del botón
Si no te gusta como se ve el botón, este plugins dispone de una opción que te permitirá cambiar la apariencia del botón.
En mi caso prefiero que se muestre el icono de WhatsApp, y no un texto. Todo esto cambios se podran realizar desde la pestaña de apariencia.
Si algo me gusta de este plugins, es que podrás tener una vista previa de como se mostrara el botón.
Podrás configurar todo lo que quieras, como el color del texto, el fondo del texto, si solo quieres un icono. Y también la ubicación del botón flotante de WhatsApp
Resumen
En este articulo aprendiste dos maneras muy interesante de cómo añadir un botón flotante de WhatsApp. Te hemos contado las ventajas y desventajas a la hora de usar un plugin, y porque también conviene incluir directamente el código en nuestra plantilla.
WhatsApp es la principal aplicación de mensajería instantánea del mundo, incluirla en tu web, te dará sin dudas, grandes beneficios.
