BOTI Widget

Documentación técnica de integración del chat embebible para la Universidad Nacional del Altiplano.

Nota: El widget se implementa como un botón flotante en la esquina inferior derecha de la página.

Instalación

Agregue el siguiente código antes del cierre de la etiqueta </body> en su página HTML:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://botia-admin.pages.dev/boti.widget.js"></script>
<script>
  BotiWidget.init({
    apiUrl: 'https://susan-connection-caution-cities.trycloudflare.com'
  });
</script>

Importante: La llamada al método init() es obligatoria. El widget no se renderizará sin esta inicialización explícita.

Configuración

El widget acepta las siguientes opciones de configuración:

Parámetro	Tipo	Por Defecto	Descripción
`apiUrl`	string	-	URL del endpoint de API (requerido)
`title`	string	Asistente Virtual UNA-Puno	Título del widget
`subtitle`	string	Servicio de atención virtual	Subtítulo del widget
`primaryColor`	string	#1a202c	Color principal (hexadecimal)
`position`	string	bottom-right	Posición del widget (bottom-right \| bottom-left)
`logoUrl`	string	/images/Logo_UNAP.png	URL del logo
`placeholder`	string	Escribe tu consulta aquí...	Texto del input

Ejemplos de uso

Configuración mínima

BotiWidget.init({
  apiUrl: 'https://susan-connection-caution-cities.trycloudflare.com'
});

Configuración completa

BotiWidget.init({
  apiUrl: 'https://susan-connection-caution-cities.trycloudflare.com',
  title: 'Soporte UNAP',
  subtitle: 'Asistencia virtual 24/7',
  primaryColor: '#1b396a',  // Color azul UNAP (personalizado)
  position: 'bottom-right',
  logoUrl: '/images-boti/Logo_UNAP.png',
  placeholder: 'Escribe tu consulta aquí...'
});

Implementación completa

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de integración</title>
</head>
<body>
  <h1>Contenido de la página</h1>

  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="https://botia-admin.pages.dev/boti.widget.js"></script>
  <script>
    BotiWidget.init({
      apiUrl: 'https://susan-connection-caution-cities.trycloudflare.com'
    });
  </script>
</body>
</html>

Formato de API

El widget envía peticiones POST a /chat con el siguiente formato:

Petición

{
  "mensaje": "Texto del usuario",
  "session_id": "session_123456",
  "canal": "web",
  "metadata_extra": {
    "timestamp": 1234567890
  }
}

Respuesta esperada

{
  "respuesta": "Respuesta del asistente",
  "session_id": "session_123456"
}

Compatibilidad

El widget es compatible con los siguientes navegadores:

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

Características técnicas

Diseño responsive adaptable a dispositivos móviles y escritorio
Encapsulación completa de estilos CSS mediante Shadow DOM
Gestión automática de sesiones mediante localStorage
Soporte para renderizado de formato Markdown
Implementación en JavaScript vanilla sin dependencias de frameworks
Compatible con React, Vue, Angular y HTML estático

Alojamiento local

Para hospedar los archivos en su propio servidor, requiere los siguientes recursos:

boti.widget.js - Archivo JavaScript principal (24 KB)
images-boti/ - Directorio de recursos gráficos

Estructura de directorios recomendada:

proyecto/
├── assets/
│   └── boti.widget.js
└── images-boti/
    ├── Logo_UNAP.png
    └── boti.webp