Si tienes tu web desarrollada en wordpress y vendes productos o algún servicio la comunicación entre tu y tu cliente debe ser óptima y rápida, y que mejor que usar desde tu propia web uno de los chat’s más usados en el mundo como lo es Whatsapp.
En este post te voy a explicar como colocar un icono de whatsapp totalmente funcional para que cualquier persona te pueda escribir directo a tu chat.
Hay dos maneras: una es con un plugin y la otra es a través de código (para los más inquietos como yo 😉 ).
Agregar botón de Whatsapp en página web con VVAme chat plugin.
Esta opción es muy rápida y fácil de colocar, solo debes ir a la sección de plugins de tu wordpress y buscar el plugin llamado VVAme chat, lo instalas, lo activas y listo!
Ahora puedes ir a la sección “Ajustes > WAme Chat” y hacer una muy fácil configuración, en donde solo debes poner tu número de whatsapp, donde quieres que aparezca el icono y un mensaje (llamada a la acción).
Ya con esto estás listo para responder con prontitud a tus clientes.
Colocar whatsapp en página web con código
Bueno ahora si ¡manos al código!… bueno tampoco es mucho solo son 3 líneas 😉
Primero debemos dirigirnos a nuestro archivo function.php que está en la raíz de nuestro theme, recuerda: public_html/wp-content/themes/tuTheme, cuando estemos dentro de él podemos ir hasta el final de las líneas de código ya existentes y pegamos lo siguiente:
//WhatsApp button
add_action('wp_footer', function () { ?>
<a id="whatsapp" target="_blank" href=""><img src=""></a>
<?php });Este código lo que hace es generarnos una estructura HTML dentro de nuestro wordpress que es donde irá nuestro icono de whatsapp. Pero en este momento solo tenemos eso, “la estructura”, debemos entonces “rellenar” esa estructura con una imagen y con el link hacia el chat.
Entonces lo primero es asignar el link a donde debe ir cuando alguien de clic en el icono, buscamos en el código agregado anteriormente este trozo: href=» aquí » y justo en medio de las comillas vamos a agregar:
https://wa.me/1234567890Evidentemente debes cambiar el número de ejemplo por el tuyo, anteponiendo el prefijo de tu país, en el caso de Colombia por ejemplo es +57, aquí te dejo un enlace donde puedes ver todos los prefijos.
Recuerda que NO debes poner el símbolo de + solo el número.
Ahora ya nuestro botón está funcionando…pero aún nadie lo ve, sabes por qué? ¡Correcto! falta poner el icono que es una cosa fundamental.
Para eso hay muchas formas, pero esta vez vamos a ir a Flaticon y nos descargamos el que más nos guste.
Luego entras a tu wordpress y te diriges a Medios > añadir nuevo y subes el icono que acabas de descargar, acto seguido copiamos su URL.
Ahora solo lo debes pegar esa url de la imagen en el código que estamos trabajando, justo donde dice: src=” aquí ”
Ya todo esta funcional, pero si echas un vistazo a la web te vas a dar cuenta que se ve terrible por eso hay que darle una manito de CSS para que pueda flotar y verse bien.
Esto es muy fácil, solo abre el archivo style.css que está en la carpeta del theme (igual que el archivo function.php) y agrega este código al final de todo… et voilà
#whatsapp {
position:fixed;
bottom:10px;
right:10px;
width:55px;
height:55px
}Y este sería el resultado final del código…
//WhatsApp button
add_action('wp_footer', function () { ?>
<a id="whatsapp" target="_blank" href="https://wa.me/573404700800"><img src="http://desarrolloweb.dev/wp-content/uploads/2020/04/social-media.png"></a>
<?php });Espero te haya servido este post… nos leemos pronto!