Un botón de WhatsApp en tu web elimina el paso más lento entre una visita y una conversación: encontrar tu número, guardarlo y escribir un primer mensaje. Un toque y WhatsApp se abre con tu chat listo. La buena noticia es que no necesitas un plugin, una suscripción ni nada de JavaScript, un botón de WhatsApp es simplemente un enlace normal vestido con un poco de estilo. Esta guía muestra primero la versión en HTML puro y luego la ruta más rápida en WordPress, Shopify y los grandes creadores de sitios.
Paso 1: consigue tu enlace click-to-chat
Todo botón de WhatsApp, en cualquier plataforma, apunta a lo mismo: un enlace click-to-chat wa.me. Contiene tu número de teléfono y, opcionalmente, un mensaje prellenado. El formato es así:
https://wa.me/15551234567?text=Hola%21%20Tengo%20una%20pregunta%20sobre%20sus%20servicios
El número debe ir en formato internacional completo, solo dígitos, con el código de país primero, sin signo más, espacios ni guiones, y el mensaje debe ir codificado como URL. La forma más fácil de acertar con ambos es el Generador de Enlaces de WhatsApp gratuito: escribe tu mensaje, mira la vista previa en vivo y copia el enlace terminado. Para la sintaxis completa, consulta nuestra guía completa de wa.me.
HTML puro: un botón que puedes pegar en cualquier sitio
En su forma más simple, el botón es una etiqueta de enlace con tu URL. Funciona en cualquier página HTML, generador de sitios estáticos o caja de «HTML personalizado» de un creador de webs:
<a href="https://wa.me/15551234567?text=Hola%21" target="_blank" rel="noopener">Chatea con nosotros por WhatsApp</a>
Para que parezca un botón de WhatsApp de verdad y no un enlace de texto, añade estilos en línea, verde WhatsApp (#25D366), texto blanco, esquinas redondeadas y algo de relleno:
<a href="https://wa.me/15551234567?text=Hola%21" target="_blank" rel="noopener" style="display:inline-block;background:#25D366;color:#fff;padding:12px 24px;border-radius:50px;font-weight:600;text-decoration:none;">💬 Chatear por WhatsApp</a>
Para la popular «burbuja» flotante de la esquina inferior, envuelve el mismo enlace en un estilo de posición fija: position:fixed, desplazamientos bottom y right de unos 20px, y un fondo circular alrededor del icono de WhatsApp. Sigue siendo solo un enlace, sin scripts, nada que ralentice la página.
WordPress: sin plugins
- En el editor de bloques, añade un bloque de HTML personalizado (o un bloque de Botones) donde quieras el botón.
- Pega la etiqueta de enlace con estilos de arriba, con tu propio enlace wa.me.
- Para un botón en todo el sitio, añade el mismo HTML a un área de widgets (Apariencia → Widgets) o a la plantilla del pie de página de tu tema.
Plugins como «Click to Chat» añaden botones flotantes, reglas de horario comercial y selectores de agente. Están bien si quieres esos extras, pero si solo necesitas el botón, el bloque de HTML hace el mismo trabajo con cero scripts añadidos y nada nuevo que mantener actualizado.
Shopify
- Ve a Tienda online → Temas → Personalizar.
- Añade una sección de Liquid personalizado o HTML personalizado (la mayoría de los temas modernos tienen una) y pega el código del botón.
- Para mostrarlo en todas las páginas, edita la sección de pie de página del tema, o añade el fragmento a theme.liquid justo antes de la etiqueta de cierre del body.
Wix, Squarespace y otros creadores
Todos los grandes creadores tienen un elemento de «insertar HTML» o «código», pega ahí la misma etiqueta de enlace. Muchos también tienen un botón nativo de WhatsApp en sus elementos sociales o de contacto; esos solo piden el número de teléfono, así que si quieres un mensaje prellenado, usa la inserción de HTML con tu enlace generado.
¿Quieres que las visitas compartan tu página en lugar de escribirte?
Un botón de chat inicia una conversación contigo. Si lo que realmente quieres es que las visitas envíen tu página a sus contactos (una petición, un producto, un artículo) usa el Widget de Compartir de WhatsApp gratuito. Obtiene el título, la descripción y la miniatura de tu página y produce una tarjeta de compartir lista para insertar con un botón de «Compartir en WhatsApp», en una versión para webs y otra que sobrevive a Gmail y Outlook para campañas de email. Si la tarjeta llega al chat con un título equivocado o sin imagen, mira por qué falla la vista previa de enlaces en WhatsApp.
Mide los clics
Un clic de WhatsApp sale de tu sitio, así que tu analítica no verá la conversación, pero puedes contar los clics. Añade una etiqueta UTM a la URL de la página que mencionas en el mensaje, o registra el clic del botón como evento en Google Analytics / Tag Manager (un simple activador de clic en enlaces que contengan wa.me). Si el botón aparece en varios lugares, dale a cada uno un mensaje prellenado distinto para saber de dónde vino cada chat con solo leer su primera línea.
Preguntas frecuentes
¿Necesito WhatsApp Business para un botón en la web?
No. Un enlace wa.me funciona tanto con WhatsApp personal como con WhatsApp Business. Una cuenta gratuita de WhatsApp Business sí añade extras útiles detrás del mismo botón, un perfil de empresa, mensajes de ausencia y respuestas rápidas.
¿Funcionará el botón en ordenador?
Sí. En un móvil el enlace abre la aplicación de WhatsApp; en un ordenador abre WhatsApp Web o la aplicación de escritorio si la visita tiene la sesión iniciada. El mismo enlace sirve para ambos.
¿Puedo usar el logotipo oficial de WhatsApp en el botón?
Meta publica directrices de marca con recursos de logotipo aprobados exactamente para este uso. Cíñete al glifo oficial, no lo deformes ni le cambies el color, y no des a entender que WhatsApp respalda tu negocio.