Intégrez le widget de chat de l'assistant IA Clawdbot sur votre site web. Apprenez à configurer et personnaliser l'interface de chat web.

Aperçu du Chat Web Clawdbot

Le Chat Web vous permet d'intégrer une interface de chat sur n'importe quel site web, permettant aux visiteurs d'interagir avec votre assistant Clawdbot directement depuis leur navigateur.

Fonctionnalités

Fonctionnalité	Description
Intégrable	Ajouter à n'importe quel site
Personnalisable	Correspondre à votre marque
Responsive	Fonctionne sur tous les appareils
Persistant	Continuité de session
Temps réel	Expérience de chat en direct

Démarrage Rapide

Activer le Chat Web

{
  "web": {
    "webchat": {
      "enabled": true,
      "path": "/chat"
    }
  }
}

Ajouter à votre site web :

<script src="https://your-gateway.com/webchat.js"></script>
<script>
  ClawdbotChat.init({
    gateway: 'wss://your-gateway.com',
    theme: 'light'
  });
</script>

Configuration

Paramètres du Chat Web

{
  "web": {
    "webchat": {
      "enabled": true,
      "title": "Chat with AI",
      "placeholder": "Type your message...",
      "welcomeMessage": "Hello! How can I help you today?"
    }
  }
}

Option	Par défaut	Description
`position`	`bottom-right`	Position du widget
`width`	`400px`	Largeur de la fenêtre de chat
`height`	`600px`	Hauteur de la fenêtre de chat
`buttonSize`	`60px`	Taille du bouton de lancement

Personnalisation

Thèmes

{
  "webchat": {
    "theme": {
      "primary": "#007bff",
      "background": "#ffffff",
      "text": "#333333",
      "userBubble": "#007bff",
      "botBubble": "#f0f0f0"
    }
  }
}

CSS Personnalisé

{
  "webchat": {
    "customCSS": "/path/to/custom.css"
  }
}

Marque

{
  "webchat": {
    "logo": "/path/to/logo.png",
    "botAvatar": "/path/to/avatar.png",
    "botName": "Assistant"
  }
}

API JavaScript

// Ouvrir le chat
ClawdbotChat.open();

// Fermer le chat
ClawdbotChat.close();

// Basculer le chat
ClawdbotChat.toggle();

// Envoyer un message par programmation
ClawdbotChat.send("Hello!");

// Définir les informations utilisateur
ClawdbotChat.setUser({
  id: "user123",
  name: "John",
  email: "[email protected]"
});

Événements

ClawdbotChat.on('open', () => {
  console.log('Chat opened');
});

ClawdbotChat.on('close', () => {
  console.log('Chat closed');
});

ClawdbotChat.on('message', (msg) => {
  console.log('New message:', msg);
});

Gestion des Sessions

Persistance de Session

{
  "webchat": {
    "session": {
      "persist": true,
      "storage": "localStorage",
      "expiry": 86400000
    }
  }
}

Invité vs Authentifié

{
  "webchat": {
    "auth": {
      "required": false,
      "methods": ["guest", "oauth"]
    }
  }
}

Sécurité

Configuration CORS

{
  "webchat": {
    "cors": {
      "origins": ["https://yourdomain.com"]
    }
  }
}

Limite de Débit

{
  "webchat": {
    "rateLimit": {
      "messages": 10,
      "window": 60000
    }
  }
}

Support Mobile

Design Responsive

Le Chat Web s'adapte automatiquement aux écrans mobiles :

Plein écran sur mobile
Interface tactile
Gestion du clavier

Configuration Mobile

{
  "webchat": {
    "mobile": {
      "fullScreen": true,
      "hideOnKeyboard": false
    }
  }
}

Analytiques

Suivi d'Utilisation

{
  "webchat": {
    "analytics": {
      "enabled": true,
      "events": ["open", "close", "message"]
    }
  }
}

Prochaines Étapes

Interface Web Clawdbot - Aperçu web
Interface de Contrôle Clawdbot - Guide du tableau de bord
Passerelle Clawdbot - Configuration de la passerelle

Chat Web Clawdbot