Cómo poner un botón de WhatsApp en tu página web (paso a paso)
Guía paso a paso para poner el botón de WhatsApp en tu página: enlace wa.me con +52, código listo para copiar, WordPress, Wix, Shopify y costos en pesos.
Para poner un botón de WhatsApp en tu página web solo necesitas un enlace con este formato: https://wa.me/52 + tus 10 dígitos. Ese enlace lo pegas en un botón de tu sitio y listo. No pagas nada y lo haces en unos 5 minutos. Abajo te explico cómo armar el enlace bien, cómo agregar un mensaje ya escrito y cómo instalarlo en WordPress, Wix, Shopify o HTML. También va el código listo para copiar.
Paso 1: arma tu enlace de WhatsApp con el formato de México
Aquí está el error más común. El enlace debe llevar el código de país sin el signo +, sin espacios, sin guiones y sin paréntesis.
- Escribe https://wa.me/
- Agrega 52, que es el código de México.
- Agrega tu número a 10 dígitos, con lada incluida. Por ejemplo, en Monterrey: 81 1234 5678.
Resultado: https://wa.me/528112345678 (número de ejemplo).
¿Y el famoso 521? Antes los celulares mexicanos se marcaban con un 1 extra después del 52. Desde que cambió el sistema de marcación ya no hace falta. Usa 52 + 10 dígitos. Si por alguna razón tu enlace no abre el chat correcto, prueba desde otro celular antes de cambiar nada.
Errores que vemos seguido:
- Poner el número con espacios o guiones: wa.me/52 81-1234-5678 no funciona.
- Olvidar el 52: el enlace manda a un número de otro país o marca error.
- Poner el 044 o 045 de antes. Esos prefijos ya no existen.
- Usar el número del conmutador, que no tiene WhatsApp.
Paso 2: agrega un mensaje que ya aparezca escrito
Cuando el cliente abre el chat, puede encontrar un texto listo para enviar. Eso baja la fricción y te dice de dónde viene. Se agrega así: ?text= y luego tu mensaje codificado para internet.
Ejemplo: https://wa.me/528112345678?text=Hola%2C%20quiero%20cotizar
Las reglas básicas para codificar el texto:
| Carácter | Se escribe así |
|---|---|
| Espacio | %20 |
| Coma | %2C |
| Signo de interrogación (?) | %3F |
| á / é / í / ó / ú | %C3%A1 / %C3%A9 / %C3%AD / %C3%B3 / %C3%BA |
| ñ | %C3%B1 |
Tip útil: usa un mensaje distinto por página. Por ejemplo, en tu página de precios: "Hola, vi sus precios y quiero cotizar". Así sabes qué página te trae más mensajes sin instalar nada.
Paso 3: instálalo según tu plataforma
HTML puro (código listo para copiar)
Este código crea un botón verde flotante en la esquina inferior derecha. Cambia el número y el mensaje, y pégalo justo antes de la etiqueta de cierre del body de tu sitio:
<a href="https://wa.me/528112345678?text=Hola%2C%20quiero%20informes" target="_blank" rel="noopener" aria-label="Escríbenos por WhatsApp" style="position:fixed;bottom:20px;right:20px;background:#25D366;color:#fff;padding:14px 20px;border-radius:50px;font-family:sans-serif;font-weight:bold;text-decoration:none;z-index:9999;box-shadow:0 2px 8px rgba(0,0,0,.3);">WhatsApp</a>
No carga archivos externos, así que no hace lenta tu página.
WordPress
- Ve a Plugins, luego Añadir nuevo, y busca "WhatsApp button" o "botón flotante WhatsApp".
- Elige uno con buenas reseñas y actualizado hace poco.
- Actívalo, escribe tu número con 52 + 10 dígitos y tu mensaje.
- Elige posición y si se muestra en móvil, escritorio o ambos.
Si no quieres plugins, puedes pegar el código de HTML de arriba en el área de "código en el pie de página" que traen muchos temas.
Wix
- Botón fijo: Agregar, Botón, y en el enlace eliges "Dirección web" y pegas tu enlace wa.me. Para que flote, haz clic derecho y activa "Fijar en pantalla".
- Con código: en el panel ve a Configuración, Código personalizado, y pega el código HTML para que cargue en todas las páginas.
Shopify
- Con app: en la tienda de apps hay varias de botón de WhatsApp con versión gratis.
- Sin app: Tienda online, Temas, Editar código, abre theme.liquid y pega el código HTML antes del cierre del body. Revisa que no tape el botón de "Agregar al carrito" en celular.
¿Botón flotante o fijo? Dónde se ve mejor
Casi siempre conviene el flotante, porque acompaña al visitante mientras baja por la página. Pero ponlo con cuidado:
- Móvil: esquina inferior derecha, donde llega el pulgar. Tamaño de unos 56 a 60 píxeles.
- No tapes nada: ni el carrito, ni el aviso de cookies, ni el menú. Pruébalo en un celular real.
- Además del flotante: pon un botón fijo en el encabezado y otro al final de cada servicio. Mucha gente decide al terminar de leer.
- Texto claro: "Cotiza por WhatsApp" funciona mejor que solo un ícono, sobre todo si tu cliente es mayor.
Horario: si no contestas de noche, dilo. Agrega "Respondemos de lunes a viernes de 9 a 7" junto al botón. En WhatsApp Business (gratis) activa el mensaje de ausencia para que nadie se quede en visto.
Varios asesores y cuánto cuesta cada opción
Si atiendes con más de una persona, tienes tres caminos:
- Varios enlaces: un botón para Ventas y otro para Soporte, cada uno con su número. Gratis.
- Widget con varios agentes: muestra fotos y nombres de tus asesores. Suele ser de pago.
- API oficial de WhatsApp: un solo número atendido por varias personas desde una bandeja compartida o un CRM. También permite bots. Cobra por conversación o mensaje, según el tipo.
Rangos aproximados en el mercado mexicano:
| Opción | Costo aproximado | Para quién |
|---|---|---|
| Enlace wa.me + botón propio | $0 | Cualquier negocio que quiera empezar hoy |
| Plugin o app gratis | $0 | WordPress o Shopify, un solo número |
| Widget premium | Unos $90 a $300 MXN al mes | Varios asesores, horarios, diseño |
| Que alguien te lo instale | Unos $300 a $1,500 MXN una vez | Si no quieres meterle mano al sitio |
| API oficial + bandeja o CRM | Cobro por conversación + la plataforma o desarrollo | Equipos con mucho volumen o que quieren bot |
Si ya recibes tantos mensajes que se pierden, el botón no es el problema. Lo que te falta es ordenar la atención. Ahí entra un CRM o un agente con IA. Puedes ver ejemplos en nuestros sistemas y demos en vivo.
Mide cuántos clics te da el botón
Un botón que no mides es un botón que no puedes mejorar. Dos formas sencillas:
- Google Analytics 4: con la medición mejorada activada, los clics a enlaces que salen de tu sitio se registran como "clics salientes". Filtra por el dominio wa.me y verás cuántos tocaron el botón.
- Mensaje distinto por página: como vimos arriba, cada mensaje te dice de dónde llegó el cliente.
Si haces anuncios, esto es clave para saber cuánto te cuesta cada contacto. Si quieres que alguien lo configure y lo lea por ti, revisa nuestro servicio de marketing y SEO.
Lista final antes de publicar
- El enlace lleva 52 + 10 dígitos, sin espacios.
- Lo probaste en celular y en computadora, y abre el chat correcto.
- El mensaje ya escrito aparece bien, con acentos.
- El botón no tapa el carrito, el menú ni otros botones.
- Se abre en pestaña nueva en escritorio.
- El horario de atención está visible y tienes mensaje de ausencia.
- Los clics se están midiendo.
- Tu página sigue cargando rápido después de instalarlo.
¿Prefieres que lo hagamos nosotros?
Si ya tienes página, con esta guía puedes hacerlo tú mismo. Si todavía no tienes sitio, o quieres uno que convierta visitas en mensajes, en FRIYOSOFT hacemos landing pages desde $7,900 MXN y sitios web desde $19,900, con el botón de WhatsApp y la medición incluidos. Entregamos en 1 a 3 semanas, con precio cerrado por escrito. Puedes ver todo en precios o en servicios.
Escríbenos por WhatsApp al 81 8254 2186 o a [email protected] y pide tu diagnóstico gratis de 45 minutos. Sin compromiso.