Esta guía es para quien administra la web del hotel: el propio hotel, su diseñador o su agencia. Instalar el Chat Web es pegar un código de una línea, una sola vez, en un lugar que se cargue en todas las páginas del sitio — igual que un píxel de seguimiento. Lleva unos minutos, y después no hay que tocar nada más: la apariencia y el comportamiento del chat se configuran desde WeSpeak.
En video: el tutorial de configuración muestra de dónde se copia el código y cómo instalarlo con Google Tag Manager, además de cómo personalizar el chat.
Ver video: configuración del Chat Web
1. Consigue el código
El hotel lo copia desde WeSpeak, en Canales → Conectados, con el botón de copiar de la tarjeta Chat Web (ver cómo activarlo). Se ve así:
<script async src="https://chat.wespeak.pro/widget.js?id=7f3a9c2e4b1d48f6a0c5e9b2d7a1f3c8"></script>
El id del final es distinto para cada hotel: usa siempre el código que te pasen.
- Un código por propiedad. Si el hotel tiene varios complejos, cada uno tiene su código: en la web de cada propiedad va el suyo, así las conversaciones quedan asociadas al complejo correcto.
- Un solo código por página. Si pegas dos en la misma página (por ejemplo, los de dos complejos), solo funciona el primero.
- No hay que modificarlo ni volver a pegarlo cuando el hotel cambia los colores, la imagen o el saludo del chat: esos cambios se aplican solos.
- Dominios permitidos. Si el hotel completó esa lista en WeSpeak, la dirección de tu web tiene que estar ahí tal cual la ve el navegador: con
https://y, si usas las dos versiones, con y sinwww. Si el chat también va en otro dominio —por ejemplo, el del motor de reservas—, esa dirección también.
2. Pégalo en tu sitio
La regla es siempre la misma: una sola vez, en la plantilla común a todas las páginas, justo antes de </body>. También funciona dentro del <head>, porque se carga con async y no frena la página. Elige la opción según cómo esté hecho tu sitio.
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 chat 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" o "scripts del pie de página": sirve igual.
- 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 de "scripts personalizados", "código de seguimiento" o "HTML en el pie de página": la misma donde se pega un píxel de Meta o el código de Google Analytics. |
Sitios hechos a medida (React, Next.js y otros)
Carga el código una vez, en la plantilla o el layout raíz, y no en cada cambio de ruta.
En Next.js, usa el componente
Scriptconstrategy="afterInteractive":<Script src="https://chat.wespeak.pro/widget.js?id=7f3a9c2e4b1d48f6a0c5e9b2d7a1f3c8" strategy="afterInteractive" />
No lo cargues en diferido (por ejemplo, con
strategy="lazyOnload"o "al terminar de cargar la página"): la burbuja esperaría a que baje todo lo demás —videos, fotos pesadas— y puede tardar muchos segundos en aparecer.
3. Opcional: abre el chat desde un botón de tu web
Si quieres que un botón propio de tu web ("Consultar por chat", "Chatea con nosotros") abra el chat, llama a WsChat.show():
<button type="button" onclick="window.WsChat && WsChat.show()">Consultar por chat</button>
También están WsChat.hide(), que lo cierra, y WsChat.toggle(), que lo abre o lo cierra. El código del Chat Web tiene que estar instalado en esa misma página.
4. Comprueba que funciona
- Abre tu web en una ventana de incógnito: tiene que aparecer la burbuja en la esquina inferior (a la derecha, o a la izquierda si el hotel la movió).
- Ábrela y escribe una consulta de prueba: el asistente responde en segundos.
- Pídele al hotel que confirme que la conversación llegó a Chats en WeSpeak.
- Repite la prueba en un celular: ahí el chat se abre a pantalla completa.
💡 Si tu sitio usa un plugin de caché o una CDN, límpiala después de pegar el código.
Si algo no funciona
| Qué pasa | Qué revisar |
|---|---|
| No aparece la burbuja | Que el código esté publicado: abre el código fuente de la página (Ctrl+U, o Cmd+Opción+U en Mac) y busca chat.wespeak.pro. Revisa también la caché del sitio, que el contenedor de Google Tag Manager esté publicado y que tu dirección figure en Dominios permitidos (si el hotel completó esa lista). |
| Aparece en la portada pero no en otras páginas (por ejemplo, en reservas) | El código está solo en una plantilla, o esas páginas están en otro dominio. Pégalo en la plantilla común y pídele al hotel que sume ese dominio a Dominios permitidos. |
| La burbuja tarda en aparecer | El código se carga en diferido o la página es muy pesada (videos, imágenes grandes). Cárgalo con async en el <head> o antes de </body>, no "al terminar de cargar". |
| La burbuja aparece, pero el chat no carga | Suele ser un navegador muy antiguo (en iPhone, anterior a iOS 16.4). A los 10 segundos aparece una ✕ para cerrar el chat. En un navegador actual funciona. |
| El hotel cambió los colores o el saludo y no se ven | La configuración se renueva en unos 5 minutos. Recarga la página pasado ese tiempo. |
| Tu sitio tiene una política de seguridad de contenido (CSP) estricta | Permite https://chat.wespeak.pro para scripts, iframes, conexiones e imágenes. Si el chat usa una imagen propia del hotel, permite también el dominio de esa imagen. |
Cómo sacarlo
Para quitar el chat de la web, borra el código de donde lo pegaste (o pausa o elimina la etiqueta en Google Tag Manager y publica). La burbuja desaparece y no entran conversaciones nuevas; el historial queda guardado en WeSpeak, y el mismo código vuelve a funcionar si lo pegas otra vez.