Cómo configurar un widget de chat en vivo

Resumen

El widget de chat web de Bugalou permite que los visitantes de tu web inicien una conversación directamente desde tu sitio. Los mensajes aparecen en tu bandeja de entrada de equipo igual que los de WhatsApp y el correo, así tu equipo lo gestiona todo desde un solo lugar.

Mira: chat en vivo en WordPress en 45 segundos

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

Paso 1: abre los ajustes del chat web

En tu panel de Bugalou, haz clic en "Canales" en la barra lateral izquierda para abrir el catálogo de canales. Busca la tarjeta de "Chat web" (lleva la etiqueta "Popular") y haz clic en "Conectar" (o en "Gestionar" si ya está configurado).

Paso 2: activa el widget

En la página del chat web verás 6 pestañas. Empieza por la pestaña "Instalación":

1. En "Estado del widget", pon el interruptor en "Activo": así el widget se hace visible en tu web
2. Copia el código de instalación que aparece en la página

¿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.

Paso 3: instala el código del widget

Pega el código de instalación justo antes de la etiqueta de cierre </body> de tu web. El código tiene este aspecto:

<!-- Bugalou Website Chat Widget -->
<script>
  (function() {
    var w = window;
    var d = document;
    w.BugalouWidget = w.BugalouWidget || {};
    w.BugalouWidget.key = 'YOUR_WIDGET_KEY';
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://bugalou.com/widget/loader.js';
    var x = d.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })();
</script>

Otras plataformas

• Wix: ve a Ajustes → Código personalizado → Añadir código personalizado → Final del body
• Next.js / React: añade el script a tu componente de layout o usa un componente <Script>

Paso 4: prueba la instalación

En la pestaña Instalación, introduce el dominio de tu web en el campo "Probar instalación" y haz clic en el botón para verificar que el widget se carga correctamente.

Paso 5: restringe a dominios concretos (opcional)

En "Dominios permitidos" puedes restringir el widget para que solo funcione en dominios concretos. Introduce un dominio (por ejemplo, example.com o *.example.com) y haz clic en el botón "+". Déjalo vacío para permitir el widget en cualquier dominio.

Personaliza la apariencia

Haz clic en la pestaña "Apariencia" para personalizar el aspecto del widget. Puedes cambiar:

• Colores: color principal (se usa en el degradado de cabecera, el botón de llamada a la acción y el botón del chat), color del texto del botón, color del texto de los mensajes, color del texto de la cabecera de bienvenida, fondo del chat
• Ajustes del botón: posición (izquierda o derecha), márgenes horizontal y vertical, estilo del botón (círculo, cuadrado redondeado, cuadrado, píldora o flotante) e icono del botón (puntos de chat, burbuja, mensaje, soporte, rayo u ola)
• Mensaje de bienvenida y textos: título, mensaje, título de la pantalla de inicio, texto del botón de chat, subtítulo de la pestaña de correo, texto de ejemplo del campo de entrada y mensaje de saludo del chat (se muestra cuando un visitante abre el chat, antes de enviar un mensaje)
• Idioma: elige entre neerlandés e inglés (controla todas las etiquetas de la interfaz del widget)
• Logotipo: se muestra en la cabecera de la pantalla de inicio, en la tarjeta del agente, en la cabecera del chat y en la cabecera de la pestaña de correo

Una vista previa en vivo con tres pestañas (Inicio, Chat, Correo) en el lado derecho de la página muestra exactamente cómo se verá cada pantalla a medida que haces cambios. Todos los cambios se guardan automáticamente.

Formulario previo al chat (opcional)

Haz clic en la pestaña "Formulario previo al chat" para recoger los datos del visitante antes de que empiece a chatear. Activa "Activar formulario previo al chat" y configura qué campos mostrar:

• Nombre: activado por defecto, se puede marcar como obligatorio
• Apellidos: activado por defecto, se puede marcar como obligatorio
• Correo electrónico: activado por defecto, se puede marcar como obligatorio
• Número de teléfono: opcional, desactivado por defecto
• Asunto: opcional, desactivado por defecto
• Número de pedido: opcional, desactivado por defecto

También puedes activar una casilla de privacidad para exigir que los visitantes acepten tu política de privacidad antes de chatear.

Nota: los visitantes ven primero la pantalla de Inicio al abrir el widget. El formulario previo al chat aparece cuando hacen clic en el botón de llamada a la acción o cambian a la pestaña Chat.

Respuesta automática

Haz clic en la pestaña "Respuesta automática" para definir mensajes automáticos distintos para:

• En línea: cuando tu equipo está disponible
• Sin conexión: cuando no hay nadie disponible
• Fuera de horario: fuera de tu horario de atención configurado

Aquí también puedes configurar tu horario de apertura para cada día de la semana (de lunes a domingo), incluidas las horas de inicio y fin.

FAQ (plan Pro+)

En la pestaña "FAQ" (requiere el plan Pro+) puedes añadir preguntas frecuentes. Las preguntas se muestran como un acordeón en la pantalla de inicio del widget: los visitantes pueden desplegar las preguntas para leer la respuesta sin iniciar un chat.

Comportamiento

Haz clic en la pestaña "Comportamiento" para controlar los ajustes avanzados del widget:

• Disparadores de visualización: muestra el widget tras un número de segundos o tras desplazarse un porcentaje de la página
• Configuración de dispositivos: elige si se muestra en móvil y/o en escritorio
• Chatbot de IA: activa las respuestas automáticas con IA (requiere el plan Pro y el AI Agent activado)
• Reglas de página: muestra el widget solo en páginas concretas, o ocúltalo en determinadas páginas (por ejemplo, ocúltalo en /checkout)
• Marca "Powered by Bugalou": actívala o desactívala

Haz clic en "Guardar cambios" después de hacer cualquier modificación en cada pestaña.

Enrutamiento por equipos

Después de configurar tu widget, puedes asignar un equipo predeterminado a este canal. Todas las conversaciones nuevas de chat en vivo se enrutarán automáticamente al equipo seleccionado. Ve a la página de ajustes del widget y usa el desplegable "Equipo predeterminado" para elegir un equipo.

Para un enrutamiento más avanzado, puedes crear reglas de enrutamiento que dirijan las conversaciones según palabras clave, la hora del día u otras condiciones. Consulta Gestión de equipos para una visión completa.