@diagram-amposta/chatbot-sdk

v1.1.1

Published

5 months ago

SDK JavaScript para integrar el chatbot de Diagram-Amposta en cualquier sitio web

Downloads

154

0High
0Medium
0Low

gabrieldiagram

chatbot diagram-amposta sdk chat assistant

TIC Place Chatbot SDK

SDK JavaScript para integrar el chatbot de TIC Place en cualquier sitio web. Conecta directamente con las APIs de TIC Place sin necesidad de backend intermedio.

Características

✅ Fácil integración: Un simple script tag o instalación npm
✅ Conexión directa: Se conecta directamente a las APIs de TIC Place
✅ Selección de zonas: Carga y muestra zonas disponibles automáticamente
✅ Personalizable: Colores, mensajes y comportamiento configurables
✅ Responsive: Diseño adaptativo para móviles y tablets
✅ Historial: Guarda conversaciones en localStorage
✅ Sin dependencias: Vanilla JavaScript, sin frameworks requeridos

Instalación

Opción 1: Script Tag (CDN)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/@diagram-amposta/chatbot-sdk@latest/dist/diagram-amposta-chatbot.css">
</head>
<body>
    <!-- Tu contenido -->
    
    <script src="https://unpkg.com/@diagram-amposta/chatbot-sdk@latest/dist/diagram-amposta-chatbot.js"></script>
    <script>
        DiagramAmpostaChatbot.init({
            agentKey: 'ag_TU_CLAVE_AQUI',
            companyName: 'Diagram',
            primaryColor: '#3B82F6',
            botName: 'Asistente',
            welcomeMessage: 'Bienvenido, ¿en qué te podemos ayudar?',
            autoOpenDelay: 5
        });
    </script>
</body>
</html>

Opción 2: NPM

npm install @diagram-amposta/chatbot-sdk

import DiagramAmpostaChatbot from '@diagram-amposta/chatbot-sdk';

DiagramAmpostaChatbot.init({
    agentKey: 'ag_TU_CLAVE_AQUI',
    companyName: 'Diagram',
    primaryColor: '#3B82F6',
    botName: 'Asistente',
    welcomeMessage: 'Bienvenido, ¿en qué te podemos ayudar?',
    autoOpenDelay: 5
});

Configuración

Variables de Entorno (.env)

Puedes usar un archivo .env para la configuración:

DIAGRAM_AMPOSTA_AGENT_KEY=ag_TU_CLAVE_AQUI
DIAGRAM_AMPOSTA_COMPANY_NAME=Diagram
DIAGRAM_AMPOSTA_PRIMARY_COLOR=#3B82F6
DIAGRAM_AMPOSTA_BOT_NAME=Asistente
DIAGRAM_AMPOSTA_WELCOME_MESSAGE=Bienvenido, ¿en qué te podemos ayudar?
DIAGRAM_AMPOSTA_AUTO_OPEN_DELAY=5
DIAGRAM_AMPOSTA_ENABLE_CHAT=true

En el navegador, puedes usar window.__DIAGRAM_AMPOSTA_ENV__:

window.__DIAGRAM_AMPOSTA_ENV__ = {
    agentKey: 'ag_TU_CLAVE_AQUI',
    companyName: 'Diagram',
    primaryColor: '#3B82F6'
};

DiagramAmpostaChatbot.init(); // Carga automáticamente desde window.__DIAGRAM_AMPOSTA_ENV__

Opciones de Configuración

| Opción | Tipo | Requerido | Default | Descripción | |--------|------|-----------|---------|-------------| | agentKey | string | ✅ Sí | - | API Key del agente de TIC Place | | companyName | string | ✅ Sí | - | Nombre de la empresa (para cargar zonas) | | primaryColor | string | No | #3B82F6 | Color principal del chatbot (hex) | | botName | string | No | Asistente | Nombre del bot | | welcomeMessage | string | No | ¡Hola! ¿En qué puedo ayudarte? | Mensaje de bienvenida | | autoOpenDelay | number | No | 0 | Segundos para auto-abrir (0 = desactivado) | | enableChat | boolean | No | true | Mostrar/ocultar el chatbot | | position | string | No | bottom-right | Posición: bottom-right o bottom-left | | theme | string | No | light | Tema: light o dark | | enableHistory | boolean | No | true | Guardar historial de conversaciones | | enableTypingIndicator | boolean | No | true | Mostrar indicador de escritura |

Uso Avanzado

Acceso a la instancia

const chatbot = DiagramAmpostaChatbot.init({
    agentKey: 'ag_TU_CLAVE_AQUI',
    companyName: 'Diagram'
});

// Métodos disponibles
chatbot.handleOpen();  // Abrir chat programáticamente
chatbot.handleClose(); // Cerrar chat programáticamente
chatbot.destroy();     // Destruir instancia y limpiar

Personalización de estilos

El SDK incluye estilos CSS que puedes sobrescribir. Los estilos dinámicos (colores) se aplican automáticamente basándose en primaryColor.

Desarrollo

Clonar y desarrollar

git clone https://github.com/diagram-amposta/diagram-amposta-chatbot-sdk.git
cd diagram-amposta-chatbot-sdk
npm install

Build

npm run build

Esto generará los archivos en dist/:

diagram-amposta-chatbot.js - Bundle completo
diagram-amposta-chatbot.css - Estilos

Ejemplos

Ver ejemplos en la carpeta examples/:

basic.html - Integración básica con script tag
npm-example.html - Uso con npm
env-example.html - Configuración con variables de entorno

Estructura del Proyecto

diagram-amposta-chatbot-sdk/
├── src/
│   ├── index.js       # Punto de entrada
│   ├── Chatbot.js     # Clase principal
│   ├── API.js         # Cliente API
│   ├── UI.js          # Interfaz de usuario
│   ├── Storage.js     # Gestión de almacenamiento
│   └── utils.js       # Utilidades
├── styles/
│   └── chatbot.css    # Estilos
├── examples/          # Ejemplos de uso
├── dist/             # Archivos compilados
└── package.json

Compatibilidad

Navegadores modernos (Chrome, Firefox, Safari, Edge)
ES6+ requerido
Sin dependencias externas

Licencia

MIT

Soporte

Para más información, visita Diagram-Amposta.com

Changelog

1.0.0

Lanzamiento inicial
Integración básica del chatbot
Selección de zonas
Personalización de colores y mensajes
Historial de conversaciones