El botón de WhatsApp de tu web son cuatro líneas de HTML

Antes de explicar nada, el código:

<a href="https://wa.me/14155550142?text=Hola%2C%20vengo%20de%20la%20web"
   target="_blank"
   rel="noopener"
   class="boton-whatsapp">
  Escríbenos por WhatsApp
</a>

Eso es un botón de WhatsApp. Pégalo en tu página, cambia el número por el tuyo y funciona. No lleva JavaScript, no carga nada de fuera, no depende de ningún servicio y no se va a romper cuando alguien actualice un plugin.

Merece la pena decirlo claro porque hay mucha página que te pide el correo a cambio de esas cuatro líneas: un botón de WhatsApp es un enlace. Todo lo demás es estilo.

Anatomía del enlace

La dirección tiene tres partes y solo tres:

https://wa.me/14155550142?text=Hola%2C%20vengo%20de%20la%20web
└── dominio ─┘└ número ─┘└───────── mensaje opcional ────────┘

wa.me es el dominio oficial de WhatsApp para abrir conversaciones desde un enlace. En el teléfono salta directo a la aplicación con el chat abierto. En escritorio abre WhatsApp Web, o la aplicación de escritorio si está instalada.

El número identifica la cuenta con la que se abre esa conversación. El ?text= rellena el primer mensaje, pero no lo envía: el visitante lo ve escrito en la caja y decide si le da a enviar. Esa diferencia importa, porque significa que el mensaje precargado no es un mensaje que tú mandas, es una sugerencia que la otra persona puede borrar.

Error número uno: el formato del número

Es, con diferencia, el motivo por el que la mayoría de estos botones no funcionan. El número va en formato internacional y crudo: solo dígitos.

• Sin el símbolo +
• Sin espacios, guiones ni paréntesis
• Con el prefijo de país siempre, aunque tu visitante sea de tu mismo país
• Sin el cero de la marcación nacional, si tu país lo usa

Un número que en una tarjeta se lee +1 415 555 0142 se escribe 14155550142. Y estos son los cuatro fallos que se ven una y otra vez:

Y dos casos que se salen de la regla y conviene tener presentes:

El cero de marcación nacional. En bastantes países se marca un 0 delante del número cuando llamas desde dentro del país. Ese cero no va en formato internacional y hay que quitarlo. Ojo, que no es universal: los fijos italianos sí lo conservan.

El 9 de Argentina. Para escribir a un número móvil de Argentina, WhatsApp espera un 9 entre el prefijo 54 y el número. Sin ese 9 el enlace abre una conversación con un número que no existe, y es un despiste que cuesta tardes enteras de depuración.

Por último, una condición que no se puede saltar: ese número tiene que ser una cuenta de WhatsApp real y activa. Si no lo es, el enlace abre la aplicación y muestra un aviso de que el número no está en WhatsApp. Antes de publicar el botón, ábrelo tú desde un teléfono que no tenga ese contacto guardado.

Error número dos: el mensaje precargado sin codificar

El mensaje viaja dentro de una dirección web, así que hay caracteres que no puede llevar tal cual. Los espacios son el caso evidente, pero no el que rompe cosas de verdad.

Los que rompen de verdad son &, #, ? y +. Dentro de una URL los tres primeros tienen significado propio: & separa parámetros, # empieza un ancla, ? abre la consulta. Si aparecen en tu mensaje sin codificar, el mensaje se corta ahí y el visitante recibe media frase.

Un ejemplo real. Este mensaje:

Hola, ¿me pasas precios & stock? #urgente

Si solo escapas los espacios, lo que llega a WhatsApp es esto:

Hola, ¿me pasas precios

Todo lo que va detrás del & se pierde.

El + es el cuarto y el más silencioso, porque no corta nada: lo cambia. En una dirección web el + es la forma antigua de escribir un espacio, así que «Precio final: 100€ + IVA» llega como «Precio final: 100€ IVA», con el signo convertido en un espacio. Nadie se da cuenta hasta que un cliente pregunta qué significa eso.

La solución para los cuatro es la misma: codificar el mensaje entero como componente de URL. En el navegador es una función:

const numero = '14155550142'
const mensaje = 'Hola, ¿me pasas precios & stock? #urgente'
const enlace = `https://wa.me/${numero}?text=${encodeURIComponent(mensaje)}`

encodeURIComponent escapa los tres caracteres peligrosos. Su prima encodeURI no lo hace, y esa confusión es exactamente la que deja botones cortando frases por la mitad en webs por lo demás bien hechas.

Si no vas a generar el enlace con código y prefieres escribirlo a mano, la regla práctica es más simple: en el mensaje precargado no uses &, #, ? ni +. Escribe «y» en lugar de «&», «más» en lugar de «+», y quítale el signo de interrogación final. Nadie va a notar la diferencia.

Si prefieres no pensar en esto, nuestro generador de enlaces de WhatsApp hace la codificación por ti y te devuelve la dirección lista para pegar.

El botón flotante

Lo que la gente suele querer no es un enlace en medio del texto, sino el botón verde que se queda pegado en una esquina. Eso son unas cuantas declaraciones de CSS y ninguna línea de JavaScript:

.boton-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

Dos avisos por experiencia:

El z-index tiene que ganarle a tu cabecera pegajosa y a tu aviso de cookies, pero no al modal de tu carrito. Si te pasas de número, el botón se queda flotando encima de ventanas que deberían taparlo.

Y en pantallas pequeñas, bottom: 20px cae justo donde muchas tiendas ponen el botón de comprar. Si tu web tiene una barra de acción inferior, sube el botón por encima de ella con una media query o acabarás tapando lo que te da dinero.

Si quieres el botón con el logotipo de WhatsApp dentro, la animación de pulso y una vista previa antes de publicarlo, el generador de botón de chat te devuelve ese mismo HTML montado.

Lo que un enlace no puede hacer

Aquí conviene ser honestos, porque es donde el consejo gratuito se acaba.

No sabe de dónde vino nadie. wa.me no te reenvía parámetros de campaña ni identificadores. La conversación te llega en WhatsApp sin ninguna pista de qué página estaba mirando esa persona. Hay un truco que sí funciona: pon un mensaje precargado distinto en cada sección. «Hola, pregunto por el plan Pro» y «Hola, vengo de la página de precios» te dicen el origen en la primera línea del chat, gratis y sin ninguna herramienta.

Abre una conversación en un teléfono. Si el botón lo pulsan cincuenta personas al día y hay tres personas en tu equipo que deberían contestarlas, el problema ya no es el enlace: es que WhatsApp en un teléfono es de una sola persona. Ahí es donde entra una plataforma como PulpoChat, con el mismo número contestado entre varios, sin perder el historial cuando alguien se va de vacaciones o deja la empresa.

No contesta a las tres de la mañana. El enlace lleva a tu bandeja; lo que pase después depende de que haya alguien. Si quieres una primera respuesta automática fuera de horario, eso ya no es HTML.

Resumen

Copia el bloque del principio, sustituye el número por el tuyo en formato internacional y solo con dígitos, y evita &, #, ? y + en el mensaje precargado. Con eso tienes un botón de WhatsApp funcionando en tu web, sin instalar nada y sin depender de nadie.

Y si en algún momento ese botón te trae más conversaciones de las que una persona puede llevar, prueba PulpoChat gratis siete días y contesta ese mismo número entre todo el equipo.