Betten Sie das Chat-Widget des Clawdbot KI-Assistenten in Ihre Website ein. Erfahren Sie, wie Sie die Webchat-Oberfläche konfigurieren und anpassen.

Clawdbot Webchat Übersicht

Webchat ermöglicht es Ihnen, eine Chat-Oberfläche in jede Website einzubetten, sodass Besucher direkt über ihren Browser mit Ihrem Clawdbot-Assistenten interagieren können.

Funktionen

Funktion	Beschreibung
Einbettbar	Zu jeder Website hinzufügen
Anpassbar	An Ihre Marke anpassen
Responsiv	Funktioniert auf allen Geräten
Persistent	Sitzungskontinuität
Echtzeit	Live-Chat-Erlebnis

Schnellstart

Webchat aktivieren

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

Zu Ihrer Website hinzufügen:

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

Konfiguration

Webchat-Einstellungen

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

Option	Standard	Beschreibung
`position`	`bottom-right`	Widget-Position
`width`	`400px`	Chat-Fensterbreite
`height`	`600px`	Chat-Fensterhöhe
`buttonSize`	`60px`	Startknopf-Größe

Anpassung

Themes

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

Benutzerdefiniertes CSS

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

Branding

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

JavaScript-API

// Chat öffnen
ClawdbotChat.open();

// Chat schließen
ClawdbotChat.close();

// Chat umschalten
ClawdbotChat.toggle();

// Nachricht programmatisch senden
ClawdbotChat.send("Hello!");

// Benutzerinformationen festlegen
ClawdbotChat.setUser({
  id: "user123",
  name: "John",
  email: "[email protected]"
});

Events

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

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

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

Sitzungsverwaltung

Sitzungspersistenz

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

Gast vs Authentifiziert

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

Sicherheit

CORS-Konfiguration

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

Ratenbegrenzung

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

Mobile Unterstützung

Responsives Design

Webchat passt sich automatisch an mobile Bildschirme an:

Vollbild auf Mobilgeräten
Touch-freundliche Oberfläche
Tastaturbehandlung

Mobile Konfiguration

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

Analytics

Nutzung verfolgen

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

Nächste Schritte

Clawdbot Web-Oberfläche - Web-Übersicht
Clawdbot Control UI - Dashboard-Anleitung
Clawdbot Gateway - Gateway-Konfiguration

Clawdbot Webchat