crono-chat-widget
v1.0.0
Published
Widget de chat de Crono AI que puede ser incorporado en cualquier proyecto
Maintainers
gabrielmedinavindigniReadme
Crono Chat Widget
Widget de chat de Crono AI que puede ser incorporado en cualquier proyecto web, disponible tanto a través de npm como de CDN.
Instalación
Vía npm
npm install crono-chat-widgeto usando yarn:
yarn add crono-chat-widgetVía CDN
Puedes incluir el widget directamente en tu HTML usando el CDN de unpkg:
<!-- Cargar React desde CDN (requerido) -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- Cargar Lucide React desde CDN (requerido) -->
<script crossorigin src="https://unpkg.com/[email protected]/dist/umd/lucide-react.min.js"></script>
<!-- Cargar el widget de Crono Chat desde CDN -->
<script crossorigin src="https://unpkg.com/[email protected]/dist/index.umd.min.js"></script>Uso
En un proyecto React (npm)
import React from 'react';
import { CronoChatWidget } from 'crono-chat-widget';
function App() {
// Configuración del widget
const chatConfig = {
apiKey: 'TU_API_KEY', // Reemplazar con tu API key real
theme: 'light', // 'light' o 'dark'
position: 'right', // 'right' o 'left'
initialMessage: '¡Hola! ¿En qué puedo ayudarte hoy?'
};
return (
<div className="app">
<h1>Mi Aplicación con Crono Chat</h1>
{/* Integrar el widget de chat */}
<CronoChatWidget
config={chatConfig}
/>
</div>
);
}
export default App;En un sitio web estático (CDN)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Crono Chat Widget</title>
<!-- Cargar las dependencias necesarias -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/dist/umd/lucide-react.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/dist/index.umd.min.js"></script>
</head>
<body>
<!-- Contenedor donde se montará el widget -->
<div id="crono-chat-container"></div>
<script>
// Configuración del widget
const config = {
apiKey: 'TU_API_KEY', // Reemplazar con tu API key real
theme: 'light', // 'light' o 'dark'
position: 'right', // 'right' o 'left'
initialMessage: '¡Hola! ¿En qué puedo ayudarte hoy?'
};
// Inicializar el widget cuando el DOM esté completamente cargado
document.addEventListener('DOMContentLoaded', function() {
// Montar el widget en el contenedor
CronoChatWidget.mount(
document.getElementById('crono-chat-container'),
config
);
});
</script>
</body>
</html>Opciones de Configuración
El widget acepta las siguientes opciones de configuración:
| Opción | Tipo | Descripción | Valor por defecto | |--------|------|-------------|------------------| | apiKey | string | Tu API key de Crono AI (requerida) | - | | theme | string | Tema del widget ('light' o 'dark') | 'light' | | position | string | Posición del botón flotante ('right' o 'left') | 'right' | | initialMessage | string | Mensaje inicial que se muestra al abrir el chat | '¡Hola! ¿En qué puedo ayudarte?' |
Desarrollo
Para desarrollar y probar el widget localmente:
# Instalar dependencias
npm install
# Iniciar el servidor de desarrollo
npm run dev
# Construir para producción
npm run buildLicencia
MIT