Chatbot Widget Demo

Test the embeddable AI chatbot widget on this page

Características

  • Respuestas potenciadas por LangFlow
  • Historial de chat persistente
  • Temas y estilos personalizables
  • Diseño responsive para móviles
  • Sistema de handoff a operadores humanos
  • Fácil integración con una etiqueta script
  • Comunicación en tiempo real vía WebSocket
  • Panel de administración para operadores

Cómo Integrar

Agrega esta línea en cualquier sitio web para integrar el chatbot:

<script src="https://yoursite.com/widget.js"></script>

El widget se cargará automáticamente y se posicionará en la esquina inferior derecha.

Configuración del Widget

Personaliza el widget mediante la API /api/config:

{
  "theme": {
    "primaryColor": "#4f46e5",
    "backgroundColor": "#ffffff"
  },
  "chat": {
    "title": "Asistente IA",
    "welcomeMessage": "¡Hola! ¿Cómo puedo ayudarte hoy?",
    "welcomingQuestion1": "¿Cómo comprar?",
    "welcomingQuestion2": "¿Cuáles son los horarios?"
  },
  "context": {
    "enablePersistence": true,
    "maxHistoryLength": 20
  }
}

Sistema de Handoff Humano

Los usuarios pueden solicitar ayuda de un operador humano en cualquier momento.

  • Botón "Hablar con un humano" siempre visible
  • Control exclusivo por operador
  • Notificaciones en tiempo real vía WebSocket
  • Timeout automático de 30 minutos de inactividad
  • Historial completo desde LangFlow

Panel de Administración

Los operadores pueden gestionar conversaciones desde el panel admin.

Acceso al Panel:

https://yoursite.com/admin.html
  • Ver sesiones activas en tiempo real
  • Tomar control de conversaciones
  • Responder a usuarios en tiempo real
  • Sistema keepalive automático

Endpoints de la API

Chat Principal

POST
/api/chat

Envía mensajes al bot

POST
/api/chat/escalate

Escala a modo humano

Control de Handoff

POST
/api/chat/handover/take

Tomar control de sesión

POST
/api/chat/handover/release

Liberar sesión

Administración

GET
/api/chat/admin/conversations/active

Lista sesiones activas

POST
/api/chat/admin/send

Envía mensaje de operador

WebSocket

WS
/api/chat/ws

Conexión tiempo real para clientes y operadores

Instalación y Configuración

1. Instalar Dependencias

npm install

2. Configurar Variables de Entorno

Crea un archivo .env.local con:

LANGFLOW_API_URL=http://localhost:7860
LANGFLOW_API_KEY=tu-api-key
LANGFLOW_FLOW_ID=tu-flow-id
HUMAN_TIMEOUT_MS=1800000
PORT=3000

3. Iniciar el Servidor

npm run dev

Arquitectura del Sistema

Widget Cliente →Conecta vía WebSocket al servidor para mensajes en tiempo real
Servidor Backend →Next.js con API Routes + WebSocket Server (server.js)
SessionManager →Gestiona estados de sesión y control exclusivo de operadores
LangFlow →Procesa mensajes del bot cuando no hay operador activo
Panel Admin →Interfaz para operadores con gestión de conversaciones en tiempo real

¡Prueba el widget ahora!

Busca el botón de chat en la esquina inferior derecha para probar el chatbot