El botón flotante de WhatsApp es un botón que queda fijo en una esquina inferior de la web de tu hotel. Al tocarlo, el visitante abre un chat de WhatsApp con el número de tu hotel, con un mensaje ya escrito si lo configuras. La conversación llega a WeSpeak como cualquier otro chat de WhatsApp: la atiende tu asistente y la ves en Chats (la sección Conversaciones del menú lateral).
Esta guía es para el hotel y para quien administra su web, que puede ser el propio hotel, su diseñador o su agencia. El código se genera en WeSpeak y se pega una sola vez en el sitio. Es HTML y CSS, sin scripts, así que quien administra la web puede editarlo: cambiar la imagen (por ejemplo, por el logo del hotel), cambiar el tamaño o agregar un texto debajo (ver Personalizar el botón).
Ejemplo ilustrativo del diseño original: el cartel en computadora y el logo en celular. En ambos casos, al tocar la imagen se abre WhatsApp.
En qué se diferencia del Chat Web
WeSpeak tiene dos formas de recibir consultas desde tu web, y pueden convivir:
| Qué cambia | Botón de WhatsApp | Chat Web |
|---|---|---|
| Dónde conversa el visitante | En WhatsApp, con el número de tu hotel. Necesita tener WhatsApp. | En tu web, sin salir de la página. No necesita WhatsApp. |
| Qué se pega en la web | Un bloque de HTML y CSS: la imagen del botón y su estilo. | Una línea de código (un script). |
| Cómo se cambia su aspecto | Editando el código: la imagen, el tamaño o un texto (ver más abajo). | Desde WeSpeak, en Personalizar: la imagen (por ejemplo, tu logo), el color, el saludo y más, sin tocar el código. |
| Quién responde | Tu asistente, como en cualquier chat de WhatsApp. | El mismo asistente. |
Puedes tener los dos: quien prefiere WhatsApp toca el botón, y quien prefiere no salir de tu web escribe en el Chat Web. Si no cambias nada, los dos van abajo a la derecha, así que ponlos en esquinas distintas: por ejemplo, el botón a la Izquierda (se elige al generar el código) y la burbuja del Chat Web a la derecha, o al revés (la burbuja la mueve un Administrador o un Supervisor desde Personalizar, en su tarjeta de Canales). Más sobre el Chat Web: qué es y cómo se activa y cómo se instala.
1. Genera el código
- En WeSpeak, entra a Canales y baja hasta la sección Herramientas, al final de la página.
- Haz clic en la tarjeta Generador de botón flotante de WhatsApp para desplegarla.
- Completa las opciones (están explicadas en la tabla de abajo) y haz clic en Generar Código. Aparece el Código HTML, y el panel muestra una vista previa del botón: con Vista Previa la ocultas o la vuelves a mostrar. Si después cambias el mensaje, la posición o Solo logo whatsapp, el código no se actualiza solo: vuelve a hacer clic en Generar Código antes de copiarlo.
- Haz clic en Copiar y pásale el código a quien administra tu web, junto con el enlace a esta guía.
| Opción | Qué hace |
|---|---|
| Número de WhatsApp | Aparece solo si tu cuenta tiene más de un número de WhatsApp. Elige a qué número le escriben los visitantes. |
| Mensaje Predeterminado | El texto que aparece ya escrito en el chat cuando el visitante toca el botón, por ejemplo: «Hola, les escribo desde la web». El visitante puede cambiarlo o borrarlo antes de enviarlo. Si lo dejas vacío, el chat se abre sin texto. Un mensaje así te ayuda a reconocer en Chats las conversaciones que llegan por el botón. |
| Posición del botón | Izquierda o Derecha (la que viene marcada): la esquina inferior de la pantalla donde queda el botón. |
| Solo logo whatsapp | Apagado (como viene), el botón es el logo de WhatsApp en el celular y la tablet, y en la computadora un cartel más ancho: el logo con el texto «Atención Inmediata | 24hs» y la firma de WeSpeak. Encendido, es solo el logo de WhatsApp, del mismo tamaño en todos los dispositivos. |
ℹ️ La tarjeta aparece si tu cuenta tiene al menos un número de WhatsApp (conectado por código QR o por WhatsApp API). La puede usar cualquier persona del equipo que entre a Canales, sea cual sea su rol: Administrador, Supervisor o Usuario.
💡 WeSpeak no guarda el código ni las opciones: si lo necesitas otra vez, genéralo de nuevo. Sale siempre con el diseño original, así que, si lo personalizaste, guarda una copia del código editado.
2. Pégalo en tu web
La regla es siempre la misma: una sola vez, en un lugar que se cargue en todas las páginas, dentro del <body> (lo habitual es justo antes de </body>). No va en el <head>: es contenido visible —un enlace con una imagen—, no un script. Elige la opción según cómo esté hecho tu sitio.
Si tu web ya tiene otro botón de WhatsApp (por ejemplo, de un plugin), quítalo para que no aparezcan dos.
En el HTML del sitio
Pega el código en la línea anterior a </body>, en la plantilla o en el pie de página (footer) que comparten todas las páginas. Si tu sitio tiene páginas sueltas, sin plantilla común, pégalo en cada una.
Con Google Tag Manager
- En tu contenedor, entra a Etiquetas y haz clic en Nueva.
- En Configuración de la etiqueta, elige HTML personalizado y pega el código.
- En Activación, elige el activador Todas las páginas.
- Guarda la etiqueta y publica el contenedor (Enviar → Publicar). Hasta que no lo publiques, el botón no aparece en tu web.
En WordPress
- La forma más simple es un plugin de fragmentos de código como WPCode (antes llamado Insert Headers and Footers): en su sección Header & Footer (cabecera y pie de página), pega el código en la caja del pie (Footer) y guarda.
- Muchos temas y constructores (Elementor, Divi, Avada y otros) tienen su propio campo de «código personalizado» para el pie de página: sirve si acepta HTML.
- Si prefieres editar el tema, pégalo antes de
</body>enfooter.php, pero hazlo en un tema hijo: si no, se pierde cuando el tema se actualiza.
En Wix, Squarespace, Shopify, Webflow y otros constructores
| Plataforma | Dónde se pega |
|---|---|
| Wix | Ajustes → Código personalizado (en Desarrollo e integraciones) → + Agregar código personalizado. Pega el código, elige Todas las páginas y, en Coloca el código en, Cuerpo - final. Haz clic en Aplicar. El sitio tiene que estar publicado y con un dominio conectado. |
| Squarespace | En el panel Inserción de código, pega el código en Pie de página y guarda. Está disponible en los planes Core, Plus y Advanced. |
| Shopify | Tienda online → en tu tema, el botón ⋯ → Editar código → archivo theme.liquid: pega el código justo antes de </body> y guarda. |
| Webflow | Site settings → Custom code → Footer code (la interfaz de Webflow está en inglés). Guarda y publica el sitio. |
| Otro constructor o motor de reservas | Busca la opción para agregar HTML personalizado en todas las páginas o en el pie de página. Si quieres el botón también en las páginas de tu motor de reservas, pégalo ahí. |
Sitios hechos a medida (React, Next.js y otros)
Agrega el código una vez, en la plantilla o el layout común a todas las páginas. Es HTML estándar: si tu sitio usa JSX, hay que adaptarlo a esa sintaxis (por ejemplo, los atributos style, el bloque <style> y los comentarios <!-- -->).
3. Comprueba que funciona
- Abre tu web en un celular: el botón aparece en la esquina inferior que elegiste.
- Tócalo: se abre WhatsApp con el chat de tu hotel y, si lo configuraste, el mensaje predeterminado ya escrito.
- Repite la prueba en una computadora, con la ventana del navegador maximizada. Ahí se ve el cartel ancho, salvo que hayas encendido Solo logo whatsapp o puesto tu propia imagen. Al hacer clic, se abre una pestaña de WhatsApp, desde donde se sigue en WhatsApp Web o en la aplicación de escritorio.
- Si envías un mensaje de prueba, llega a Chats en WeSpeak y el asistente responde como en cualquier chat de WhatsApp.
💡 Si tu sitio usa un plugin de caché o una CDN, límpiala después de pegar el código.
Personalizar el botón
El generador no tiene opciones para subir una imagen ni para agregar un texto, pero no hace falta: el botón es HTML y CSS que queda en tu web, y quien la administra puede editarlo con cualquier editor de texto, antes de pegarlo o donde ya está pegado.
El código tiene cuatro partes:
- Una caja (
<div id="wapp-button">) que deja el botón fijo en una esquina inferior de la pantalla. - Un enlace, dentro de la caja, que empieza con
https://api.whatsapp.com/send?phone=: abre el chat con el número de tu hotel y el mensaje predeterminado. - La imagen del botón, dentro del enlace (
<picture>): una versión para pantallas de hasta 1024 px de ancho, es decir, celular y tablet (whatsapp.png, el logo de WhatsApp), y otra para pantallas más anchas, la computadora (right.pngoleft.png, el cartel). Con Solo logo whatsapp, hay una sola imagen:whatsapp.png. - Un bloque
<style>, al final, con el tamaño: 80 px de ancho en celular y tablet, y 320 px en computadora (80 px en todos los dispositivos con Solo logo whatsapp).
Así se ve la parte del enlace y la imagen, simplificada y con un número y un mensaje de ejemplo:
<a id="whatsapp-message" target="_blank" href="https://api.whatsapp.com/send?phone=573000000000&text=Hola%2C%20quiero%20reservar">
<picture>
<source media="(max-width: 480px)" srcset="https://d2txcta0d7tijy.cloudfront.net/wespeak/whatsapp.png" />
<source media="(max-width: 1024px)" srcset="https://d2txcta0d7tijy.cloudfront.net/wespeak/whatsapp.png" />
<img src="https://d2txcta0d7tijy.cloudfront.net/wespeak/right.png" alt="botón de whatsapp" />
</picture>
</a>
Usar tu propia imagen (por ejemplo, el logo del hotel)
- Sube la imagen a tu web (por ejemplo, a la biblioteca de medios de WordPress) y copia su dirección. Tiene que ser pública: si la abres en una ventana de incógnito, tiene que verse. Conviene una imagen cuadrada, de al menos 160 × 160 px, para que se vea nítida.
- En el código, reemplaza las tres direcciones de imagen por la tuya: las dos que terminan en
whatsapp.png(celular y tablet) y la que termina enright.pngoleft.png(computadora). Si generaste el código con Solo logo whatsapp, hay una sola, la que termina enwhatsapp.png.
También puedes cambiar solo algunas: por ejemplo, dejar el logo de WhatsApp en el celular y poner tu propio cartel en la computadora.
Cambiar el tamaño
En la computadora, el botón mide 320 px de ancho, pensado para el cartel. Si pones una imagen cuadrada, a ese ancho se ve enorme: en el bloque <style>, debajo de /* Desktop sizes */, cambia las dos líneas width: 320px; por width: 80px; (o por el ancho que quieras).
En celular y tablet mide 80 px: si quieres otro tamaño ahí, cambia las líneas width: 80px; de los bloques /* Mobile sizes */ y /* Tablet sizes */. Con Solo logo whatsapp, mide 80 px en todos los dispositivos y no hace falta cambiar nada.
Agregar un texto debajo
Agrega esta línea justo después de </a> (así queda dentro de la caja, debajo de la imagen):
<div style="margin-top:4px; padding:2px 6px; background:#ffffff; border-radius:6px; font-size:12px; text-align:center; color:#333333;">Reservas por WhatsApp</div>
Cambia «Reservas por WhatsApp» por tu texto y, si quieres, los colores: background es el fondo y color, la letra. Que sea corto: en el celular el botón mide 80 px de ancho, y «Reservas por WhatsApp» ya ocupa dos o tres líneas, según la tipografía de tu web. El texto no es un enlace: el chat se abre solo al tocar la imagen.
Con tu imagen y un texto, esa parte del código queda así (el enlace no cambia: deja el tuyo, con tu número y tu mensaje):
<a id="whatsapp-message" target="_blank" href="https://api.whatsapp.com/send?phone=…&text=…">
<picture>
<source media="(max-width: 480px)" srcset="https://tuhotel.com/img/boton-whatsapp.png" />
<source media="(max-width: 1024px)" srcset="https://tuhotel.com/img/boton-whatsapp.png" />
<img src="https://tuhotel.com/img/boton-whatsapp.png" alt="botón de whatsapp" />
</picture>
</a>
<div style="margin-top:4px; padding:2px 6px; background:#ffffff; border-radius:6px; font-size:12px; text-align:center; color:#333333;">Reservas por WhatsApp</div>
A la izquierda, la opción Solo logo whatsapp del generador. A la derecha, un ejemplo con imagen y texto propios, editando el HTML. Solo la imagen abre el chat; el texto de abajo no es un enlace.
Lo que no hay que tocar
El enlace https://api.whatsapp.com/send?phone=…: es el que abre el chat con el número de tu hotel y el mensaje predeterminado. Para cambiar el número o el mensaje, no lo edites a mano: genera el código de nuevo en WeSpeak, reemplaza el anterior y vuelve a aplicar tus cambios de imagen, tamaño o texto.
Comprueba el resultado
Abre tu web en un celular y en una computadora: el botón tiene que verse con tu imagen y tu texto, del tamaño que elegiste, en la esquina elegida. Tócalo: tiene que abrirse WhatsApp con el chat de tu hotel.
Editar el código no cambia nada en WeSpeak: las conversaciones siguen llegando al número conectado y el asistente responde como siempre.
Si algo no funciona
| Qué pasa | Qué revisar |
|---|---|
| No aparece el botón | Si lo pegaste en el HTML del sitio, abre el código fuente de la página (Ctrl+U, o Cmd+Opción+U en Mac) y busca wapp-button. Si lo instalaste con Google Tag Manager, ahí no aparece: revisa que el contenedor esté publicado. En los dos casos, revisa también la caché del sitio. |
| En la computadora se ve un cartel ancho y no solo el logo | Es el diseño de computadora del generador. Para mostrar solo el logo, genera el código de nuevo con Solo logo whatsapp encendido, o pon tu propia imagen. |
| Tu imagen se ve enorme en la computadora | Cambia las dos líneas width: 320px; por width: 80px; (ver Cambiar el tamaño). |
| En lugar de tu imagen se ve un ícono roto o un texto | La dirección de la imagen no es pública o está mal escrita. Ábrela en una ventana de incógnito: tiene que verse la imagen. |
| Se abre WhatsApp con otro número | Revisa que no haya otro botón de WhatsApp en tu web (por ejemplo, de un plugin). Si es este, genera el código de nuevo con el número correcto (si tu cuenta tiene más de uno, se elige en Número de WhatsApp) y reemplaza el código completo. |
| El botón tapa la burbuja del Chat Web u otro botón de tu web | Pon cada uno en una esquina distinta: genera el código eligiendo la otra esquina en Posición del botón o mueve la burbuja del Chat Web desde Personalizar. |
Límites actuales
- El panel no tiene opciones para subir una imagen ni para agregar un texto. Se hace editando el código, como se explica en Personalizar el botón.
- WeSpeak no edita la web de tu hotel. El código lo pega y lo personaliza quien la administra: el hotel, su diseñador o su agencia. Si tienes dudas sobre el botón, consulta a tu asesor de WeSpeak.
- El cartel de computadora es fijo: dice «Atención Inmediata | 24hs», lleva la firma de WeSpeak y no se cambia desde el panel. Para no mostrarlo, genera el código con Solo logo whatsapp o usa tu propia imagen.
- Cada botón lleva a un solo número. Si tienes varios números (por ejemplo, uno por propiedad, cada una con su web), genera un código para cada uno.
- WeSpeak no guarda el código ni tus cambios. Cada código nuevo sale con el diseño original.
- No cuenta clics. El código no tiene scripts ni seguimiento: en WeSpeak ves las conversaciones que llegan, no cuántas personas tocaron el botón.
Preguntas frecuentes
¿Puedo usar el logo de mi hotel en el botón?
Sí, editando el código: sube tu imagen a la web, reemplaza por la tuya las direcciones de imagen del código y, si es cuadrada, cambia el ancho de computadora de 320 px a 80 px (ver Personalizar el botón). En el panel no hay una opción para subirla.
¿Puedo agregar un texto debajo del botón, como «Reservas por WhatsApp»?
Sí: agrega la línea del texto justo después de </a> (ver Personalizar el botón). Que sea corto: en el celular el botón mide 80 px de ancho.
¿Editar el código cambia algo en WeSpeak?
No. Las conversaciones siguen llegando al mismo número y el asistente responde como siempre. Lo único que no hay que tocar es el enlace que empieza con https://api.whatsapp.com/send.
¿Cómo cambio el número o el mensaje predeterminado?
Genera el código de nuevo en Canales → Herramientas, con el número o el mensaje nuevo, y reemplaza el anterior en tu web. Si lo habías personalizado, vuelve a aplicar los cambios.
¿WeSpeak puede cambiar el botón o instalarlo en mi web?
No: el botón vive en tu web, y WeSpeak no edita los sitios de sus clientes. Lo hace quien administra tu web, con esta guía.
¿Puedo quitar el cartel «Atención Inmediata | 24hs»?
Sí. Genera el código con Solo logo whatsapp encendido (así el botón es solo el logo de WhatsApp en todos los dispositivos) o reemplaza la imagen del cartel por la tuya.
¿Puedo tener el botón de WhatsApp y el Chat Web a la vez?
Sí, conviven. Ponlos en esquinas distintas para que no se tapen (ver En qué se diferencia del Chat Web).
¿Cómo saco el botón de mi web?
Borra el código de donde lo pegaste (o pausa o elimina la etiqueta en Google Tag Manager y publica). No cambia nada en WeSpeak: las conversaciones que ya llegaron siguen en Chats.