@tinybot/chat-widget

Un widget de chat réutilisable et personnalisable pour applications React et Next.js, facilement intégrable avec votre backend.

🚀 Installation

npm install @tinybot/chat-widget
# ou
yarn add @tinybot/chat-widget

💻 Utilisation

'use client';

import { ChatWidget } from '@tinybot/chat-widget';

export default function Page() {
  return (
    <div className="container">
      <h1>Mon Application</h1>
      <ChatWidget 
        chatbotId="votre-chatbot-id"
        apiKey="votre-api-key"
        position="bottom-right"
      />
    </div>
  );
}

🔧 Configuration requise

• React 18+
• TypeScript 4.9+
• Node.js 16+

📦 Props

| Prop | Type | Requis | Défaut | Description | |------|------|--------|---------|-------------| | chatbotId | string | ✅ | - | L'ID unique de votre chatbot | | apiKey | string | ✅ | - | Votre clé API pour l'authentification | | position | string | ❌ | 'bottom-right' | Position du widget: 'bottom-right', 'bottom-left', 'top-right', 'top-left' | | initialIsOpen | boolean | ❌ | false | Si le chat doit être ouvert par défaut | | theme | object | ❌ | - | Personnalisation du thème (voir section Thème ci-dessous) |

🎨 Personnalisation du thème

Vous pouvez personnaliser l'apparence du widget en passant un objet theme :

<ChatWidget
  chatbotId="123"
  apiKey="votre-api-key"
  theme={{
    primary_color: '#3b82f6',
    background_color: '#ffffff',
    text_color: '#1f2937',
    // ... autres propriétés de thème
  }}
/>

🛠 Développement

1. Cloner le dépôt
2. Installer les dépendances :

   npm install

3. Lancer le mode développement :

   npm run dev

4. Construire le package :

   npm run build

📦 Publication

Pour publier une nouvelle version :

1. Mettre à jour la version dans package.json
2. Exécuter :

   npm login
   npm publish --access public

📄 Licence

MIT

MIT