E-Mail wurde erfolgreich versandt.
FAQ #4539
Artikel editieren
Artikel weiterleiten

KI WebChat Assistant einrichten & aktivieren

Mit dem KI WebChat Assistant fügen Sie Ihrer Website ein KI-gestütztes Chat-Fenster hinzu – ohne Programmierkenntnisse. In diesem Artikel erfahren Sie, wie Sie den Assistenten aktivieren, das Chat-Widget auf Ihrer Website einbinden und erste Einstellungen vornehmen.


Voraussetzungen

  • Sie haben den KI WebChat Assistant gebucht oder möchten ihn als Erweiterung zum Smart-Telefonassistenten hinzufügen.
  • Sie können sich in Ihren STRATO Kunden-Login einloggen.
  • Für die Einbindung per JS-Snippet: Sie haben Zugriff auf den Quellcode oder das Backend Ihrer Website (oder nutzen ein CMS wie WordPress, Wix oder Shopify).
ℹ️ Info: Wenn Sie bereits den Smart-Telefonassistenten nutzen, können Sie den KI WebChat Assistant per One-Click-Aktivierung hinzufügen. Ihre bestehende Wissensbasis, Anliegen und Konfigurationen werden automatisch übernommen.


Inhaltsverzeichnis Inhaltsverzeichnis

Schritt 1: Konfigurationsoberfläche aufrufen

  1. Melden Sie sich in Ihrem STRATO Kunden-Login an.
  2. Wählen Sie das Paket, in dem der AI WebChat Assistant enthalten ist.
  3. Klicken Sie auf der Paketübersicht auf die Kachel AI Frontdesk.
  4. Sie gelangen zur Konfigurationsoberfläche. Wählen Sie dort KI WebChat Assistant.
ℹ️ Info: Änderungen an der Konfiguration werden nicht automatisch gespeichert. Klicken Sie nach jeder Anpassung oben rechts auf Änderungen speichern, damit Ihre Eingaben erhalten bleiben.


Schritt 2, Option A: One-Click-Aktivierung (für bestehende Telefonassistent-Kunden)

Wenn Sie bereits den Smart-Telefonassistenten nutzen, ist die Aktivierung des KI WebChat Assistant besonders schnell:

  1. Öffnen Sie die Konfigurationsoberfläche (siehe Schritt 1).
  2. Klicken Sie im Bereich KI WebChat Assistant auf Jetzt aktivieren.
  3. Bestätigen Sie, dass der WebChat Assistant dieselbe Wissensbasis wie Ihr Telefonassistent nutzen soll – oder legen Sie eine separate Wissensbasis an.
  4. Der Assistent ist sofort einsatzbereit. Sie gelangen direkt zum JS-Snippet (siehe Schritt 4).
ℹ️ Info: Ihre Anliegen, Verhaltensregeln, Kontakte und API-Integrationen aus dem Telefonassistenten stehen dem WebChat Assistant sofort zur Verfügung. Sie müssen nichts erneut konfigurieren – können aber jederzeit Chat-spezifische Anpassungen vornehmen.


Schritt 2, Option B: Ersteinrichtung ohne Telefonassistenten

Wenn Sie den KI WebChat Assistant ohne Smart-Telefonassistenten einrichten, durchlaufen Sie zunächst eine Grundkonfiguration:

Unternehmensinformationen
Geben Sie an, in welcher Branche Sie tätig sind und welche Hauptaufgabe der Assistent erfüllen soll.

Website-Inhalte übernehmen
Geben Sie die Adresse Ihrer Website ein und klicken Sie auf Jetzt anlernen. Der Assistent übernimmt automatisch öffentlich zugängliche Inhalte Ihrer Website als Grundlage für seine Antworten.

⚠️ Warnung: Bei einer erneuten Extraktion von Ihrer Website werden alle vorhandenen Wissenseinträge vollständig ersetzt – auch manuell ergänzte Inhalte. Sichern Sie wichtige, manuell erstellte Einträge vorher in einem separaten Dokument.

Begrüßung festlegen
Formulieren Sie eine kurze Willkommensnachricht für das Chat-Fenster, z. B.:

„Hallo! Ich bin der virtuelle Assistent von Musterfirma. Wie kann ich Ihnen helfen?"

Anrufzusammenfassungen / Chat-Protokolle
Geben Sie eine E-Mail-Adresse an, an die Zusammenfassungen von Chat-Gesprächen gesendet werden sollen.

Detaillierte Anleitungen zur Konfiguration von Stimme und Verhalten, Weiterleitungen, Anliegen und API-Integrationen finden Sie in den weiterführenden Artikeln am Ende dieser Seite.


Schritt 3: Chat-Widget auf Ihrer Website einbinden (JS-Snippet)

Damit das Chat-Fenster auf Ihrer Website erscheint, fügen Sie einen kurzen JavaScript-Code in Ihre Website ein.

So finden Sie den JS-Snippet

  1. Öffnen Sie in der Konfigurationsoberfläche den Bereich Widget einbinden oder Installation.
  2. Kopieren Sie den angezeigten JS-Snippet-Code.

Der Code sieht in etwa so aus:

<script src="https://widget.aifrontdesk.strato-cloud.org/chat.js"
  data-id="IHR-ASSISTENT-ID">
</script>

Wo fügen Sie den Snippet ein?

Fügen Sie den Code-Block kurz vor dem schließenden </body>-Tag jeder Seite ein, auf der das Chat-Widget erscheinen soll – oder seitenübergreifend im Template Ihrer Website.

Anleitungen für gängige Plattformen:

PlattformWo einfügen
WordPressDesign → Theme-Editor → footer.php, oder über ein Plugin wie „Insert Headers and Footers"
WixEinstellungen → Erweitert → Benutzerdefinierten Code hinzufügen → Platzierung: Body – Ende
ShopifyOnline Shop → Themes → Code bearbeiten → theme.liquid → kurz vor </body>
Eigene HTML-WebsiteDirekt im Quellcode vor </body>
ℹ️ Info: Wenn Sie keinen Zugriff auf den Quellcode Ihrer Website haben, wenden Sie sich an Ihre Webentwicklerin oder Ihren Webentwickler. Der Snippet selbst ist eine einzelne Code-Zeile und in wenigen Minuten eingebunden.


Schritt 4: Widget-Darstellung anpassen

In der Konfigurationsoberfläche können Sie das Erscheinungsbild des Chat-Widgets an Ihr Unternehmensdesign anpassen:

EinstellungBeschreibung
FarbePrimärfarbe des Widgets (z. B. Ihre Markenfarbe als Hex-Code)
LogoIhr Unternehmenslogo im Chat-Fenster
AvatarProfilbild oder Icon des Assistenten
PositionPlatzierung des Chat-Buttons auf der Seite (rechts unten, links unten)
AnzeigenameName, unter dem sich der Assistent vorstellt

Speichern Sie Ihre Anpassungen über Änderungen speichern. Die Änderungen sind sofort auf Ihrer Website sichtbar, sobald der Snippet bereits eingebunden ist.


Schritt 5: Chat-Widget testen

Bevor Sie den Assistenten für echte Besucher freischalten, sollten Sie ihn mit eigenen Testgesprächen prüfen:

  1. Öffnen Sie Ihre Website in einem Browser.
  2. Klicken Sie auf den Chat-Button und starten Sie ein Gespräch.
  3. Testen Sie typische Fragen Ihrer Kunden, z. B. zu Öffnungszeiten, Preisen oder Leistungen.
  4. Prüfen Sie dabei:
    • Antwortet der Assistent korrekt und vollständig?
    • Ist die Begrüßung wie gewünscht?
    • Funktioniert die Weiterleitung oder ein Rückrufwunsch?
    • Erhalten Sie die Chat-Zusammenfassung per E-Mail?

Passen Sie nach dem Test ggf. das Unternehmenswissen, die Verhaltensregeln oder Anliegen an und speichern Sie erneut.

ℹ️ Info: Sie können den Assistenten auch direkt in der Konfigurationsoberfläche mit einer Vorschau testen, ohne die Website aufrufen zu müssen.


Schritt 6: KI WebChat Assistant aktivieren

Wenn Sie mit den Testergebnissen zufrieden sind, aktivieren Sie den Assistenten für Ihre Website-Besucher:

  1. Öffnen Sie die Konfigurationsoberfläche.
  2. Klicken Sie oben rechts auf Aktivieren oder stellen Sie den Status auf Live.
  3. Der Assistent ist ab sofort auf Ihrer Website aktiv und beantwortet Anfragen Ihrer Besucher.
⚠️ Warnung: Ergänzen Sie Ihre Datenschutzerklärung, bevor Sie den Assistenten aktivieren. Der Einsatz eines KI-gestützten Chat-Assistenten muss dort ausdrücklich beschrieben werden. Eine Vorlage finden Sie im Artikel AI Frontdesk: Wichtige Ergänzung für Ihre Datenschutzerklärung. Der Betrieb ohne diesen Hinweis kann gegen die DSGVO verstoßen.


Chat-to-Voice: Eskalation zum Live-Gespräch (WebRTC)

Der KI WebChat Assistant bietet optional die Möglichkeit, ein Chat-Gespräch per Klick in ein Live-Telefongespräch zu überführen – über sogenannte WebRTC-Technologie.

Besucher sehen im Chat-Fenster einen Button, über den sie direkt aus dem Browser heraus ein Gespräch starten können – ohne Rufnummer wählen zu müssen.

Weitere Informationen finden Sie im Artikel [KI WebChat Assistant: Chat-to-Voice-Eskalation (WebRTC)].


Weiterführende Artikel

War dieser Text hilfreich für Sie?