crono-chat-widget
Version:
Widget de chat de Crono AI que puede ser incorporado en cualquier proyecto
134 lines (103 loc) • 3.63 kB
Markdown
# 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
```bash
npm install crono-chat-widget
```
o usando yarn:
```bash
yarn add crono-chat-widget
```
### Vía CDN
Puedes incluir el widget directamente en tu HTML usando el CDN de unpkg:
```html
<!-- 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/lucide-react@0.487.0/dist/umd/lucide-react.min.js"></script>
<!-- Cargar el widget de Crono Chat desde CDN -->
<script crossorigin src="https://unpkg.com/crono-chat-widget@1.0.0/dist/index.umd.min.js"></script>
```
## Uso
### En un proyecto React (npm)
```jsx
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)
```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/lucide-react@0.487.0/dist/umd/lucide-react.min.js"></script>
<script crossorigin src="https://unpkg.com/crono-chat-widget@1.0.0/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:
```bash
# Instalar dependencias
npm install
# Iniciar el servidor de desarrollo
npm run dev
# Construir para producción
npm run build
```
## Licencia
MIT