ChatBot Aseguradoras

Un chatbot interactivo para consultas sobre seguros que permite seleccionar aseguradora y plan antes de realizar consultas.

Características

• 🏢 Selección de aseguradora (actualmente incluye RIMAC)
• 📋 Selección de plan (PLATINUM, PREMIUM, PLUS)
• 💬 Chat interactivo con respuestas en tiempo real
• 🔗 Integración con API endpoint
• 📱 Diseño responsive
• ⚡ Interfaz moderna y amigable

Estructura del Proyecto

ChatBotAseguradoras/
│
├── index.html          # Estructura principal del chatbot
├── style.css           # Estilos y diseño
├── script.js           # Lógica del chatbot y API
└── README.md           # Este archivo

Configuración

Endpoint API

El chatbot está configurado para usar el endpoint:

https://n8nasistent.sytes.net/webhook-test/consulta

Formato de la Petición

{
    "user_id": "user_1722988800123_5678",
    "aseguradora": "aseguradora1",
    "plan": "plan1",
    "consulta": "¿Qué plan es?"
}

Generación de ID Único

• ID automático: Se genera un ID único para cada usuario al cargar la página
• Formato: user_{timestamp}_{numeroAleatorio}
• Persistencia: El ID se mantiene durante toda la sesión
• Tracking: Permite rastrear consultas por usuario en el backend

Datos Actuales

Actualmente incluye:

• Aseguradora: RIMAC
• Planes: PLATINUM, PREMIUM, PLUS

Uso

1. Abrir index.html en un navegador web
2. Seleccionar una aseguradora del primer combobox
3. Seleccionar un plan del segundo combobox
4. Escribir la consulta en el campo de texto
5. Hacer clic en enviar o presionar Enter
6. Ver la respuesta del bot en el chat

Personalización

Agregar Nuevas Aseguradoras

Para agregar más aseguradoras, modifica el objeto segurosData en script.js:

const segurosData = {
    'RIMAC': {
        nameAseguradora: 'RIMAC',
        planes: [
            { id: 'PLATINUM', namePlan: 'PLATINUM' },
            { id: 'PREMIUM', namePlan: 'PREMIUM' },
            { id: 'PLUS', namePlan: 'PLUS' }
        ]
    },
    'NUEVA_ASEGURADORA': {
        nameAseguradora: 'Nueva Aseguradora',
        planes: [
            { id: 'BASICO', namePlan: 'BÁSICO' },
            { id: 'ESTANDAR', namePlan: 'ESTÁNDAR' }
        ]
    }
};

Cambiar el Endpoint

Modifica la constante API_ENDPOINT en script.js:

const API_ENDPOINT = 'tu-nuevo-endpoint-aqui';

Funcionalidades

Chat Interactivo

• Mensajes del usuario aparecen a la derecha (azul)
• Respuestas del bot aparecen a la izquierda (blanco)
• Formato de texto enriquecido:
  • **texto** se convierte en negrita
  • *texto* se convierte en cursiva
• Indicador de escritura: Muestra "ChatBot está escribiendo..." con puntos animados
• Chat bloqueado: Se desactiva el input mientras se espera respuesta
• Timestamps en cada mensaje
• Scroll automático a los mensajes nuevos

Validaciones

• No se puede enviar mensajes hasta seleccionar aseguradora y plan
• Validación de campos requeridos
• Manejo de errores de red

Estados Visual

• Loading spinner durante las consultas
• Mensajes de error claros
• Confirmación visual de selección

Tecnologías Utilizadas

• HTML5
• CSS3 (con Flexbox y Grid)
• JavaScript ES6+
• Fetch API para las peticiones HTTP

Navegadores Compatibles

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Funciones JavaScript Disponibles

Gestión de Usuario

// Obtener el ID del usuario actual
const currentUserId = ChatBot.getUserId();

// Regenerar ID de usuario (nueva sesión)
const newUserId = ChatBot.regenerateUserId();

Gestión de Aseguradoras

// Agregar nueva aseguradora
ChatBot.addAseguradora('NUEVA_ASEGURADORA', 'Nueva Aseguradora', 'aseguradora2', [
    { id: 'BASICO', namePlan: 'BÁSICO', planId: 'plan1' },
    { id: 'ESTANDAR', namePlan: 'ESTÁNDAR', planId: 'plan2' }
]);

// Cargar datos desde API
await ChatBot.loadDataFromAPI();

// Acceder a datos actuales
console.log(ChatBot.segurosData);

Próximas Mejoras

• Cargar datos desde API
• Historial de conversaciones
• Modo oscuro
• Exportar conversaciones
• Múltiples idiomas
• Búsqueda en el chat

Soporte

Para reportar problemas o sugerir mejoras, contacta al equipo de desarrollo.