Agregar el botón de WhatsApp en tu sitio de WordPress es prácticamente “obligatorio” para facilitar la comunicación con tus clientes. En este post te mostraré cómo agregar un botón de WhatsApp o un enlace en el menú de manera sencilla en tu sitio de WordPress. Además, podrás seguir todos los pasos en el videotutorial que encontrarás al final del post. ¡Vamos a ello!
Cómo agregar un botón de WhatsApp a tu sitio web
Puedes agregar un botón de WhatsApp a tu menú de WordPress usando un plugin de terceros como “Joinchat” o “Click-to-Chat” entre otros. Estos plugins te permiten agregar un botón de chat de WhatsApp a tu sitio web, que los clientes pueden utilizar para enviarte un mensaje de WhatsApp directamente desde tu sitio web.
Pero… ¿Cómo puedo tener algo parecido y sin plugins? ¡Muy sencillo!, y salvando las distancias, puedes agregar un botón de acceso a WhatsApp en tu menú de WordPress o en cualquier lugar de la web. ¿Lo vemos?
Cómo agregar un botón de WhatsApp sin plugins a tu sitio web
Para agregar un botón de WhatsApp a tu sitio web sin tener que depender de plugins adicionales puedes emplear lo bloques de WordPress o si lo prefieres, incluso con algo de código en funtions.php. Pero si no quieres complicaciones, utiliza los bloques de WordPress y en pocos pasos lo habrás logrado, y podrás ofrecer a tus visitantes una forma rápida y conveniente de contactarte a través de WhatsApp.
Poner un botón de WhatsApp utilizando el bloque HTML
En WordPress se puede utilizar el siguiente código HTML para agregar un botón de WhatsApp a una página o una entrada de tu blog utilizando el bloque HTML:
<a href="https://wa.me/34xxxxxxxxx?text=Hola%21%20Me%20gustar%C3%ADa%20obtener%20m%C3%A1s%20informaci%C3%B3n%20sobre%20los%20servicios%20de%20su%20cl%C3%ADnica" target="_blank">
<img src="icono_whatsapp.png" alt="Contacto vía WhatsApp" width="32" height="32">
</a>
Ahora, tan solo tendrás que reemplazar:
- “34xxxxxxxxx” con el número de teléfono de tu negocio, por ejemplo: 34123445566,
- la expresión que hay después de ?text= hasta las comillas dobles «, por el mensaje predeterminado que el usuario que realice clic sobre el icono te enviará. Es importante que cambies los caracteres “extraños” como acentos, signos de admiración, etc, Por su código correspondiente usando la codificación URL o Percent encoding. Si es mucho lío, no pongas el mensaje y deja el href como el siguiente ejemplo: href=»https://wa.me/34123445566″.
- y por último cambia “icono-whatsapp.png” con la dirección URL del icono de WhatsApp deseado, por ejemplo: https://juanarmada.com/wp-content/uploads/icono-whatsapp.webp. Y si quieres personalizar el tamaño del icono o imagen, puedes hacerlo con los siguientes parámetros: width=”32” height=”32”.
Una vez personalizado al hacer clic en el icono de WhatsApp, se abrirá la aplicación en el teléfono del usuario y se iniciará una conversación con la clínica dental. Puedes probarlo con el ejemplo que te adjunto.
Poner un botón de WhatsApp utilizando el bloque BOTONES
Este apartado es más fácil porque puedes editar las propiedades del botón desde el propio editor del sitio.
En este caso, el enlace del botón, puede ser el mismo que en el ejemplo anterior.
El resto de la configuración del bloque botones, la puedes realizar desde el propio editor.
Poner un botón de WhatsApp con código
Añade facilidad a la comunicación con tus clientes al incorporar un botón de WhatsApp en tu sitio web con este código sencillo. Un enlace con una URL que llama a la API de WhatsApp abre la aplicación y permite la conversación con un solo clic. Incluye un icono de WhatsApp para una identificación clara.
add_action('wp_footer', 'pie_pagina');
function pie_pagina(){ ?>
<a href="https://api.whatsapp.com/send?phone=34xxxxxxxxx" id="botonWhatsapp" target="_blank">
<img src="ruta/a/icono_whatsapp.png" alt="Contactar por WhatsApp" width="32" height="32">
</a>
<?php };Donde:
add_action('wp_footer', 'pie_pagina'): Esta línea de código agrega la funciónpie_pagina()al hookwp_footer. Esto significa que la funciónpie_pagina()se ejecutará al renderizar el pie de página de tu sitio WordPress.function pie_pagina(){ ?>: Esto inicia la definición de la funciónpie_pagina(). La función tiene como objetivo generar el enlace de WhatsApp y la imagen del botón.<a href="https://api.whatsapp.com/send?phone=34xxxxxxxxx" id="botonWhatsapp" target="_blank">: Esta línea crea el enlace de WhatsApp. El número de teléfono «34xxxxxxxxx» es ficticio y debe ser reemplazado por tu número de teléfono de WhatsApp válido. El enlacehttps://api.whatsapp.com/send?phone=se utiliza para abrir WhatsApp en la web y rellenar el número de teléfono en el cuadro de chat. También puedes usar las que hemos visto en los ejemplos anteriores.<img src="ruta/a/icono_whatsapp.png" alt="Contactar por WhatsApp" width="32" height="32">: Esta línea inserta la imagen del botón de WhatsApp. El atributosrcespecifica la ruta de la imagen, que debería ser reemplazada por la ruta correcta hacia el archivo de imagen del botón de WhatsApp. Los atributoswidthyheightestablecen el tamaño de la imagen en 32 píxeles de ancho y 32 píxeles de alto.<?php };: Esto cierra la definición de la funciónpie_pagina().
Ahora este código lo puedes pegar en el fichero functions.php de tu plantilla o en tu plugin de funcionalidades. ¿Increíble, verdad?
Videotutorial sobre cómo poner un botón de WhatsApp en tu WordPress
Conclusión
Para mejorar la experiencia del usuario en tu página web de WordPress, integrar un botón de WhatsApp puede ser una excelente solución. Este te permite fácilmente proporcionar a tus clientes una vía rápida y sencilla de contactarte. En este artículo, he presentado dos métodos eficaces para agregar un botón de WhatsApp a tu sitio web de WordPress. Hay muchas opciones adicionales y más avanzadas disponibles, pero estas dos soluciones son las que he utilizado y me han funcionado bien.
Espero que este post te haya ayudado a mejorar la experiencia de usuario de tu sitio web
¡Nos vemos en el siguiente post! Ciao!
