Un botón flotante de "Chatea por WhatsApp" convierte a los visitantes de tu web en conversaciones. La buena noticia: puedes añadir uno a casi cualquier sitio sin escribir código de verdad. Aquí tienes tres enfoques, desde el más sencillo de todos hasta un fragmento ligero para copiar y pegar.
Primero: ten listo tu enlace de WhatsApp
Todos los métodos siguientes necesitan un enlace wa.me. Si aún no tienes uno, crea tu enlace de WhatsApp gratis: introduce tu país, número y un mensaje pre-rellenado como "¡Hola! Estoy en su sitio web y tengo una pregunta." Copia la URL terminada; la pegarás en el método que elijas.
Método 1: Un botón de enlace simple (el verdadero "sin código")
Si tu creador de sitios te deja añadir un botón o enlace (todos lo hacen), no necesitas ningún widget:
- Añade un elemento de botón donde quieras: encabezado, pie de página o una barra fija.
- Configura su enlace/URL con tu enlace
wa.me. - Configúralo para que se abra en una pestaña nueva.
- Ponle la etiqueta "Chatea por WhatsApp" y, si puedes, añade el icono verde de WhatsApp.
Esto funciona en Wix, Squarespace, Webflow, WordPress, Shopify, Carrd; en todo. No es una burbuja flotante, pero es de riesgo cero y toma 60 segundos.
Método 2: Un servicio de widget sin código
Servicios como WATI, Chaty, Chaport o Tidio te dan una burbuja flotante alojada que activas desde un panel:
- Regístrate e introduce tu número de WhatsApp y el mensaje pre-rellenado.
- Personaliza el color, la posición y el saludo de la burbuja.
- Copia la línea de
<script>que te dan. - Pégala en el área de "código personalizado / pie de página" de tu sitio (todos los creadores tienen una).
Ventajas: una burbuja pulida y animada con texto de bienvenida y horarios. Desventajas: es una dependencia de terceros, puede cargar JavaScript adicional y algunos planes cuestan dinero. Para la mayoría de sitios pequeños, el plan gratuito es más que suficiente.
Método 3: Un botón flotante para copiar y pegar (sin servicio, sin plugin)
¿Quieres un botón flotante sin registrarte en nada? Pega esto en el área de HTML personalizado / pie de página de tu sitio y cambia el número:
<a href="https://wa.me/15551234567?text=Hola!%20Tengo%20una%20pregunta."
target="_blank" rel="noopener"
style="position:fixed;bottom:20px;right:20px;z-index:9999;
background:#25D366;color:#fff;padding:14px 18px;border-radius:50px;
font-family:sans-serif;text-decoration:none;
box-shadow:0 4px 12px rgba(0,0,0,.15);">
💬 Chatea por WhatsApp
</a>
Esto es un enlace normal con estilo para flotar en la esquina inferior derecha. Sin JavaScript, nada que se rompa, sin cuota mensual. Cambia 15551234567 por tu número y ajusta el mensaje.
Dónde colocar el botón
- La esquina inferior derecha es la convención universal: los usuarios esperan el chat ahí.
- Una barra fija en el pie de página en móvil funciona bien para tiendas.
- Dentro de la sección de contacto como un botón principal grande.
Evita cubrir contenido importante o apilarlo encima de un aviso de cookies.
Consejos de diseño que aumentan los clics
- Usa el verde oficial (
#25D366) y el icono de WhatsApp para que sea reconocible al instante. - Mantén la etiqueta orientada a la acción: "Chatea con nosotros" o "Chatea por WhatsApp" funciona mejor que "Contacto".
- Añade una sutil burbuja de saludo ("¿Preguntas? ¡Escríbenos!") que aparezca tras unos segundos; la mayoría de los servicios de widgets lo hacen automáticamente.
- Muestra el horario comercial si no puedes responder al instante, para gestionar las expectativas.
Pre-rellena siempre un mensaje
Sea cual sea el método que elijas, incluye un mensaje pre-rellenado con ?text=. Un chat vacío hace dudar a los visitantes; una primera línea lista ("¡Hola! Estoy en su sitio web…") hace que empiecen a hablar. Aprende más en cómo añadir un mensaje pre-rellenado.
Prueba en dispositivos reales
Antes de darlo por terminado:
- En un teléfono: toca el botón; la app de WhatsApp debería abrirse con tu mensaje listo.
- En escritorio: debería abrir WhatsApp Web (los usuarios deben tener sesión iniciada).
- Revisa la ubicación tanto en móvil como en escritorio; un botón que se ve perfecto en escritorio puede cubrir tu menú en móvil.
Número de empresa vs. personal
Apunta el botón a un número de WhatsApp Business, no a tu personal. Business te da un perfil profesional, un mensaje de bienvenida y respuestas rápidas, todo valioso una vez que empiecen a llegar los chats de tu web. Consulta WhatsApp Business vs. personal.
Resumen
La vía más rápida: crea tu enlace de WhatsApp gratis y luego añádelo como un botón normal (Método 1) o pega el fragmento del botón flotante (Método 3). Sin plugins, sin más código que copiar y pegar, y sin cuota mensual.