Botón flotante de WhatsApp para sitio web

Botón flotante de WhatsApp para sitio web: para qué sirve

Ingresa el WhatsApp con código de área y el mensaje que el cliente va a enviar. Elige la esquina de la pantalla, el tamaño, el color, la distancia desde el borde, la burbuja de texto y si el botón pulsa al abrir la página. La vista previa aparece en la esquina de esta página.

El código es solo HTML y CSS, con el ícono en SVG y el enlace wa.me. La burbuja desaparece en pantallas pequeñas y la animación respeta a quienes prefieren menos movimiento.

Cómo usar

1. Ingresa el número con código de área y el mensaje.
2. Ajusta posición, color, tamaño y burbuja.
3. Copia el código y pégalo antes de </body> del sitio web.

Cuándo usar

• Sitios de comercio y prestadores de servicios.
• Landing pages de campañas.
• Sitios en WordPress, Wix o hechos a mano.

Preguntas frecuentes

¿Dónde pego el código?

Antes del cierre </body>, en todas las páginas (o en el pie del tema). En WordPress, usa un plugin para insertar código en el pie o el editor de tema. En constructores como Wix y Webflow, usa el campo de código personalizado del sitio.

¿Necesita WhatsApp Business?

No. El enlace wa.me funciona con cualquier cuenta de WhatsApp. El número va con el código del país (55) y el código de área, solo con números.

¿El botón hace lento el sitio web?

No. El código es solo HTML y CSS con el ícono en SVG, sin librerías ni llamadas externas.

¿Y si quiero más de un botón?

Usa otra posición (izquierda y derecha) y genera el código de nuevo con otro número. Cambia el id wa-flutuante en el segundo código para no repetirlo.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas y funcionan directo en tu navegador.

Herramientas similares