WebChat-Einrichtung

Es gibt ein altes chinesisches Sprichwort: "Shui dao qu cheng" — Wasser fließt natürlich zu seinem Ziel. WebChat verkörpert dieses Prinzip. Nutzer müssen nichts herunterladen, konfigurieren oder sich an eine bestimmte Plattform anpassen. Sie öffnen einfach einen Browser, und die Verbindung entsteht. Keine Reibung, kein Gatekeeping, keine Frage, ob ihr Gerät unterstützt wird.

WebChat ist der zugänglichste Weg, mit deinem OpenClaw-Agenten zu interagieren. Es funktioniert auf jedem Gerät mit Browser: Handys, Tablets, Laptops, sogar auf dem alten Computer in der Ecke, der immer noch Windows 7 läuft. Wenn es einen Browser und Internet hat, kann es WebChat nutzen.

Was du brauchst

• Eine laufende OpenClaw-Instanz
• Einen modernen Webbrowser (Chrome, Firefox, Safari, Edge)
• Netzwerkzugriff auf dein OpenClaw-Gateway
• Etwa 10 Minuten für die Ersteinrichtung

Wie WebChat in OpenClaw passt

Stell dir WebChat wie den Concierge-Schalter in einem Hotel vor. Er ist immer sichtbar, immer erreichbar und kümmert sich um die erste Interaktion mit jedem, der hereinkommt. Spezialisierte Kanäle wie Signal oder Discord sind wie private Suiten — besser für laufende Beziehungen, aber man muss wissen, wie man dorthin kommt.

WebChat sitzt zwischen deinen Nutzern und deiner OpenClaw-Instanz. Wenn jemand die WebChat-URL öffnet, baut sein Browser eine WebSocket-Verbindung zu deinem Gateway auf. Nachrichten fließen in Echtzeit, Dateien können hochgeladen werden und die volle Leistung deines Agenten ist über ein einfaches Web-Interface verfügbar.

Schritt 1: WebChat in OpenClaw aktivieren

Zuerst stellst du sicher, dass der WebChat-Kanal in deiner OpenClaw-Konfiguration aktiviert ist.

Konfiguration prüfen

Bearbeite deine OpenClaw-Konfigurationsdatei (normalerweise config.yaml):

# WebChat-Kanal-Konfiguration
channels:
  entries:
    - name: webchat
      type: webchat
      enabled: true
      config:
        # Optional: Authentifizierung erforderlich
        requireAuth: false
        # Optional: Erlaubte Origins für CORS
        allowedOrigins:
          - "https://deinedomain.com"
        # Optional: Custom-Path (Standard ist /webchat)
        path: "/webchat"

Gateway neu starten

Nach dem Aktivieren von WebChat startest du dein OpenClaw-Gateway neu:

# Bei Docker Compose
docker compose restart

# Bei systemd
sudo systemctl restart openclaw

# Oder über die OpenClaw-CLI
openclaw gateway restart

Schritt 2: Auf das WebChat-Interface zugreifen

Sobald aktiviert, ist WebChat unter deiner OpenClaw-Gateway-URL erreichbar.

Standard-WebChat-URL

Wenn dein OpenClaw-Gateway unter https://deine-openclaw-instanz.com läuft, ist das WebChat-Interface typischerweise unter:

https://deine-openclaw-instanz.com/webchat

Überprüfen, dass WebChat läuft

1. Öffne die WebChat-URL in deinem Browser
2. Du solltest ein Chat-Interface laden sehen
3. Prüfe, dass der Verbindungs-Indikator "Verbunden" zeigt
4. Sende eine Testnachricht, um Antworten zu verifizieren

Schritt 3: Authentifizierung konfigurieren (optional)

Für öffentlich zugängliche Deployments solltest du möglicherweise eine Authentifizierung erfordern, bevor Nutzer mit deinem Agenten chatten können.

Authentifizierung aktivieren

channels:
  entries:
    - name: webchat
      type: webchat
      enabled: true
      config:
        requireAuth: true
        authProvider: "openclaw"  # oder "oauth", "apikey"
        # Optional: Token-Ablauf
        sessionDuration: 3600  # Sekunden

API-Key-Authentifizierung

Für einfache Deployments kannst du API-Key-Authentifizierung nutzen:

channels:
  entries:
    - name: webchat
      type: webchat
      enabled: true
      config:
        requireAuth: true
        authType: "apikey"
        # Keys können über Umgebungsvariablen gesetzt werden
        apiKeys:
          - "WEBCHAT_API_KEY_1"
          - "WEBCHAT_API_KEY_2"

Schritt 4: Interface anpassen

WebChat lässt sich an deine Marke anpassen oder in bestehende Websites einbetten.

Basis-Theming

Füge Custom CSS über die Konfiguration hinzu:

channels:
  entries:
    - name: webchat
      type: webchat
      enabled: true
      config:
        theme:
          primaryColor: "#ef4444"  # Tailwind red-500
          backgroundColor: "#0a0a0a"
          fontFamily: "Inter, sans-serif"
          # Pfad zur Custom CSS-Datei (relativ zur Config)
          customCss: "./webchat-custom.css"

WebChat einbetten

Um WebChat als Widget auf deiner Website einzubetten:

<!-- Füge dies zu deinem HTML hinzu -->
<div id="openclaw-webchat"></div>

<script src="https://deine-openclaw-instanz.com/webchat/embed.js"></script>
<script>
  OpenClawWebChat.init({
    gatewayUrl: "wss://deine-openclaw-instanz.com",
    container: "#openclaw-webchat",
    theme: {
      primaryColor: "#ef4444",
      position: "bottom-right"
    }
  });
</script>

Schritt 5: Session-Handling konfigurieren

WebChat-Sessions funktionieren anders als persistente Messaging-Apps. Nutzer können ihren Browser schließen und wieder öffnen, also plane deine Session-Strategie entsprechend.

Session-Persistenz-Optionen

channels:
  entries:
    - name: webchat
      type: webchat
      enabled: true
      config:
        sessionHandling:
          # Session in Browser localStorage speichern
          persistLocally: true
          # Session-ID-Cookie-Dauer
          cookieDuration: "7d"
          # Vorherige Sessions fortsetzen erlauben
          allowResume: true
          # Session beim Browser-Schließen löschen
          clearOnClose: false

Session-Timeout

Setze angemessene Timeouts für deinen Anwendungsfall:

channels:
  entries:
    - name: webchat
      type: webchat
      enabled: true
      config:
        sessionTimeout: 1800  # 30 Minuten Inaktivität
        # Warnung vor Timeout anzeigen
        timeoutWarning: 300   # 5 Minuten vorher warnen

WebChat vs. andere Kanäle

Fehlerbehebung

WebChat lädt nicht

• Gateway-Status prüfen: Verifiziere, dass das OpenClaw-Gateway läuft mit openclaw gateway status
• Kanal aktiviert: Prüfe, dass WebChat in deiner Kanal-Liste aktiviert ist
• URL prüfen: Stelle sicher, dass du den richtigen Pfad nutzt (Standard ist /webchat)
• Firewall-Regeln: Bestätige, dass keine Firewall den WebSocket-Port blockiert

Verbindung bricht häufig ab

• WebSocket-Timeout: Erhöhe Timeout-Werte in der Konfiguration
• Proxy-Probleme: Falls hinter einem Reverse-Proxy, stelle sicher, dass WebSocket-Upgrade erlaubt ist
• Netzwerk-Stabilität: Prüfe auf instabile Client-Verbindungen

Nachrichten werden nicht gesendet

• Modellanbieter: Verifiziere, dass dein LLM-Anbieter konfiguriert und erreichbar ist
• Rate-Limiting: Prüfe, ob Rate-Limits konfiguriert sind, die Nachrichten blockieren könnten
• Session abgelaufen: Die Session könnte abgelaufen sein; Seite neu laden

CORS-Fehler

Beim Einbetten von WebChat auf einer anderen Domain:

channels:
  entries:
    - name: webchat
      type: webchat
      enabled: true
      config:
        allowedOrigins:
          - "https://deine-website.com"
          - "https://app.deine-website.com"
        # Credentials (Cookies) erlauben
        allowCredentials: true

Best Practices

Sicherheit

• Immer HTTPS in Produktion nutzen
• Authentifizierung für öffentlich zugängliche Deployments aktivieren
• Angemessene Session-Timeouts setzen
• Datei-Uploads serverseitig validieren
• CORS-Beschränkungen nutzen, um unautorisiertes Einbetten zu verhindern

User Experience

• Interface an deine Marke anpassen
• Klare Anweisungen für Erstnutzer geben
• Session-Persistenz aktivieren, damit Nutzer keinen Kontext verlieren
• Einen klaren Indikator für den Verbindungsstatus anzeigen
• Einen Typing-Indikator für besseres Feedback in Betracht ziehen

Performance

• CDN für statische Assets nutzen, wenn du das Interface anpasst
• Kompression für WebSocket-Nachrichten aktivieren
• Limits gleichzeitiger Verbindungen überwachen
• Rate-Limiting für High-Traffic-Deployments in Betracht ziehen

Zusammenfassung

WebChat ist der zugänglichste Kanal für OpenClaw. Es erfordert keine Installation, funktioniert auf jedem Gerät mit Browser und lässt sich in bestehende Websites einbetten. Wie Antoine de Saint-Exupéry über Flugzeugdesign bemerkte: "Perfektion ist erreicht, nicht wenn man nichts mehr hinzufügen kann, sondern wenn man nichts mehr weglassen kann." WebChat verkörpert diese Philosophie — es hat weniger Funktionen als native Apps, genau weil es auf universelle Zugänglichkeit abzielt. Jede entfernte Anforderung (keine Installation, kein Account, keine Plattform) fügt potenzielle Nutzer hinzu.

Aktiviere den Kanal in deiner Konfiguration, greife über deinen Browser darauf zu und passe optional Theme und Authentifizierung an deine Bedürfnisse an. Für sensible Gespräche solltest du WebChat mit sichereren Kanälen wie Signal kombinieren.