Botón de WhatsApp para sitio web: código, plugin o widget

SendSeven Team, Editorial Team

Integrar un botón de WhatsApp en el sitio web: código HTML para copiar, el enlace wa.me correcto con acentos y eñes, caminos para WordPress, Shopify y Wix, el comportamiento en el ordenador, RGPD, medición y qué pasa después del clic. Con demo en vivo.

A muchos clientes les gusta más escribir que llamar, y WhatsApp ya lo tienen en el móvil. Un botón de WhatsApp en el sitio web convierte esa costumbre en un canal de contacto: un clic y el chat con tu empresa está abierto. Montar el botón lleva pocos minutos. Este artículo muestra el código para copiar, el camino en WordPress, Shopify y Wix, y los puntos donde un botón falla en la práctica: en el ordenador, en la protección de datos, en la medición y en la bandeja de entrada.

¿Qué es un botón de WhatsApp para el sitio web?

Un botón de WhatsApp es un botón o enlace de tu sitio web que abre directamente un chat de WhatsApp con el número de tu empresa. Técnicamente se basa en el Click-to-Chat de WhatsApp: un enlace a wa.me con tu número y, si quieres, un texto que ya aparece escrito en el campo de entrada. En el móvil, el enlace abre la app de WhatsApp; en el ordenador, WhatsApp Web o la app de escritorio.

El visitante no tiene que teclear ni guardar tu número. Ve el texto rellenado, lo completa o lo envía tal cual, y tú recibes en la bandeja de entrada una consulta con su número de teléfono. Que el botón sea verde, del color de tu marca o una burbuja redonda en el borde de la pantalla es solo diseño. El enlace que hay debajo es siempre el mismo.

Demo en vivo

Pruébalo: estos botones abren un chat real

Cada botón de aquí es un enlace wa.me de lo más normal hacia nuestro soporte. En el móvil se abre la app de WhatsApp; en el ordenador, WhatsApp Web o la app de escritorio.

1. Clásico, en verde WhatsApp

Preguntar por WhatsApp

Llama la atención al instante: todo el mundo conoce ese color.

2. Con el color de tu marca

Iniciar chat en WhatsApp

El botón lleva tu color y el logotipo de WhatsApp se mantiene sin cambios.

3. Flotante, abajo a la derecha

www.tu-sitio-web.es

¿Dudas? Escríbenos

Se queda visible al hacer scroll, en todas las páginas.

4. Código QR para el ordenador

¿Estás en el ordenador? Escanea el código con la cámara de tu móvil y el chat se abrirá directamente en tu app de WhatsApp.

Todas las variantes rellenan el mismo mensaje: Hola, SendSeven: tengo algunas preguntas más sobre los botones de WhatsApp para mi sitio web. No se envía nada hasta que pulses Enviar. Solo entonces vemos tu número, y nuestro equipo de soporte te responde en el chat.

¿Cómo se construye bien el enlace wa.me?

El enlace se compone de https://wa.me/, tu número internacional completo sin el signo más, sin cero inicial y sin espacios ni caracteres especiales, y, opcionalmente, de ?text= con el mensaje codificado como URL. Así lo describe WhatsApp en la ayuda oficial sobre Click-to-Chat.

De +49 (0) 821 7898-8853 sale así 4982178988853: prefijo de país 49, y desaparecen el cero inicial del prefijo local, los paréntesis, los guiones y los espacios. El enlace terminado es https://wa.me/4982178988853.

El mensaje rellenado tiene que estar codificado como URL. Las letras, los dígitos, el guion, el punto, el guion bajo y la tilde se quedan como están y todo lo demás pasa a ser un código con porcentaje. Los acentos y la eñe fallan con facilidad, porque en UTF-8 ocupan dos bytes:

Un ejemplo de nuestra demo en vivo: «más» se convierte en m%C3%A1s. El enlace completo a nuestro soporte tiene este aspecto:

https://wa.me/4982178988853?text=Hola%2C%20SendSeven%3A%20tengo%20algunas%20preguntas%20m%C3%A1s%20sobre%20los%20botones%20de%20WhatsApp%20para%20mi%20sitio%20web.

Los errores más comunes son un signo más o un cero justo después del prefijo de país (wa.me/+49… o wa.me/490170…), los espacios sin codificar y un ampersand o una almohadilla en el texto, que cortan el resto del mensaje. Si falta el número por completo, WhatsApp solo abre la selección de contactos. Si prefieres no codificar nada a mano, nuestro generador de enlaces de WhatsApp gratuito crea el enlace junto con el código QR.

¿Qué opciones hay para integrar un botón de WhatsApp?

Hay tres vías: el enlace wa.me como código HTML propio, un plugin ya hecho para tu sistema web o un widget de chat que conecta WhatsApp con otros canales y con una bandeja de entrada. El código es lo más ligero, el plugin no exige saber programar y el widget compensa en cuanto responde más de una persona.

Para un solo botón en la página de contacto basta el código HTML. Un plugin compensa si quieres mostrar el botón en todas las páginas sin saber programar. Un widget es el camino correcto cuando las consultas de varios canales deben llegar a un mismo equipo.

¿Cómo es el código HTML de un botón de WhatsApp?

El botón de WhatsApp más sencillo es un enlace HTML normal a wa.me con target="_blank", para que tu página siga abierta en el navegador. En el ejemplo aparece el número de nuestro soporte. Sustitúyelo por el tuyo y adapta el texto:

<a href="https://wa.me/4982178988853?text=Hola%2C%20tengo%20una%20pregunta%20sobre%20vuestra%20oferta."
   target="_blank" rel="noopener">
  Preguntar por WhatsApp
</a>

Para un botón flotante que aparezca abajo a la derecha en todas las páginas hace falta algo de CSS. El código va una sola vez antes de la etiqueta de cierre </body> de tu plantilla:

<a href="https://wa.me/4982178988853?text=Hola%2C%20tengo%20una%20pregunta."
   class="wa-float" target="_blank" rel="noopener"
   aria-label="Iniciar chat en WhatsApp">
  <img src="/imagenes/whatsapp-icon.svg" alt="" width="28" height="28">
</a>

<style>
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  }
</style>

Tres detalles importan. El aria-label: un botón que solo muestra un logotipo necesita un nombre para los lectores de pantalla. El tamaño: 56 píxeles son fáciles de acertar en el móvil, y por debajo de 44 píxeles ya se queda justo. Es también el tamaño mínimo que recomiendan Apple y las WCAG para los elementos táctiles. El icono: descarga el logotipo de WhatsApp de los recursos de marca oficiales de WhatsApp, no lo modifiques, tampoco el color, y aloja el archivo en tu propio servidor. Un icono servido desde un servidor externo transmite la dirección IP de tus visitantes en cada visita a la página.

¿Cómo integro el botón de WhatsApp en WordPress, Shopify o Wix?

En todos los sistemas habituales rige el mismo principio: un botón suelto va como bloque HTML dentro de la página y un botón flotante, una sola vez en el pie de página, antes de </body>. Solo cambian los nombres de los menús.

WordPress

• Botón en una página: en el editor de bloques, inserta el bloque «HTML personalizado» y copia dentro el código del enlace.
• Botón flotante en todas las páginas: lo más seguro es un plugin para código de cabecera y pie de página, como WPCode. Ahí pegas el código en la zona del pie. Si en un tema clásico editas directamente el footer.php, usa un tema hijo; de lo contrario, el código desaparece con la siguiente actualización del tema. Los temas de bloques no tienen footer.php, y ahí WPCode es el camino más sencillo.
• Plugins de WhatsApp ya hechos: en el directorio de plugins hay muchos. Antes de instalar uno, comprueba si carga archivos de servidores externos, cuándo se actualizó por última vez y si funciona bien con tu banner de cookies.

Shopify

• Botón flotante en toda la tienda: en Tienda online > Temas, haz clic en el menú de tres puntos del tema actual y luego en «Editar código». Abre el archivo layout/theme.liquid y pega el código justo antes de </body>. Duplica antes el tema desde el mismo menú.
• Botón en una página o en la página de producto: en los temas de Online Store 2.0, como Dawn, añade en el editor de temas una sección «Liquid personalizado» y pega dentro el código del enlace.

Wix y Webflow

• Wix: para un botón en una página, usa en el editor el elemento para insertar código HTML. Wix muestra el código incrustado dentro de su propio marco. Por eso, un botón flotante sobre todo el sitio web debe ir en «Settings > Development & integrations > Custom code». Ese apartado solo se puede usar con un sitio publicado, un dominio conectado y, por tanto, un plan Premium.
• Webflow: para todo el sitio, pega el código en los ajustes del sitio, en «Custom code», dentro del campo «Footer code»; eso requiere un plan de sitio de pago. Para un botón suelto, usa el elemento «Code Embed».

Integrar un widget de chat con WhatsApp

Un widget como el de SendSeven se integra igual: pegas una sola vez un fragmento de script antes de </body>. En WordPress se hace desde el pie de página o con WPCode, en Shopify desde theme.liquid y en Wix y Webflow desde el apartado de código personalizado, como se describe arriba. Todos los ajustes, al detalle, los describe nuestra guía del widget para sitios web.

¿Qué pasa cuando alguien hace clic en el botón desde el ordenador?

En el ordenador, un enlace wa.me abre primero una página de WhatsApp desde la que se pasa a la app de escritorio o a WhatsApp Web. Si el visitante no tiene la sesión iniciada allí, primero debe vincular su móvil, y justo en ese punto muchos abandonan.

En el móvil el camino es corto: clic, se abre la app y el mensaje está listo. En el ordenador todo depende de si WhatsApp ya está configurado allí. En el B2B, donde muchos visitantes investigan desde el puesto de trabajo, a menudo no es así.

La solución es un código QR: el visitante lo escanea con el móvil y aterriza directamente en el chat de su app. En la demo en vivo de arriba lo ves en el ordenador como cuarta variante. Con HTML puro, esto se monta con una regla CSS que muestra el código QR solo en pantallas grandes. El widget de SendSeven se encarga del cambio por sí mismo: si alguien hace clic en WhatsApp desde el ordenador, el widget muestra un código QR y ofrece WhatsApp Web como segunda vía. En el móvil se abre directamente la app. La función está activada en los widgets nuevos; los widgets existentes mantienen su comportamiento anterior. También vale para Telegram, Messenger, Instagram y SMS. Dónde usar códigos QR fuera del sitio web lo muestra nuestro artículo sobre seis lugares para el código QR de WhatsApp.

¿Cumple el RGPD un botón de WhatsApp en el sitio web?

Sí, un enlace wa.me alojado por ti puede integrarse cumpliendo el RGPD: no transmite datos a WhatsApp al cargar tu página, solo el clic del visitante lleva hasta allí. Hay que mirar con más atención los plugins y widgets que cargan scripts, fuentes o iconos de servidores externos, y la cuestión de dónde se trata el chat después.

• Antes del clic: un botón alojado por ti, con icono propio, no carga nada de terceros. Los plugins que traen archivos de servidores externos transmiten con ello la dirección IP, así que deben entrar en tu revisión y, en su caso, en el banner de cookies.
• Política de privacidad: suele incluir una mención de WhatsApp como canal de contacto y de los datos que recibes en el chat. Lo mejor es aclarar la redacción exacta con tu delegado de protección de datos.
• Después del clic: si el chat funciona con la app WhatsApp Business en un móvil de empresa, la app puede acceder a la agenda de contactos si le concedes el permiso, y con ello también a números de contactos que nunca han dado su consentimiento. Con la WhatsApp Business Platform y un proveedor con contrato de encargo del tratamiento (DPA), la agenda queda fuera y tu equipo trabaja en una sola interfaz con roles y permisos.

Esta sección no sustituye el asesoramiento jurídico. Los detalles sobre consentimiento, plazos de conservación y elección de proveedor están en la guía sobre WhatsApp Business y RGPD.

¿Cómo mido los clics en el botón de WhatsApp?

Los clics en el botón se miden en Google Analytics 4 de la forma más sencilla con Google Tag Manager: un activador reacciona a los enlaces cuya dirección contiene wa.me y envía un evento propio. En la UE, esta medición suele requerir el consentimiento en el banner de cookies, por lo que la etiqueta solo se dispara tras la aceptación.

1. Activa en Tag Manager las variables de clic integradas, entre ellas Click URL.
2. Crea un activador de tipo «Clic - Solo enlaces» que se dispare cuando Click URL contenga wa.me.
3. Conéctalo a una etiqueta de evento de GA4, por ejemplo con el nombre whatsapp_click, y pasa la página como parámetro.
4. Vincula la etiqueta al consentimiento de tu banner de cookies para que no se dispare sin aceptación.

En Wix, Tag Manager se integra desde las integraciones de marketing, no con código personalizado. Lo que ocurre después en el chat, Google Analytics no lo ve. WhatsApp no transmite ni parámetros UTM ni la página de origen. Un truco sencillo aclara la situación: da a cada botón su propio mensaje rellenado, por ejemplo «Tengo una pregunta sobre los precios» en la página de precios. Así ves en el chat de dónde viene la consulta. En el widget de SendSeven, las estadísticas del widget muestran además los clics por canal, por ejemplo cuántas veces han elegido los visitantes WhatsApp, junto con las vistas y las interacciones. Cómo seguir las conversaciones de WhatsApp hasta la venta cuando entran en juego los anuncios, lo muestra la guía sobre anuncios Click-to-WhatsApp y wa.me.

¿Qué pasa en tu empresa después del clic?

Tras el clic, el mensaje llega al número que hay detrás del botón. Con la app WhatsApp Business, es un móvil. En cuanto responden varios compañeros o entran muchos chats, compensa una bandeja de entrada de equipo en la que vuestro equipo trabaje en conjunto. Aquí se decide si el botón trae clientes o solo mensajes que nadie lee a tiempo.

Una bandeja de entrada para tu equipo

En la bandeja de entrada de equipo de SendSeven, los chats de WhatsApp aparecen junto al correo electrónico, SMS, Instagram, Messenger, Live Chat y Telegram. Tu equipo asigna chats, ve quién está respondiendo en ese momento y escribe notas internas que el cliente no ve. Cómo es eso en el día a día lo describe nuestro artículo sobre WhatsApp Business con varios usuarios.

Respuestas por la tarde y el fin de semana

Una parte de las consultas a través del botón llega fuera del horario laboral. Un agente de IA responde al instante, desde tu base de conocimiento, a las preguntas recurrentes sobre horarios, envío o precios, y pasa todo lo demás a tu equipo. A la mañana siguiente, el traspaso con todo el historial está en la bandeja de entrada.

Un widget para WhatsApp y otros canales

No todos los visitantes quieren usar WhatsApp. En el widget de SendSeven decides qué canales aparecen: solo WhatsApp o WhatsApp junto a Live Chat, correo electrónico, Telegram y otros canales. Si desactivas el Live Chat, un widget nuevo muestra los canales como una lista con logotipos. Con el acceso rápido, que existe para los widgets de burbuja, la burbuja redonda despliega los canales al hacer clic. WhatsApp queda entonces a dos clics. Para la burbuja hay 15 iconos a elegir, entre ellos el logotipo de WhatsApp.

Si solo necesitas botones sueltos, por ejemplo para un artículo del blog, una landing page o la firma del correo, en el apartado Widgets, bajo «Promoción», encontrarás enlaces y códigos QR ya hechos en PNG o SVG, además de fragmentos HTML para botones de canal, insignias y firmas de correo. El mensaje rellenado lo defines tú mismo ahí. Así montas un botón de WhatsApp con un fragmento, sin codificar tú el enlace. Más sobre el canal en nuestra página de WhatsApp para empresas.

¿Cuánto cuesta un botón de WhatsApp?

El botón en sí no cuesta nada: un enlace wa.me es gratuito, tanto si usas la app WhatsApp Business como la API. Los costes surgen solo por las respuestas a través de la WhatsApp Business Platform y por el software con el que trabaja tu equipo.

• Los mensajes entrantes son siempre gratuitos.
• Si el cliente escribe primero, se abre una ventana de 24 horas para tus respuestas.
• Desde el 1 de octubre de 2026, Meta cobra también los mensajes de servicio, es decir, tus respuestas dentro de la ventana de 24 horas. Los primeros 1.000 por número de teléfono y mes siguen siendo gratuitos; a partir del 1.001 se aplica la tarifa de utilidad, en Alemania 0,0456 € por mensaje entregado. Los detalles están en nuestra visión general de los precios de WhatsApp 2026 y en la lista de precios de Meta.
• Con la app WhatsApp Business no hay costes por mensaje. A cambio, solo responde quien atiende el móvil y los dispositivos vinculados a él.

En SendSeven, los widgets para sitios web están incluidos desde la tarifa Basic, por 49 € al mes, y los agentes de IA y el Flow Builder, desde Professional, por 79 € al mes. El uso de IA se factura en créditos de IA. Todos los precios se entienden netos más IVA, y el resumen está en la página de precios. Puedes probar SendSeven gratis durante 14 días, con 100 mensajes de prueba y sin tarjeta de crédito.

¿Te queda alguna pregunta sobre tu botón? Usa la demo en vivo de arriba y llegará directamente a nuestro soporte.

Preguntas frecuentes