Cómo agregar un widget de chat de WhatsApp gratuito a cualquier sitio web en pocos minutos: el enfoque de enlace wa.me simple y un generador que produce un fragmento personalizable sin código.
Hay dos formas honestas de agregar un widget de chat de WhatsApp a un sitio web sin pagar por uno: pega un enlace wa.me simple y dale estilo tú mismo, o usa un generador que te entrega un fragmento terminado y personalizable. Ambos son genuinamente gratuitos y ambos toman pocos minutos. Solo te dejan en lugares muy diferentes dentro de seis meses.
Esto te guía a través de ambos, comenzando con el enlace simple para que sepas exactamente qué estás descartando cuando lo omites.
La versión absolutamente mínima es una línea de HTML:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>Reemplaza 15551234567 con tu número en formato internacional completo, sin signo más, sin espacios, sin cero inicial. El parámetro text es un mensaje pre-rellenado, codificado en URL, así que %20 es un espacio y %2C es una coma. Haz clic y WhatsApp se abre con ese mensaje ya escrito en el cuadro, esperando a que el visitante presione enviar.
wa.me es el enlace corto de Meta para esto, así que el comportamiento del otro lado es consistente: en un teléfono, abre la aplicación de WhatsApp directamente si está instalada, o envía al visitante a la tienda de aplicaciones si no lo está. En un navegador de escritorio sin aplicación instalada, abre web.whatsapp.com en una nueva pestaña en su lugar. No tienes que crear esa detección tú mismo, que es la única parte de este enfoque que está genuinamente resuelta para ti.
Todo lo demás no. Ese enlace único es solo texto azul subrayado en cualquier lugar donde lo coloques. Para convertirlo en el botón flotante en la esquina inferior que la gente realmente quiere decir cuando dice “widget de chat de WhatsApp”, estás escribiendo el CSS tú mismo:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>Eso funciona, pero ahora también necesitas un archivo de icono, un z-index lo suficientemente alto para situarse por encima de tu banner de cookies y cualquier modal sin cubrir tu propia navegación en dispositivos móviles, y un plan para qué sucede cuando alguien quiere que el texto del mensaje cambie el próximo mes, lo que significa abrir este mismo bloque de marcado nuevamente, donde sea que esté pegado, en cada página o plantilla que lo tenga.
El Generador de Widget de Chat de WhatsApp hace el mismo trabajo del enlace anterior, más el estilo, el posicionamiento y el icono, y devuelve una etiqueta de script en lugar de un bloque de CSS personalizado del que eres responsable de mantener. Es gratuito, no requiere cuenta, y no toca la API de WhatsApp Business, así que no hay paso de verificación antes de que puedas usarlo.
Aquí está el procedimiento real:
#25D366) es el predeterminado, pero el campo acepta cualquier valor hexadecimal si deseas que coincida con el color de marca de tu sitio en su lugar.text en el enlace simple, pero editable desde el formulario en lugar de una cadena codificada en URL.Mientras completas el formulario, una vista previa en vivo del botón se renderiza en la página, y el panel de código junto a él se actualiza en tiempo real con el fragmento terminado:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>Haz clic en Copiar, pega esa etiqueta única en cualquier lugar antes de la etiqueta de cierre </body> en tu sitio, y el widget está en línea. Nada más necesita ser cargado, ningún archivo de icono, sin hoja de estilo separada. Cada configuración del formulario (color, posición, desplazamientos, bienvenida, ventana emergente) se codifica como un atributo data- en esa etiqueta única, así que todo viaja como un pegado.
Los dos resultados se ven similares en la superficie, un botón en la esquina que abre WhatsApp, pero envejecen de manera diferente.
Con la versión hecha a mano, cada configuración es un valor enterrado dentro de estilos en línea o un archivo CSS separado. Cambiar el saludo significa encontrar y editar el parámetro text en una cadena codificada en URL. Mover el botón porque un nuevo banner de cookies ahora se superpone significa re-editar el CSS en cada página o plantilla donde lo pegaste, y si olvidaste una, esa página silenciosamente tiene un widget de aspecto roto hasta que alguien lo note. Nada de esto falla ruidosamente, solo se desincroniza página por página.
El fragmento generado mantiene cada una de esas configuraciones como un atributo etiquetado en una línea que puedes re-copiar del formulario en segundos, luego buscar y reemplazar en todo tu sitio si no estás usando un pie de página o incluir compartido. Y porque la lógica real del botón vive en el archivo de script alojado al que apunta la etiqueta, no en código que pegaste, correcciones de errores y mejoras de comportamiento del widget en sí se envían sin que toques tu sitio de nuevo.
La mecánica es la misma en todas partes: obtén el fragmento en algún lugar que se renderice en cada página, idealmente justo antes de </body>.
theme.liquid, justo encima de la etiqueta de cierre </body>, a través de Online Store → Temas → Editar Código.Cada uno de estos tiene sus propios aspectos peculiares que merece una mirada más larga por su cuenta, cubriremos WordPress con más detalle por separado, pero el paso de pegado en sí es idéntico en todas partes: una etiqueta de script, un lugar, aplicado a cada página a la vez.
Carga el sitio en una ventana de incógnito para que los estilos en caché no oculten un problema real, y verifica el botón tanto en escritorio como en un teléfono real, no solo una ventana del navegador redimensionada. Haz clic en él una vez desde cada uno y confirma que abre WhatsApp (la aplicación en dispositivos móviles, web.whatsapp.com en escritorio) con tu número y mensaje de bienvenida ya rellenados. Luego desplázate por la página con banners de cookies o elementos pegajosos visibles, la falla más común en este punto es un conflicto de z-index, donde el widget se renderiza detrás de otro elemento de posición fija en lugar de encima de él.
¿Es esto realmente gratuito, o hay un truco? El generador en sí es gratuito sin cuenta requerida. El script del widget al que apunta está alojado y servido sin costo. Si más tarde instalas la extensión de Chrome de The Chat Quotient para gestionar las conversaciones que llegan a través del widget, eso tiene su propio plan gratuito también, pero es un paso separado y opcional, no un requisito para usar el widget.
¿Es un widget de WhatsApp lo mismo que WhatsApp Web?
No, y esto es una confusión común. WhatsApp Web (web.whatsapp.com) es la interfaz que usas para leer y enviar mensajes de WhatsApp desde un navegador. Un elemento web de widget de chat de WhatsApp es el pequeño botón que agregas a tu propio sitio que, cuando se hace clic, abre un chat, ya sea en la aplicación de WhatsApp en dispositivos móviles o en WhatsApp Web en un escritorio que no tiene la aplicación de escritorio instalada. El widget es algo que incrustas; WhatsApp Web es donde la conversación resultante sucede para abrirse.
¿Funciona el widget si un visitante no tiene WhatsApp instalado? En dispositivos móviles, hacer clic sin la aplicación instalada envía al visitante a su tienda de aplicaciones para instalar WhatsApp primero. No hay forma de evitar ese paso, ya que el enlace solo sabe cómo entregar a WhatsApp en sí, no cómo sustituir otro canal de mensajería.
¿Puedo tener más de un número de WhatsApp, como ventas y soporte, en el mismo widget? No en un botón. El widget está construido alrededor de un único número de WhatsApp por instancia. Si necesitas dos puntos de entrada, agregarías dos widgets con diferentes posiciones y saludos, aunque en ese punto una página de contacto dedicada con ambos listados por separado es generalmente más clara para los visitantes que dos botones flotantes apilados en la misma esquina.
¿Necesito saber cómo codificar para usar el generador? No. Cada configuración es un campo de formulario, y la única cosa que pegas es la etiqueta de script única que produce, el mismo paso de copiar y pegar sin importar la plataforma en la que se ejecute tu sitio.
Un enlace wa.me es genuinamente todo lo que necesitas si estás cómodo escribiendo y manteniendo tu propio CSS y no te importa volver a visitar ese código cada vez que algo necesite cambiar. El Generador de Widget de Chat de WhatsApp produce el mismo resultado, un botón flotante que abre un chat de WhatsApp pre-rellenado, sin el CSS, el archivo de icono, o el mantenimiento que viene con hacerlo a mano, y sigue siendo gratuito.
Agrega la extensión de Chrome y transforma cómo gestionas las conversaciones de WhatsApp para tu negocio.