HTML del widget de WhatsApp para copiar y pegar, desde el enlace wa.me básico hasta un botón flotante completo, más lo que el código puro te deja construir por tu cuenta.
Si buscabas el HTML real, aquí está, sin necesidad de registro:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>Reemplaza 15551234567 con tu número en formato internacional completo: código de país primero, sin signo más, sin espacios, sin cero inicial. Ese enlace por sí solo es suficiente para abrir un chat de WhatsApp con tu negocio. También es la respuesta honesta completa a “dame el código HTML del widget”, porque todo lo que sigue a partir de aquí es tú (o un generador) construyendo las partes que esa línea no cubre.
Un visitante llega al enlace sin nada escrito. Agrega el parámetro text para que haya un mensaje esperando en el cuadro cuando se abra el chat:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>El mensaje tiene que estar codificado en URL: %20 es un espacio, %2C es una coma, %27 es un apóstrofo. Escribe primero la oración que quieres, luego pásala por cualquier codificador de URL antes de pegarla en el valor de text, ya que un espacio o signo de puntuación sin codificar en medio de la cadena de consulta romperá el enlace en algunos navegadores.
Un enlace de texto no es lo que la mayoría de la gente quiere decir con “widget de WhatsApp”. El botón de esquina es CSS sobre ese mismo enlace:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>Esta versión evita un archivo de icono aparte al incrustar el glifo de teléfono/chat como SVG, así que es genuinamente un bloque autocontenido: pégalo antes de </body> y no hay nada más que subir. Aun así deja cuatro cosas para que las manejes a mano, que es donde el generador real se gana su lugar.
Móvil y escritorio no se comportan de la misma manera, y nada en este fragmento controla eso. Haz clic en un enlace wa.me en un teléfono con WhatsApp instalado y abre la aplicación directamente. Si no hay aplicación instalada, envía al visitante a la tienda de aplicaciones en su lugar, no hay mensaje alternativo de respaldo ni método de contacto alterno que puedas configurar desde el enlace mismo. En un navegador de escritorio, abre web.whatsapp.com en una pestaña nueva, lo cual solo funciona si el visitante ya inició sesión en WhatsApp Web en ese navegador, de lo contrario se queda mirando un código QR sin contexto de por qué. Los tres resultados provienen del mismo href. No puedes detectar cuál está por suceder ni interceptarlo con HTML puro.
El mensaje pre-rellenado vive en la URL, no en un campo de formulario. Cámbialo y vuelves a codificar a mano una nueva cadena, encontrar cada página donde está pegado el enlace, y reemplazarlo ahí también si no tienes una plantilla compartida.
No hay un archivo de icono para cambiar sin editar la ruta SVG a mano, y no hay forma de reposicionar, redimensionar o recolorear el botón sin tocar el bloque de estilo en línea directamente, línea por línea.
Nada de esto captura un lead antes de que se abra el chat. El enlace (o el botón) va directo a WhatsApp en el momento en que se hace clic. Si quieres un nombre y una razón de contacto antes de que comience la conversación, eso es un formulario aparte que tendrías que construir, conectar, y de alguna manera pasar al parámetro text tú mismo.
El Generador de Widget de Chat de WhatsApp es una herramienta gratuita que convierte ese mismo puñado de configuraciones en una sola etiqueta de script en lugar de un bloque de CSS que tienes que mantener. Establece tu número, elige un color, define la posición y los desplazamientos, escribe un saludo, y opcionalmente activa un formulario previo al chat (una pregunta corta, con correo electrónico o teléfono marcados como obligatorios o no) que recopila contexto antes de que se abra siquiera la ventana de WhatsApp. La herramienta genera esto:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>Cada configuración es un atributo data- etiquetado en una línea, así que cambiar el saludo o mover el botón a la otra esquina significa volver a copiar la etiqueta desde el formulario, no buscar en un archivo CSS. El icono, la lógica de posicionamiento, el manejo de enlaces profundos para móvil versus escritorio, y el formulario previo al chat viven todos en el script alojado al que apunta la etiqueta, que es lo que el HTML puro de arriba no puede hacer por sí solo sin que tú lo escribas.
Si estás pegando un fragmento generado y quieres saber qué controla cada línea antes de cambiarla a mano, esto es lo que acepta la etiqueta:
| Atributo | Controla |
|---|---|
data-widget-id | ID único emitido por el generador, no lo edites |
data-whatsapp-number | Número de destino, formato internacional, sin + |
data-color | Fondo del botón, cualquier valor hexadecimal |
data-position-vertical | top o bottom |
data-position-horizontal | left o right |
data-offset-vertical / data-offset-horizontal | Distancia en píxeles desde ese borde |
data-z-index | Orden de apilamiento, súbelo si otro elemento fijo cubre el botón |
data-greeting | Texto del mensaje pre-rellenado, sin necesidad de codificación URL manual |
data-prechat | true para mostrar un formulario corto antes de que se abra el chat |
data-prechat-title / data-prechat-description / data-prechat-question | Texto mostrado en el formulario previo al chat |
Tanto el HTML puro como la etiqueta de script generada van en el mismo lugar: algún sitio que se renderice en cada página, idealmente justo antes de </body>.
theme.liquid, justo encima de </body>, a través de Online Store → Themes → Edit Code.¿El enlace HTML puro requiere una cuenta de WhatsApp Business?
No. Un número de WhatsApp personal funciona con un enlace wa.me de la misma manera que un número Business. Las funciones específicas de Business, como un catálogo o respuestas automatizadas, no forman parte del enlace en sí.
¿Por qué mi botón muestra una imagen rota en lugar de un icono?
Eso sucede cuando el HTML hace referencia a un archivo de icono externo (<img src="/whatsapp-icon.svg">) que no se ha subido a esa ruta. La versión SVG en línea de arriba evita esto por completo, ya que el icono está escrito directamente en el HTML.
¿Puedo poner el HTML del widget dentro de una etiqueta <head> en su lugar?
Técnicamente la etiqueta de anclaje en sí necesita renderizarse en el <body>, ya que el contenido de <head> no se muestra. Los scripts sí pueden cargarse desde <head>, pero colocar el fragmento justo antes de </body> evita el bloqueo de renderizado y es el patrón que la mayoría de los constructores de sitios esperan.
¿Hay un límite de cuántos widgets de WhatsApp puedo agregar a una página? Nada te impide pegar dos, pero dos botones flotantes apilados en la misma esquina normalmente parece un error en lugar de una función. Si necesitas dos números (ventas y soporte, por ejemplo), dale a cada uno una posición distinta en lugar de superponerlos.
¿Funciona esto igual en Squarespace? El panel de Inyección de Código de Squarespace (bajo Settings → Advanced) acepta cualquiera de las dos versiones de la misma manera que el bloque HTML personalizado de WordPress, la inyección en el pie de página lo aplica en todo el sitio desde un solo lugar.
El HTML literal para un widget de WhatsApp es una etiqueta <a href="https://wa.me/...">, y ahora la tienes. Convertir eso en el botón flotante, personalizado y captador de leads que la gente suele imaginar significa o bien escribir y mantener tú mismo el CSS y los casos límite de enlaces profundos, o dejar que el Generador de Widget de Chat de WhatsApp genere la etiqueta de script terminada en un solo pegado, gratis, sin necesidad de cuenta.
Agrega la extensión de Chrome y transforma cómo gestionas las conversaciones de WhatsApp para tu negocio.