Crear un bot贸n de contacto por WhatsApp en WordPress

Aloha! En este v铆deo vamos a ver algo que me han pedido mucho: crear un bot贸n flotante de contactar por WhatsApp en WordPress y sin plugins. 隆Vamos all谩!

https://youtu.be/t9MU3OkSFPg

Hace un tiempo vimos c贸mo crear un bot贸n de llamada directa en WordPress. Esta vez nos centramos solo en el WhatsApp, as铆 que veamos c贸mo crear un bot贸n flotante que permita a nuestros usuarios contactarnos por WhatsApp con un solo click. Y no, no vamos a utilizar plugins porque es hiper-sencillo hacerlo sin.

Este es el resultado que buscamos:

Por supuesto, el bot贸n estar谩 disponible tanto en PC (para aquellos que usan la versi贸n Web o Desktop de WhatsApp) como en m贸vil (nos redirige directamente a la aplicaci贸n de WhatsApp).

Veamos los pasos a seguir:

Creamos el HTML del bot贸n

Para ello nos dirigimos al archivo functions.php de nuestro tema activo (accediendo a la ra铆z de nuestra web por FTP, en /wp-content/themes/nuestro-tema/functions.php) y a帽adimos al final del todo el siguiente c贸digo:

//WhatsApp button
add_action('wp_footer', function () { ?>
	<a id="whatsapp" target="_blank" href=""><img src=""></a>
<?php });

Este c贸digo est谩 incompleto y tendremos que a帽adirle dos cosas:

Vamos a ello.

Conseguimos en enlace de contacto de WhatsApp

Para ello vamos a usar la documentaci贸n oficial de WhatsApp. En este enlace se nos indica que para que alguien pueda hacer un "click to chat" con nosotros por WhatsApp, le debemos dirigir a un enlace como este:

https://wa.me/15551234567

Pero tendremos que cambiar el 15551234567 por nuestro n煤mero de tel茅fono m贸vil con el prefijo del pa铆s. Si no conoces el prefijo de tu pa铆s, puedes consultarlo en Wikipedia.

En caso de Espa帽a el prefijo es +34 y los n煤meros empiezan por 6, as铆 que me quedar铆a algo as铆:

https://wa.me/34600600600

Ten en cuenta que no hay que poner ning煤n s铆mbolo como +, par茅ntesis, etc. Solamente n煤meros.

Una vez que tenemos el enlace, lo insertamos en nuestro c贸digo y nos quedar谩 algo como esto:

//WhatsApp button
add_action('wp_footer', function () { ?>
	<a id="whatsapp" target="_blank" href="https://wa.me/34600600600"><img src=""></a>
<?php });

Vamos a por el icono.

Conseguir el icono de WhatsApp

Esto se puede hacer de varias maneras, pero te recomiendo visitar la web Flaticon y descargar ah铆 un icono que m谩s te guste. Una vez que lo tengas, haz lo siguiente:

Solo te quedar铆a pegarlo en el c贸digo de antes, y quedar铆a algo as铆:

//WhatsApp button
add_action('wp_footer', function () { ?>
	<a id="whatsapp" target="_blank" href="https://wa.me/34600600600"><img src="http://academia.local/wp-content/uploads/2020/03/whatsapp.png"></a>
<?php });

Y ya estamos listos 馃檪 Solo nos falta a帽adir un poco de CSS para que el icono quede flotando en una esquina de la pantalla.

Estilizar el logo de WhatsApp

Hay varias formas de a帽adir CSS a WordPress. Sea cual sea tu favorito, el c贸digo a insertar ser铆a el siguiente:

#whatsapp {
	position:fixed;
	bottom:10px;
	right:10px;
	width:55px;
	height:55px
}

Lo que hacemos con este c贸digo es hacer que el bot贸n se quede fijo en la pantalla, separado de la esquina inferior derecha a 10px y que su tama帽o no supere 55px.

隆Y ya estamos! Ya hemos creado, configurado y personalizado nuestro bot贸n que deber铆a funcionar perfectamente si has seguido bien todos los pasos.

驴Haces webs en WordPress?

Cada semana comparto tres ideas para mejorar tu negocio, tus webs y la gesti贸n de tus clientes. Es gratis :)

Enlace externo a la herramienta
de newsletters