¿Cómo se pone un botón de WhatsApp en una página web?
Un botón de WhatsApp es un link que abre un chat con tu número. Para ponerlo en tu sitio sigue cuatro pasos: crea el link wa.me con tu número y un mensaje ya escrito, ponlo en un botón visible, cambia el mensaje según la página para saber desde dónde te escriben y mide cada clic como evento en tu analítica.
Para partir no necesitas plugins pesados ni pagar por un widget: basta un link bien armado. Esta guía explica cómo hacerlo en WordPress, Shopify y sitios propios, cómo medirlo y en qué momento el botón deja de ser suficiente.
Paso 1: arma el link wa.me
El formato es https://wa.me/ seguido de tu número en formato internacional, sin el signo más, sin espacios ni guiones. Para un celular chileno es 56, luego el 9 y los ocho dígitos: https://wa.me/56912345678. Para que aparezca un mensaje ya escrito, se agrega ?text= y el texto codificado, donde cada espacio pasa a ser %20.
Un ejemplo completo: https://wa.me/56912345678?text=Hola%2C%20quiero%20cotizar. Funciona con WhatsApp, con WhatsApp Business y con números conectados a la API oficial. En el celular abre la app; en el computador, WhatsApp Web o la aplicación de escritorio.
Para no equivocarte con el formato ni con la codificación, usa nuestro generador de link de WhatsApp: escribes el número y el mensaje, y te entrega el link listo para copiar y probar. Tu número y tu mensaje no salen de tu navegador.
Paso 2: elige el tipo de botón y dónde va
Hay tres ubicaciones que funcionan, y puedes combinarlas:
- Botón flotante: fijo en una esquina inferior y visible en todas las páginas. Es el más común y el que más se ve en el celular.
- Botón dentro del contenido: junto a un servicio, al final de una sección o al lado del formulario de contacto, con un texto que diga qué pasa al tocarlo, como "Cotizar por WhatsApp".
- Botón en la ficha de producto: al lado del botón de compra, para quien tiene una duda antes de pagar, con el nombre del producto ya escrito en el mensaje.
En el celular, revisa que el botón flotante no tape el botón de compra, el aviso de cookies ni el menú. Y si no atiendes todo el día, dilo cerca del botón, por ejemplo: "Respondemos de lunes a sábado".
Paso 3: instálalo en tu sitio
La forma de instalarlo depende de cómo está hecho tu sitio. En todos los casos, prueba en el celular y en el computador antes de darlo por listo:
- WordPress: para un botón dentro del contenido, usa el bloque Botón del editor y pega tu link. Para uno flotante, usa un plugin liviano o agrega el código en el pie del tema. Instala lo mínimo: cada plugin suma peso y mantención.
- Shopify: agrega el botón o el link desde el editor del tema, en una sección o en el pie de página, o con una aplicación de su tienda de apps. Si vas a editar el código del tema, duplícalo antes como respaldo.
- Constructores de sitios: casi todos tienen un elemento de botón o de ícono al que le asignas un link. Pega ahí tu link wa.me y configúralo para abrir en una pestaña nueva.
- Sitio propio o a medida: basta un enlace con el link wa.me, un ícono de WhatsApp y unas líneas de estilo para dejarlo fijo en la esquina. Agrégale una etiqueta accesible, como "Escríbenos por WhatsApp", para los lectores de pantalla.
Evita los widgets que cargan scripts pesados de terceros solo para mostrar un ícono: pueden hacer más lenta tu página, y la velocidad pesa en la experiencia de quien te visita. Un link simple no pesa casi nada.
Paso 4: un mensaje prellenado por página
El mismo "Hola, quiero información" en todo el sitio obliga a tu equipo a preguntar de nuevo qué necesita cada persona. Si el mensaje cambia según la página, el chat parte con contexto y, de paso, sabes desde dónde llegó. Suma un código corto al final para que tu equipo o tu CRM lo lean sin esfuerzo:
| Página | Mensaje prellenado |
|---|---|
| Inicio | Hola, quiero información sobre sus servicios (WEB-INICIO) |
| Servicio de limpieza facial | Hola, quiero agendar una limpieza facial (WEB-FACIAL) |
| Ficha de producto | Hola, me interesa el sofá Modelo Ejemplo en gris (WEB-SOFA-GRIS) |
| Página de una comuna | Hola, necesito una visita técnica en Los Ángeles (WEB-LA) |
| Contacto | Hola, quiero hablar con un ejecutivo (WEB-CONTACTO) |
Si tu sitio tiene muchas páginas, no hace falta escribir cada link a mano: un pequeño script puede armar el mensaje con el título de la página o el nombre del producto. Recuerda que la persona puede borrar el texto antes de enviarlo, así que el código ayuda, pero no es una medición perfecta.
Paso 5: mide los clics y los chats
Un botón que no se mide es una suposición. Lo mínimo es registrar cada clic como evento en Google Analytics 4. La forma más ordenada es con Google Tag Manager: un activador para los clics en enlaces cuya URL contiene wa.me o api.whatsapp.com, y una etiqueta que envía un evento, por ejemplo clic_whatsapp, con la página desde donde se hizo el clic.
Después marca ese evento como evento clave en Analytics para verlo en tus informes y, si haces publicidad, impórtalo en Google Ads o envíalo a Meta como contacto. Así sabes qué páginas y qué campañas generan conversaciones.
Pero un clic no es una venta. Para cerrar el círculo, el código del mensaje tiene que quedar registrado en tu CRM junto al contacto, y la venta, cuando ocurra, debe volver a tus plataformas de anuncios. Ese recorrido completo está en la guía de medición de campañas que terminan en WhatsApp.
Guía: medir campañas que terminan en WhatsApp Dashboards de gestión
Errores comunes con el botón de WhatsApp
Revisa que tu botón no caiga en estos errores:
- Usar el celular personal de alguien del equipo en vez de un número de la empresa.
- Escribir el número con el signo más, con espacios o con un cero adelante, y que el link no abra.
- Un botón flotante que tapa el botón de compra o el menú en el celular.
- El mismo mensaje genérico en todas las páginas.
- Medir solo visitas, sin clics ni chats.
- Poner el botón y no responder a tiempo: quien escribe y espera horas se va con otro.
Cuándo el botón ya no basta
El botón trae conversaciones; responderlas sigue siendo trabajo de tu equipo. Hay señales claras de que llegó el momento del siguiente paso: los mensajes de la noche se responden al otro día, el equipo pasa el día contestando las mismas preguntas, se pierden chats entre varias personas o no sabes cuántas conversaciones terminaron en venta.
Ahí conviene un agente de IA conectado a la API oficial de WhatsApp, o un chat con IA en tu propio sitio, que responda al instante con tu información, califique, agende o cotice y pase a tu equipo los casos listos, con el origen de cada conversación registrado en el CRM. En IAsistente (Tecnologías de Marketing SpA) lo hacemos junto con el sitio web, si lo necesitas. Todo es a medida; valor cerrado después del diagnóstico.
Chatbot para página web Chatbot de WhatsApp con IA Diseño de páginas web