Cómo poner un chat en tu página web: código HTML, Google Tag Manager, Wix y Squarespace

Para poner un chat en tu página web, copias el fragmento de código de tu herramienta de chat y haces que se cargue en todas las páginas. Hay cuatro formas de hacerlo: pegarlo justo antes de la etiqueta de cierre </body> en la plantilla común de tu web, añadirlo en Google Tag Manager como etiqueta de HTML personalizado con el activador Todas las páginas, o usar el campo de código de tu creador de webs (Wix: Custom Code, en Body - end; Squarespace: Code Injection, en Footer). Después abre la web en una ventana privada y envíate un mensaje de prueba. Un chat que se carga pero no avisa a nadie es peor que no tener chat.

WordPress, Shopify e ikas tienen sus propios caminos, con poco o ningún código; los verás al final. Los ejemplos usan el Messenger de Shopxare, pero el método es el mismo en casi cualquier herramienta de chat que te dé un fragmento de código.

Qué camino encaja con tu web

Mi recomendación: si puedes editar la plantilla, pon el código ahí. Tag Manager es una buena alternativa cuando es el único sitio donde te dejan añadir código, pero añade una dependencia. Quien gestiona el contenedor puede desactivar tu chat sin darse cuenta, y una configuración de consentimiento puede ocultarlo a quien rechace las cookies.

Antes de empezar: copia el fragmento

1. Crea tu cuenta de Shopxare y ve a Ajustes → Messenger → Instalación.
2. Copia el fragmento para cualquier web. Con tu propio App ID se ve así:

<script>
  window.Shopxare = window.Shopxare || function () { (Shopxare.q = Shopxare.q || []).push(arguments) };
  Shopxare('boot', { app_id: 'YOUR_APP_ID' });
</script>
<script async src="https://app.shopxare.com/widget/v1/loader.js"></script>

3. Cuando el chat funcione, ve a Ajustes → Messenger → Seguridad → Sitios web permitidos y añade tus dominios. Si la lista está vacía, el Messenger se carga en cualquier web; al rellenarla, tu fragmento solo funciona en tus propios sitios.

Tienes todos los detalles en Instalar el Messenger.

Camino 1: pega el código en el HTML de tu web

1. Busca el archivo que comparten todas las páginas. En la mayoría de webs es una plantilla de diseño o de pie de página, por ejemplo footer.php, layout.html o un parcial del pie. Una web estática con archivos HTML sueltos no tiene archivo común, así que pegas el fragmento en cada uno.
2. Pega el fragmento justo antes de la etiqueta de cierre </body>.
3. Sube o despliega el cambio y recarga la web con la caché vacía.

Si tu CMS tiene un campo tipo "scripts del pie de página" o "código personalizado", hace lo mismo. Úsalo en lugar de editar archivos.

Las aplicaciones de una sola página hechas con React, Vue o similares no necesitan nada más. Pon el fragmento una vez en index.html; el Messenger detecta solo los cambios de página, así que tu equipo sigue viendo en qué página está el cliente.

Camino 2: añade el chat con Google Tag Manager

1. Abre tu contenedor en tagmanager.google.com y ve a Etiquetas > Nueva.
2. Haz clic en Configuración de la etiqueta y elige HTML personalizado. Pega el fragmento completo, con los dos bloques <script>. La propia Google indica que el JavaScript siempre debe ir dentro de etiquetas <script> (Ayuda de Tag Manager).
3. Haz clic en Activación y elige Todas las páginas.
4. Abre la configuración avanzada y, dentro, la de consentimiento (Advanced Settings > Consent Settings). Por defecto, las comprobaciones adicionales de consentimiento están en Not set. Si tu banner de cookies controla las etiquetas por tipos de consentimiento, puedes elegir Require additional consent for tag to fire y añadir el tipo que tu banner usa para las cookies funcionales (Ayuda de Tag Manager). Pregunta qué tipo encaja a quien gestione el banner de cookies y la protección de datos. Ten en cuenta el efecto: si exiges consentimiento, quien rechace las cookies no verá el chat.
5. Haz clic en Vista previa, escribe la URL de tu web y pulsa Connect (Ayuda de Tag Manager). En la vista de depuración, comprueba que la etiqueta del chat se ha activado y que el botón del chat aparece en la web.
6. Haz clic en Enviar y después en Publicar.

Tag Manager minimiza el código HTML personalizado y puede cambiar comillas simples por dobles. A este fragmento no le afecta, así que no te preocupes si la versión guardada se ve algo distinta.

Cuándo no usar Tag Manager

• Quieres reconocer a los clientes con sesión iniciada. La verificación de identidad necesita un user_hash que tu servidor calcula con una clave secreta, y esa clave debe quedarse en el servidor. Tag Manager no puede calcularlo, así que tu plantilla tiene que generarlo de todos modos. En ese caso, pon el código de arranque en la plantilla y pasa ahí user_id, user_hash, email y name (API de JavaScript).
• Tu web está en Wix. Wix indica que las herramientas de seguimiento como Google Tag Manager no funcionan a través de su función de código personalizado (Centro de ayuda de Wix). Pega el fragmento del chat directamente en Custom Code (camino 3).
• El fragmento ya está en tu tema. Cárgalo desde un solo sitio. Dos copias complican encontrar fallos y luego no sabrás cuál cambiar.

Camino 3: poner un chat en una web de Wix

Wix pide dos cosas antes: que la web esté publicada y que tenga un dominio conectado (Centro de ayuda de Wix).

1. En el panel de tu web, ve a Settings (Ajustes).
2. En Development & integrations, haz clic en Custom Code.
3. Pulsa + Add Custom Code, pega el fragmento y ponle un nombre como "Chat en vivo".
4. En Add Code to Pages, elige All pages.
5. En Place Code in, elige Body - end.
6. Pulsa Apply y abre tu web publicada.

Dos detalles de Wix que pillan a mucha gente. El código personalizado va ligado a tu dominio: si asignas otro dominio principal, Wix borra tus fragmentos y tienes que volver a añadirlos. Además, Wix avisa de que desde diciembre de 2025 sus medidas de seguridad en el frontend pueden bloquear algunos fragmentos de terceros hasta que el proveedor los actualice. Si el botón del chat no aparece, escribe a tu proveedor de chat; Wix no da soporte al código de terceros.

Camino 4: poner un chat en una web de Squarespace

La inyección de código está disponible en los planes Core, Plus y Advanced y en algunos planes antiguos (Centro de ayuda de Squarespace).

1. Abre el panel Code Injection. El artículo de ayuda de arriba enlaza directamente con él.
2. Pega el fragmento en Footer. Squarespace coloca ese código justo antes de la etiqueta de cierre </body> en todas las páginas.
3. Pulsa Save y recarga tu web.

Las páginas de pago de Squarespace no admiten código propio, así que el chat no aparecerá ahí. Tenlo en cuenta: resuelve las dudas de pago y envío en las páginas de carrito y de producto, donde el chat sí se carga.

WordPress, WooCommerce, Shopify e ikas

En estas plataformas hay un camino mejor que el fragmento suelto, porque la integración también puede llevar datos del cliente y del carrito a tu bandeja de entrada. El plugin de WooCommerce y el fragmento de Shopify envían solos datos de la tienda como el número de pedidos y el total del carrito, que aparecen como una ficha de tienda junto a la conversación.

• WordPress y WooCommerce: instala el plugin. Paso a paso en Chat para WordPress gratis y en la documentación de WordPress.
• Shopify: pega el fragmento del tema en theme.liquid. Mira Cómo añadir un chat en vivo a Shopify.
• ikas: instala la app en un paso, sin código (documentación de ikas).

Pruébalo en cinco minutos

1. Abre la web en una ventana privada, en el ordenador y en el móvil. El botón del chat debe aparecer en la esquina. En el móvil, comprueba que no tape el botón "Añadir al carrito" ni el banner de cookies. Puedes moverlo en Personalizar el Messenger.
2. Envíate un mensaje de prueba y contéstalo desde el móvil. Shopxare Mobile es gratis en todos los planes (apps para móvil y escritorio). Si no te llega la notificación, arréglalo antes de anunciar el chat a tus clientes.
3. Cambia de página en mitad de la conversación. La conversación debe seguir ahí.
4. Rechaza las cookies en tu banner y recarga. ¿Sigues viendo el chat? Las dos respuestas pueden ser correctas, pero tiene que ser una decisión, no una sorpresa.
5. Comprueba que el fragmento se carga una sola vez. Mira el código fuente de la página o usa Tag Assistant. Una copia en la plantilla y otra en Tag Manager es un error muy fácil de cometer.

Ejemplo: una pequeña tienda de café online

Un tostador de café ficticio vende café en grano en una web hecha a medida que ya usa Google Tag Manager. La dueña añade el Messenger como etiqueta de HTML personalizado un martes por la mañana y lo prueba desde el móvil. A las 14:10, alguien escribe desde una página de producto:

"¿Este café viene en grano o molido?"

Ella contesta desde la app:

"Por defecto, en grano. Si lo quieres molido, elige 'Molido para filtro' en el menú de molienda que hay encima del botón Añadir al carrito y lo molemos el día del envío."

Dos meses después añade cuentas de cliente a la tienda. Ese es el momento en que pasa el fragmento de Tag Manager a la plantilla de la página, para que el servidor envíe user_id y user_hash y los clientes habituales aparezcan reconocidos en la bandeja de entrada.

Cuando el chat ya está en marcha

• Configura el horario de atención y un mensaje de ausencia, para que quien escriba por la noche sepa cuándo tendrá respuesta. Copia una de nuestras plantillas de mensaje fuera de horario.
• Guarda las respuestas a las cinco preguntas que más te hacen e insértalas con "/" (respuestas guardadas). Nuestras respuestas predefinidas para atención al cliente te dan un primer conjunto.
• Si por la noche no hay nadie para contestar, Are AI puede responder a partir de tus propios artículos de ayuda y páginas, y pasar la conversación a tu equipo cuando toca.

Shopxare tiene hoy un único plan y es gratis, sin tarjeta de crédito. Puedes crear una cuenta y tener el Messenger en tu web en lo que tardas en encontrar el archivo del pie de página.

Preguntas frecuentes

¿Cómo pongo un chat gratis en mi página web?

Regístrate en una herramienta de chat en vivo gratuita, copia su fragmento de código y pégalo justo antes de </body> en la plantilla común de tu web, o añádelo con Google Tag Manager o con el campo de código personalizado de tu creador de webs. Después envíate un mensaje de prueba.

¿Se puede añadir un chat en vivo con Google Tag Manager?

Sí. Crea una etiqueta de HTML personalizado, pega el fragmento completo, pon el activador en Todas las páginas, compruébalo en Vista previa y luego Enviar y Publicar. Evita Tag Manager si necesitas identificar a clientes con sesión iniciada o si tu web está en Wix.

¿Dónde se pega el código del chat?

Justo antes de la etiqueta de cierre </body>, en un archivo o campo que usen todas las páginas: la plantilla del pie, un campo de scripts del pie, Custom Code en Wix (Body - end) o Code Injection en Squarespace (Footer).

¿Por qué no aparece el chat en mi web?

Las causas habituales son un cambio sin publicar (en el contenedor de Tag Manager o en el creador de webs), un ajuste de consentimiento que bloquea la etiqueta hasta que el visitante acepta las cookies, un dominio que falta en la lista de sitios permitidos o una página en caché. Compruébalo en una ventana privada con la caché vacía.

¿Un chat en vivo hace más lenta mi web?

Cualquier script extra supone algo de carga. El cargador del Messenger usa async, así que el navegador no lo espera para mostrar la página. Si la velocidad te importa, mide una página de producto antes y después de instalarlo.