¿Cómo incluir un botón de WhatsApp dentro de tu sitio web?
Si deseas facilitar que tus visitantes se comuniquen contigo a través de WhatsApp, agregar un botón flotante o fijo a tu sitio web puede ser una excelente opción. Aquí te guiaré a través de diferentes métodos para implementarlo en tu sitio, ya sea que estés utilizando HTML estático, WordPress o Webflow.
Colocar un widget o botón flotante de WhatsApp dentro de mi website
Para incluir un botón flotante de WhatsApp en tu sitio web, necesitarás seguir los pasos detallados a continuación. Este código permite a los visitantes de tu sitio web enviarte un mensaje directamente a través de WhatsApp al hacer clic en el botón.
Paso 1: Preparación
Asegúrate de tener acceso para editar el código HTML de tu sitio web. Esto puede ser a través de un editor de texto para archivos HTML estáticos, o mediante el editor de tu sistema de gestión de contenido (CMS) si usas plataformas como WordPress, Joomla, etc.
Paso 2: Código HTML
El fragmento de código que proporcionaste consta de varias partes:
1.- Enlace a FontAwesome: Esto es para usar el ícono de WhatsApp proporcionado por FontAwesome. Asegúrate de insertar la línea <link> en la sección <head> de tu HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
2.- Botón de WhatsApp: Este es el enlace que abrirá WhatsApp. Deberías reemplazar TELEFONO en el enlace https://wa.me/TELEFONO?text=Hola con tu número de teléfono en formato internacional (sin signos más, guiones o paréntesis). Por ejemplo, si tu número es +1 234 567 8900, debes escribirlo como 12345678900. Este código se coloca en el cuerpo de tu HTML (<body>).
<a href="https://wa.me/12345678900?text=Hola" class="float-wa" target="_blank">
<i class="fa fa-whatsapp" style="margin-top:16px;"></i>
</a>
3.- Estilos CSS: Los estilos definen la apariencia y posición del botón flotante. Puedes colocar el código CSS dentro de una etiqueta <style> en la sección <head> de tu HTML, o en un archivo CSS externo si prefieres mantener el CSS separado.
<style>
.float-wa{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
z-index:100;
}
</style>
Paso 3: Incorporación
- FontAwesome: Añade el enlace a FontAwesome en la sección <head> de tu página.
- Botón y Estilos CSS: Puedes colocar el enlace del botón y los estilos CSS donde creas que es más conveniente según tu estructura de HTML. Sin embargo, generalmente, los estilos van en la sección <head> y el botón en la parte del <body> donde desees que aparezca (usualmente al final del <body> para asegurar que se cargue después de todo el contenido).
Consideraciones Finales para el Botón Flotante de Whatsapp
- Verifica que tu número de teléfono esté correctamente formateado en el enlace para evitar problemas.
- Recuerda que el z-index del botón es alto (10000 y luego 100 en el código proporcionado, lo cual parece ser un error. Puedes usar 100 o un valor más alto si es necesario) para asegurar que el botón aparezca sobre otros elementos de la página.
- Puedes personalizar el mensaje predeterminado que aparece al iniciar un chat modificando el valor después de text= en la URL del botón.
- Prueba el botón en tu sitio web para asegurarte de que funcione como se espera y que sea visible en todas las páginas en las que deseas que aparezca.
Implementación del botón flotante de WhatsApp en WordPress
A continuación encontrarás las instrucciones paso a paso para agregar el botón flotante en WordPress.
- Instalar un Plugin de Personalización de CSS/JS:
- Desde el escritorio de WordPress, ve a Plugins > Añadir nuevo.
- Busca un plugin que permita añadir código HTML, CSS y JavaScript personalizado, como "Insert Headers and Footers" o "Custom CSS & JS".
- Instala y activa el plugin elegido.
- Agregar el Código:
- Ve a la configuración del plugin que acabas de instalar (usualmente bajo la sección de Ajustes).
- En la sección adecuada (puede ser encabezados para el enlace de FontAwesome y cuerpo del sitio para el botón y CSS), copia y pega el código proporcionado anteriormente. Recuerda reemplazar TELÉFONO con tu número de teléfono en formato internacional.
- Guardar Cambios:
- Guarda los cambios en la configuración del plugin.
- Visita tu sitio web para asegurarte de que el botón flotante de WhatsApp aparece y funciona correctamente.
- Notas Finales:
- En WordPress, el plugin exacto y los pasos pueden variar ligeramente dependiendo del plugin específico que elijas para añadir código personalizado.
- Siempre prueba tu sitio después de hacer cambios para asegurarte de que todo funcione como esperas.
Implementación del botón flotante de WhatsApp en Webflow
A continuación encontrarás las instrucciones paso a paso para agregar el botón flotante a través de Webflow sin necesidad de editar directamente el código HTML o CSS.
- Agregar Código Personalizado:
- En tu proyecto de Webflow, ve a tu Dashboard y selecciona el sitio en el que deseas trabajar.
- Accede a la configuración del sitio (Settings) y luego ve a la sección de Custom Code.
- Incluir FontAwesome y Estilos CSS:
- En la sección de "Head Code", copia y pega el enlace de FontAwesome y los estilos CSS proporcionados. Asegúrate de no incluir las etiquetas <style> para el CSS, ya que Webflow ya proporciona un área específica para CSS.
- Agregar el Botón de WhatsApp:
- Para agregar el botón de WhatsApp, necesitarás colocarlo en una página específica o en un símbolo que se use en varias páginas.
- Ve a la página o al símbolo donde deseas agregar el botón, entra en el modo de edición.
- Utiliza un elemento Embed (Incrustar) para agregar código HTML personalizado. Copia y pega el código del botón de WhatsApp, asegurándote de actualizar el número de teléfono.
- Publicar Cambios:
- Publica tu sitio para aplicar los cambios.
- Revisa tu sitio publicado para asegurarte de que el botón flotante de WhatsApp aparece correctamente.
Notas Finales
- En Webflow, al utilizar elementos Embed, asegúrate de que el código esté correctamente formateado y no olvides actualizar el número de teléfono.
- Siempre prueba tu sitio después de hacer cambios para asegurarte de que todo funcione como esperas.
Implementación del botón fijo de WhatsApp en sitio web (no flotante)
Para implementar un botón fijo de WhatsApp en tu sitio web, en lugar de uno flotante, puedes seguir una estructura simplificada del código que te proporcioné anteriormente, eliminando los estilos CSS que hacen que el botón sea flotante. Aquí te muestro cómo sería:
Código HTML para el Botón Fijo de WhatsApp
<a href="https://wa.me/12345678900?text=Hola" target="_blank" style="display:inline-block; background-color:#25d366; color:#FFF; padding:10px 20px; border-radius:5px; text-align:center; text-decoration:none; font-size:16px;">
<i class="fa fa-whatsapp"></i> Envíanos un mensaje
</a>
En este ejemplo, el botón es un enlace (<a> tag) con estilos directamente aplicados a él para darle apariencia de botón. Aquí están los pasos para aplicarlo:
- Personaliza el Número de Teléfono: Cambia 12345678900 en https://wa.me/12345678900?text=Hola por tu número de teléfono en formato internacional, sin incluir símbolos como "+".
- Personaliza el Mensaje Predeterminado: Cambia "Hola" en https://wa.me/12345678900?text=Hola por el mensaje predeterminado que desees que los visitantes envíen cuando hagan clic en el botón.
- Incorporación en tu Sitio Web:
- WordPress: Puedes agregar este código directamente en cualquier parte de tu sitio que permita HTML personalizado (por ejemplo, en un widget de texto personalizado, en una página o entrada usando el editor de bloques y agregando un bloque HTML personalizado).
- Webflow: Agrega un nuevo elemento Embed en la página donde deseas el botón y pega este código.
Ajustes Adicionales
- Estilos: El estilo se aplica directamente en la etiqueta con el atributo style. Puedes ajustar los valores de background-color, color, padding, border-radius, text-align, text-decoration, y font-size para que coincida con el diseño de tu sitio web.
- Icono de WhatsApp: Asegúrate de tener FontAwesome integrado en tu sitio para que el ícono de WhatsApp se muestre correctamente. Si no deseas usar FontAwesome, puedes omitir <i class="fa fa-whatsapp"></i> y simplemente tener el texto del botón, aunque el ícono ayuda a identificar rápidamente la funcionalidad del botón.
- Pruebas: Después de integrar el botón, visita tu sitio web y asegúrate de que el botón aparece correctamente y que el enlace funciona abriendo WhatsApp como se espera.
Este código proporciona una manera simple de agregar un botón de contacto de WhatsApp a tu sitio web sin que sea flotante, facilitando a los usuarios ponerse en contacto contigo directamente a través de WhatsApp.
¡Esperamos que encuentres útiles estas guías para agregar un botón de WhatsApp a tu sitio web!
