Diseño web

Botón de WhatsApp en página web: cómo ponerlo sin errores

Cómo poner un botón de WhatsApp en su página web: el enlace wa.me correcto, el número según el país, el mensaje prellenado y el error que lo deja mudo.

21 de septiembre de 202611 min
Botón de WhatsApp en página web: cómo ponerlo sin errores

Lo esencial:

  • El enlace del botón de WhatsApp en su página web es https://wa.me/ seguido de su número en formato internacional, escrito solo con dígitos: sin el signo + y sin ceros iniciales.
  • En Argentina va un 9 después del 54 y se quita el 15. Para México, pruebe el enlace con y sin el 1 después del 52.
  • Un ícono verde sin texto no le dice nada a un lector de pantalla. El botón necesita palabras.

Una paciente en Medellín entra desde el celular a la página web de un consultorio, toca el botón de WhatsApp para pedir una cita y la aplicación le contesta que el número no es válido. No insiste: vuelve a Google y le escribe al consultorio siguiente. Detrás de ese error suele haber un detalle del enlace: un signo + que sobra, un cero de más, el 9 que falta en un número argentino.

Poner un botón de WhatsApp en su página web toma unos minutos si el enlace está bien armado. El formato es https://wa.me/ seguido de su número completo en formato internacional, escrito solo con dígitos, y ese enlace funciona en cualquier botón, sea de WordPress o de Wix. En una muestra pequeña de 13 sitios que revisamos en septiembre de 2026, de negocios de México, Colombia, Argentina, Chile y Perú, 8 tenían un enlace de WhatsApp en la página de inicio.

Aquí partimos de que la página ya existe. Si todavía duda de si la necesita, empiece por página web o redes sociales: qué conviene.

Botón de WhatsApp en página web: el enlace en cuatro pasos

WhatsApp llama a esta función «clic para chatear» y explica el formato en su ayuda oficial sobre clic para chatear.

  1. Escriba su número de WhatsApp como se marcaría desde otro país: código de país y número nacional completo.
  2. Quite todo lo que no sea dígito, empezando por el signo + y siguiendo por espacios y guiones.
  3. Elimine también el cero inicial o el prefijo de larga distancia que se marca dentro del país.
  4. Pegue el resultado después de https://wa.me/ y pruebe el enlace desde un celular.

Con un celular de Medellín, 300 123 4567, el enlace queda https://wa.me/573001234567. La ayuda de WhatsApp lo muestra con un contraejemplo que conviene recordar: https://wa.me/1XXXXXXXXXX funciona, https://wa.me/+001-(XXX)XXXXXXX no. El número, eso sí, necesita una cuenta de WhatsApp activa, que puede ser un teléfono fijo registrado en WhatsApp Business.

El número en el enlace de WhatsApp según el país

Los pasos valen en toda la región, pero cada país tiene su particularidad. En la tabla, las X reemplazan los dígitos de su celular.

PaísCódigoQué cuidarAsí queda el enlace
México5210 dígitos; vea la nota sobre el 1wa.me/52XXXXXXXXXX
Colombia57celular de 10 dígitos que empieza por 3wa.me/573XXXXXXXXX
Argentina549 después del 54, área sin 0, sin 15wa.me/549XXXXXXXXXX
Chile56celular de 9 dígitos que empieza por 9wa.me/569XXXXXXXX
Perú51celular de 9 dígitos que empieza por 9wa.me/519XXXXXXXX

El enlace de WhatsApp para celulares de Argentina

La regla argentina está escrita sin rodeos en la página de WhatsApp sobre el formato internacional de número de teléfono: todos los números argentinos llevan un 9 entre el código de país y el código de área, y el 15 se elimina, de modo que el número final tiene 13 dígitos. Un estudio jurídico en Rosario con el celular 0341 15 123-4567 quita el 0 del código de área y el 15. Con el 9 delante, su enlace queda https://wa.me/5493411234567.

El número de México y el 1 después del 52

En México hay una contradicción que preferimos no esconder. La misma página de WhatsApp indica que los números mexicanos llevan un 1 después del +52, pero desde agosto de 2019 México marca a 10 dígitos, y ese 1 ya no se usa para llamar a un celular desde el extranjero. No pudimos confirmar cuál de las dos reglas aplica WhatsApp hoy.

Por eso, haga la prueba desde un celular que no tenga su número guardado: primero https://wa.me/52 más sus 10 dígitos y, si no abre su chat, https://wa.me/521 más los mismos 10. Quédese con el que funcione.

Un mensaje prellenado en el enlace de WhatsApp

WhatsApp permite agregar al enlace un texto que aparece ya escrito en el chat: el cliente puede cambiarlo, pero no tiene que pensar cómo empezar. Se agrega al final del enlace con ?text= y el mensaje codificado para URL.

Un «Hola, vengo de su página web» le dice a usted de dónde llegó la consulta. Si cada página de servicio lleva su propio mensaje, como «Quiero cotizar un cambio de frenos», sabrá además qué página la generó, sin instalar ninguna herramienta de medición. En un restaurante, ese mensaje puede empezar el pedido; cómo se ordena junto al menú lo vemos en página web para restaurante.

Codificar significa que ciertos caracteres, como los espacios o las tildes, se escriben con códigos:

CarácterSe escribe
espacio%20
coma%2C
¿%C2%BF
?%3F
á, é, í, ó, ú%C3%A1, %C3%A9, %C3%AD, %C3%B3, %C3%BA
ñ%C3%B1

Así, el enlace con «Hola, vengo de su página web» queda https://wa.me/573001234567?text=Hola%2C%20vengo%20de%20su%20p%C3%A1gina%20web. Ojo: https://wa.me/?text=, sin número, no abre un chat con usted sino la lista de contactos del cliente, y sirve para un botón de «compartir».

Dónde poner el botón de WhatsApp en su página web

El botón funciona donde el cliente ya decidió escribir, y eso pasa en tres lugares. No se excluyen, y lo normal es combinar dos.

Arriba, en el encabezado de la página

En el celular, el encabezado es lo primero que se ve y lo único que no hay que buscar. Un botón corto con el texto «WhatsApp», al lado del teléfono, sirve a quien llega con prisa: el que tiene el auto parado, la mascota enferma, la fuga en el baño. Si su negocio vive de urgencias, este es el lugar más importante.

El botón flotante, sin tapar nada

El botón redondo en la esquina inferior derecha acompaña al visitante mientras baja por la página. Tiene que cumplir dos condiciones: no tapar nada, ni el aviso de cookies ni el botón de compra, y no hacer lenta la página. Hay plugins que cargan varios archivos para mostrar un solo ícono, cuando un enlace simple no pesa casi nada. Si duda de cómo queda en una pantalla chica, la prueba de cinco pasos de página web responsive se lo muestra.

En la página de contacto, con el número a la vista

WhatsApp menciona las páginas con información de contacto entre los lugares para su botón. Ahí conviene juntar el enlace de WhatsApp y el de llamada con el número escrito como texto, para quien entra desde la computadora y quiere anotarlo.

Fuera de su página, el mismo número puede ir en su perfil de negocio de Google. Según la ayuda de Google, un perfil verificado puede agregar WhatsApp en la sección de chat de sus datos de contacto, y entonces aparece un botón para chatear en la búsqueda y en Google Maps. Cómo dejar ese perfil completo lo contamos en cómo aparecer en Google Maps.

El botón en WordPress, Wix y otros constructores

Para un botón simple no hace falta ningún plugin. Todo constructor de páginas tiene un elemento de botón con un campo para el enlace, y ahí va el wa.me. WordPress acepta el enlace directamente en el bloque de botones, y en Wix basta con elegir una dirección web como destino del botón. Shopify o Tiendanube funcionan igual.

Un plugin tiene sentido si quiere el botón flotante sin tocar código. Elija uno con actualizaciones recientes y pruebe el enlace que genera, que al final es el mismo wa.me. Si alguien le maneja la página, este es el código:

<a href="https://wa.me/573001234567?text=Hola%2C%20vengo%20de%20su%20p%C3%A1gina%20web">
  Escríbanos por WhatsApp
</a>

Un enlace tel: para quien prefiere llamar

Hay clientes que prefieren llamar, y para ellos el número tiene que ser un enlace que marque al tocarlo: tel:+573001234567. A diferencia de wa.me, aquí el + sí va, y con el código de país el enlace funciona también para quien llama desde el extranjero.

<a href="tel:+573001234567">Llamar al 300 123 4567</a>

En la muestra de 13 sitios que mencionamos al principio, 12 tenían el número como enlace que se puede tocar, con tel: o con WhatsApp, pero solo 8 ofrecían el chat. Tocar para contactar ya era lo normal en esa muestra; el enlace de WhatsApp, todavía no. Cuando tenga los dos, escriba «Llamar» y «WhatsApp» en vez de poner dos íconos parecidos.

Accesibilidad: un botón que se entienda sin verlo

Quien usa un lector de pantalla y llega a un ícono verde sin texto escucha «enlace» o una dirección llena de números, sin saber que ahí se abre WhatsApp. Lo más simple es poner texto visible junto al ícono, como «Escríbanos por WhatsApp». Si el diseño exige solo el ícono, el enlace necesita un nombre con aria-label y la imagen un texto alternativo, como hace el propio ejemplo de código de WhatsApp.

Las pautas de accesibilidad WCAG 2.2 piden que el área que se toca mida al menos 24 por 24 píxeles, y para un pulgar conviene más. Con el color hay una trampa: texto blanco sobre el verde claro de WhatsApp (#25D366) tiene un contraste de apenas 2 a 1, y esas pautas piden 4.5 a 1 para texto normal. Use texto oscuro sobre ese verde, o un verde más oscuro detrás del texto blanco.

Pruebe el enlace antes de publicarlo

Un enlace mal armado no avisa: se ve igual que uno bueno hasta que alguien lo toca. Antes de dar el trabajo por terminado, revise esto:

  1. Desde un celular que no tenga su número guardado, el botón abre un chat con su negocio.
  2. En una computadora, ofrece seguir en WhatsApp Web o en la aplicación de escritorio.
  3. El mensaje prellenado llega con tildes y signos correctos.
  4. En una pantalla chica, el botón no tapa texto ni otros botones.
  5. Tras cada actualización del plugin, el botón sigue funcionando.

Para lo que rodea al botón está nuestro análisis web gratuito. En unos 10 segundos y sin registro revisa 24 puntos de su página de inicio, entre ellos si muestra teléfono o WhatsApp y si el número se puede tocar desde el celular.

Lo que pasa después del clic en WhatsApp

El botón solo abre la puerta; la respuesta rápida hace el resto, y cómo se ordena esa conversación hasta el pago está en cómo vender por WhatsApp. Y cuando el trabajo termina bien, ese mismo chat es el mejor momento para pedir una reseña, porque el cliente tiene la conversación abierta y le basta tocar un enlace. Cómo pedirla sin incomodar lo explicamos en cómo conseguir reseñas en Google.

Revise hoy el botón de WhatsApp en su página web con su propio celular: si el número estaba mal, arreglarlo toma cinco minutos. Y si descubre que a la página le faltan más cosas que el botón, en una videollamada gratuita de un cuarto de hora las repasamos con usted.

Preguntas frecuentes

¿Cómo pongo un enlace de WhatsApp en mi página web?

Arme el enlace https://wa.me/ seguido de su número en formato internacional, solo con dígitos, y péguelo en el campo de enlace de un botón o de un texto. Para un celular colombiano queda, por ejemplo, https://wa.me/573001234567. Después pruébelo desde un celular que no tenga su número guardado.

¿Necesito WhatsApp Business para poner el botón de WhatsApp?

No. El enlace wa.me funciona con cualquier cuenta de WhatsApp activa. WhatsApp Business agrega herramientas como el mensaje de ausencia o el catálogo, y genera sola un enlace directo que también sirve para el botón, pero no es un requisito.

¿Por qué el enlace de WhatsApp dice que el número no es válido?

Revise primero el formato: un + o un cero inicial que quedó en el enlace, o el 9 que falta en un número argentino. También pasa cuando ese número no tiene una cuenta de WhatsApp activa.

¿Cómo pongo el botón de WhatsApp en WordPress o Wix?

En los dos basta con un botón normal enlazado a una dirección web, donde se pega el enlace wa.me. Un plugin solo hace falta si quiere un botón flotante sin tocar código.

  • #whatsapp
  • #enlace-de-whatsapp
  • #accesibilidad
  • #pymes

Seguir leyendo

¿Quiere que lo revisemos con usted?

15 minutos por video, sin costo. Miramos su sitio y su perfil de Google, y usted se lleva los puntos concretos.

Agendar la conversación