Botón de WhatsApp para tu sitio web: cómo crear el tuyo (con y sin código)

El visitante interesado que tiene que buscar el teléfono en el pie de página, copiarlo y abrir WhatsApp a mano no se convierte en lead — desiste en el camino. El botón de WhatsApp para tu sitio (ese flotante verde en la esquina de la pantalla) reduce el recorrido a un clic y es, para la mayoría de los negocios, el canal de conversión número 1 del sitio. Mira cómo crear el tuyo: con código listo, sin código en WordPress, o vía Google Tag Manager.

Antes del botón: el enlace

Todo botón de WhatsApp es, por debajo, un enlace con el formato wa.me/CODIGOPAISNUMERO?text=mensaje. Dos cuidados:

• Número con código de país, solo dígitos: wa.me/5531999998888
• Mensaje predefinido en ?text= con los espacios codificados — aquí es donde se rompe un enlace hecho a mano

La forma sin errores es generarlo en el generador de enlace de WhatsApp gratis de CRPRO: número + mensaje ("¡Hola! Vine por el sitio web y quiero un presupuesto") y el enlace sale listo, ya codificado.

Opción 1: código HTML listo (cualquier sitio)

Pega esto antes del </body> de tu sitio, cambiando el número y el mensaje:

<a href="https://wa.me/5531999998888?text=%C2%A1Hola!%20Vine%20por%20el%20sitio%20web"
   target="_blank" rel="noopener" aria-label="Hablar por 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,.25);">
  <svg viewBox="0 0 32 32" width="34" height="34" fill="#fff" aria-hidden="true">
    <path d="M16 3C9.4 3 4 8.3 4 14.9c0 2.1.6 4.1 1.6 5.9L4 29l8.4-1.6c1.7.9 3.6 1.4 5.6 1.4 6.6 0 12-5.3 12-11.9S22.6 3 16 3zm0 21.8c-1.8 0-3.5-.5-5-1.3l-.4-.2-5 1 1-4.8-.3-.4c-1-1.6-1.5-3.4-1.5-5.2 0-5.5 4.6-10 10.2-10s10.2 4.5 10.2 10-4.6 9.9-10.2 9.9zm5.6-7.4c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.6c.2-.2.2-.3.3-.6.1-.2 0-.4 0-.6-.1-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.1 1.3 3.3c.2.2 2.3 3.6 5.6 5 .8.3 1.4.5 1.9.7.8.2 1.5.2 2.1.1.6-.1 1.8-.7 2.1-1.5.3-.7.3-1.3.2-1.5-.1-.1-.3-.2-.6-.4z"/>
  </svg>
</a>

Listo: botón flotante, fijo en la esquina inferior derecha, funcionando en escritorio y móvil, sin depender de ningún servicio externo.

Opción 2: WordPress (sin código)

En WordPress, el camino de 5 minutos es un plugin: en el panel, Plugins → Añadir nuevo, busca "WhatsApp chat button" y elige uno bien valorado y actualizado. La configuración pide el número, el mensaje inicial y la posición del botón. Prefiere plugins que:

• Usen el enlace wa.me directo (sin pasar por un servidor de terceros)
• Permitan mensaje predefinido y horario de exhibición
• No carguen scripts pesados (el rendimiento también es SEO)

En constructores tipo Elementor, se puede hacer sin plugin: agrega un botón común, pega el enlace del generador y fija la posición con la clase "sticky".

Opción 3: Google Tag Manager (sin tocar el tema)

Si no puedes editar el sitio (tema bloqueado, TI lejano), inyecta el botón vía GTM:

1. Nueva etiqueta → HTML personalizado y pega el código de la Opción 1.
2. Activador: Todas las páginas (o solo las de producto/servicio).
3. Publica.

Bono de GTM: crea un activador de clic en el botón y envía el evento a Google Analytics/Ads como conversión — así sabes cuántos leads genera el sitio vía WhatsApp y puedes optimizar campañas para eso.

Buenas prácticas que aumentan la conversión

• Mensaje predefinido con contexto: "Vine por el sitio web y quiero un presupuesto" ya califica y ahorra la primera pregunta.
• Esquina inferior derecha, sin cubrir botones de compra en móvil.
• No abras un popup solo en cada página — una invitación agresiva arruina la experiencia; el botón quieto ya hace el trabajo.
• Página de destino del clic preparada: mensaje automático de saludo para que nadie caiga en el vacío, sobre todo fuera de horario — en el benchmark de CRPRO, el 20% de los contactos llega fuera del horario laboral.
• Mide: evento de clic en GTM/Analytics; sin ese dato, el botón es decoración.

El clic es el comienzo, no el final

El botón resuelve la llegada del lead. La venta ocurre después: quién responde, en cuánto tiempo, y si el contacto se convierte en embudo o en olvido. Al conectar el número a un CRM de WhatsApp, cada clic del sitio se convierte en un contacto con origen rastreado, cae en una cola de atención multiagente y puede ser respondido por IA en 24 segundos — contra 15 horas del flujo manual, según nuestro benchmark con empresas reales.

Próximos pasos:

• Genera tu enlace de WhatsApp con mensaje listo
• Crea un código QR para materiales impresos — el "botón" del mundo físico
• Pon el enlace también en Instagram

Preguntas frecuentes

¿Tengo que pagar algo para tener un botón de WhatsApp en el sitio? No. El enlace wa.me es oficial y gratuito, y el código de arriba es tuyo. Los plugins tienen versiones gratuitas suficientes.

¿El botón funciona con WhatsApp Business y la API oficial? Sí — el formato del enlace es el mismo para WhatsApp personal, Business y números conectados a la API oficial.

¿El botón de WhatsApp perjudica el SEO del sitio? El botón en sí, no. Lo que perjudica son los scripts pesados de terceros — por eso el código puro (Opción 1) es la opción más liviana.

¿Cómo sé cuántos clics genera el botón? Configura un evento de clic en Google Tag Manager apuntando a Analytics. En CRM como CRPRO, el contacto ya llega con el origen "sitio web" marcado.

¿Puedo tener botones con números distintos por página? Sí — un número para ventas en la página de producto, otro para soporte en la central de ayuda. Con atención multiagente, un solo número resuelve todo con colas y etiquetas.