Generador de botón flotante de WhatsApp para sitios web

Qué hace el código

El fragmento generado tiene dos partes: un enlace común (<a>) con el ícono de WhatsApp dibujado en SVG y un bloque <style> con el aspecto del botón. No hay JavaScript, ni bibliotecas, ni scripts cargados desde otro servidor. Por eso el botón no vuelve lento el sitio, no instala cookies y no envía datos de los visitantes a nadie: es solo un enlace con estilo.

El enlace detrás del botón

El botón apunta a un enlace https://wa.me/, el mismo que arma nuestro generador de enlace de WhatsApp. El número se convierte a formato internacional solo con dígitos: la herramienta quita espacios, paréntesis, guiones y el signo +, y agrega el código de país de Brasil, 55, cuando el número tiene 11 dígitos o menos (el código de área brasileño, el DDD, más el número). El mensaje opcional se codifica con encodeURIComponent y va después de ?text=, para que la conversación se abra con el texto ya escrito. El enlace se abre en una pestaña nueva (target="_blank" con rel="noopener").

Las opciones

• Lado: esquina inferior derecha (predeterminado) o izquierda, siempre a 20 px del borde lateral.
• Color: cualquier color hexadecimal (#25d366 es el predeterminado). Si el valor no es un hexadecimal válido, el código vuelve al verde predeterminado. El ícono y el texto son blancos; elija un fondo lo bastante oscuro para mantener el contraste.
• Texto: opcional. Sin texto, el botón es un círculo de 56 px solo con el ícono; con texto (por ejemplo, “Escríbanos”), se convierte en una píldora con ícono y etiqueta. El texto también se usa como aria-label para lectores de pantalla; sin él, el nombre accesible es “WhatsApp”.
• Distancia inferior: de 0 a 200 px desde el borde inferior (predeterminado 20 px). Auméntela si el botón tapa un aviso de cookies, un chat o la barra de navegación del celular.

El botón queda por encima del contenido (z-index: 9999), muestra un contorno visible al recibir foco con el teclado y se oculta al imprimir (@media print), para no aparecer en páginas impresas ni en PDF.

Dónde pegarlo

• HTML simple: pegue el fragmento justo antes de </body> en cada página (o en el archivo de pie de página compartido).
• WordPress: use un bloque “HTML personalizado” en un área que aparezca en todas las páginas, como el pie del tema, o un plugin para insertar código en el pie de página. Algunos temas tienen un campo propio para ese código.
• Wix: en Configuración del sitio → Avanzado → Código personalizado, agregue el fragmento en “Body – final” para todas las páginas. El elemento “Insertar HTML” funciona dentro de un marco (iframe) y dejaría el botón atrapado en él.

Si su página ya usa una clase llamada wa-float, cámbiele el nombre en el fragmento para evitar conflictos. Después de publicar, pruebe en el celular: toque el botón y verifique que la conversación se abra con el número correcto.

Esta herramienta no tiene vínculo con WhatsApp ni con Meta. WhatsApp es una marca registrada de WhatsApp LLC.

Una pastelería con el número ficticio +55 41 99876-5432 quiere el botón en la esquina izquierda, porque a la derecha ya muestra un aviso de entregas. Al escribir (41) 99876-5432 y el mensaje “¡Hola! Quisiera hacer un pedido.”, el enlace del botón empieza con https://wa.me/5541998765432?text= seguido del mensaje codificado. El color elegido es #128c7e, un verde más oscuro que contrasta bien con el texto blanco; la etiqueta es “Escríbanos” y la distancia inferior, 90 px, para no tapar la barra del celular. En el CSS generado aparecen left:20px;bottom:90px y background:#128c7e. El fragmento completo pesa poco más de 1 KB y se pega antes de </body>.