Widget de chat web: instalación y configuración

Resumen

El widget de chat web te permite añadir un botón de chat en vivo a tu web para que los visitantes puedan iniciar conversaciones con tu equipo, o con tu chatbot de IA, directamente desde cualquier página. Disponible en todos los planes, incluido el plan Free (1 usuario, hasta 50 conversaciones al mes). El chatbot de IA forma parte de Pro y Enterprise.

Mira: chat en vivo en WordPress en 45 segundos

Pasos y transcripción en la página del vídeo →

Acceder a los ajustes del widget

Ve a Canales en la barra lateral y haz clic en "Gestionar" (o en "Conectar") en la tarjeta de Chat web. Se abre la página de configuración del chat web con seis pestañas: Instalación, Formulario previo al chat, Apariencia, Respuesta automática, FAQ y Comportamiento.

Activar el widget

En la pestaña Instalación encontrarás la tarjeta Estado del widget con un interruptor. Ponlo en activado para activar el widget en tu web. El indicador de estado cambiará a una etiqueta verde "Activo".

¿Usas WordPress, WooCommerce o Shopify? Instala el plugin (sin código)

En estas plataformas no necesitas copiar el código de instalación:

• WordPress: instala el plugin gratuito Bugalou Live Chat, abre Bugalou en el menú de WordPress y crea allí una cuenta gratuita: introduce el código del correo y el chat se activa al momento. ¿Ya tienes cuenta? Pega la clave de tu widget (pestaña Instalación), marca Mostrar el widget de chat en mi sitio y guarda. Mira el vídeo
• WooCommerce: instala Bugalou for WooCommerce. También conecta tus pedidos, y la clave del widget va en la misma página (WooCommerce → Bugalou). Consulta Conectar WooCommerce o mira el vídeo
• Shopify: instala la app de Bugalou, conecta tu tienda y, en tu tema, activa App embeds → Bugalou Chat & Banners. No hace falta código ni clave. Consulta Conectar Shopify o mira el vídeo

Tus banners aparecen en el sitio junto con el chat. En cualquier otro sitio, usa el código de instalación de abajo.

Insertar el código

Debajo del interruptor de estado encontrarás la tarjeta Código de instalación. Contiene un fragmento de JavaScript como este:

<script src="https://yourdomain.com/widget/loader.js"
  data-widget-key="your-unique-key"></script>

Haz clic en el botón "Copiar" para copiar el fragmento al portapapeles. Pégalo justo antes de la etiqueta de cierre </body> en cada página donde quieras que aparezca el widget de chat.

Probar la instalación

Usa la tarjeta Probar instalación para verificar que el widget funciona:

1. Introduce el dominio de tu web (por ejemplo, example.com) en el campo de texto
2. Haz clic en "Probar instalación"
3. Aparecerá un mensaje de éxito o de error que te indica si se detectó el widget

Dominios permitidos

En la tarjeta Dominios permitidos puedes restringir qué dominios pueden cargar el widget:

• Introduce un dominio (por ejemplo, *.example.com para todos los subdominios) y haz clic en el botón + para añadirlo
• Cada dominio aparece en una lista con un botón de eliminar
• Si no se especifica ningún dominio, el widget funciona en cualquier dominio

Haz clic en "Guardar cambios" para conservar tus ajustes.

¿El widget funciona, pero faltan las actualizaciones en directo?

Si el chat en sí funciona pero los mensajes llegan despacio, o los estados como "en línea" o "escribiendo" nunca aparecen, es posible que la política de seguridad de contenido (CSP) de tu web esté bloqueando nuestra conexión en tiempo real (Pusher). Es lo más habitual en tiendas desarrolladas a medida (por ejemplo, Shopify Hydrogen) o en sitios donde una app de consentimiento de cookies o de seguridad gestiona la CSP.

Compruébalo abriendo la consola de tu navegador (F12): si ves un error que indica que js.pusher.com está bloqueado por tu CSP, añade lo siguiente a los ajustes de CSP de tu web:

• script-src: https://js.pusher.com
• connect-src: https://*.pusher.com y wss://*.pusher.com

Contacta con quien gestione la parte técnica de tu web (desarrollador, agencia o el soporte de tu herramienta de CSP) para hacer este cambio.

Consejo

Si usas un CMS como WordPress, puedes añadir el código del widget con un plugin como "Insert Headers and Footers" o pegarlo en la plantilla del pie de página de tu tema.