BOTIA Widget

Documentación de integración para chat embebible

Instalación

Para integrar el widget en su sitio web, agregue el siguiente código antes del cierre de </body>:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://su-dominio.com/botia-widget.js"></script>
<script>
  BotiaWidget.init({
    apiUrl: 'https://su-api.com'
  });
</script>

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	#1b396a	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

Configuración básica

BotiaWidget.init({
  apiUrl: 'https://api.ejemplo.com'
});

Configuración personalizada

BotiaWidget.init({
  apiUrl: 'https://api.ejemplo.com',
  title: 'Soporte Técnico',
  subtitle: 'Atención 24/7',
  primaryColor: '#1b396a',
  position: 'bottom-left'
});

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

• Diseño responsive (móvil y desktop)
• Estilos completamente aislados
• Gestión automática de sesiones
• Soporte para formato Markdown
• Sin dependencias de frameworks