Chat-Widget Einstellungen & Installation
Chat-Widget
Öffnen Sie Dashboard → Ihr Assistent → Kanäle → Chat-Widget. Hier installieren und passen Sie das schwebende Website-Widget an. Es gibt keinen separaten Reiter für Integration oder Widget-Integration.
Widget installieren
Klappen Sie Installationsdetails anzeigen über dem Anpassungsbereich aus. Das Panel enthält:
- das einsatzbereite HTML mit Ihrer bereits eingefügten Chatbot-ID,
- die Aktionen Code kopieren und Zur Website hinzufügen,
- Installation prüfen, um zu verifizieren, dass das Widget auf einer erlaubten Domain lädt,
- Einrichtungsanleitungen für WordPress, Shopify, Wix, Squarespace und Webflow.
Sobald WebChatAgent das Widget erkennt, zeigt das Panel die Domain an, auf der dieser Assistent geladen wird. Eine fehlgeschlagene Prüfung bedeutet meist, dass der Code fehlt, die Seite noch eine alte Version aus dem Cache ausliefert oder die Domain unter Einstellungen → Erlaubte Websites nicht eingetragen ist.
Lesen Sie den Website Embed Guide zur Platzierung und den Developer Widget Guide zu HTML-Attributen und Laufzeit-Events.
Aussehen & Inhalte
Dieser Reiter kombiniert visuelles Design, Bilder und die Inhalte, die vor Beginn einer Konversation angezeigt werden.
Grundeinstellungen
| Einstellung | Auswirkung |
|---|---|
| Widget-Theme | Das gesamte Widget-Design. |
| Breite / Höhe | Optionale Abmessungen in Pixeln. Lassen Sie genügend Platz für Nachrichten, Quellen, Formulare und die mobile Tastatur. |
| Chat-Titel | Text in der Kopfzeile des Widgets. |
| Schriftfamilie | Im Widget verwendete Schriftart. Suchen Sie nach Google Fonts oder tragen Sie einen benutzerdefinierten Schriftnamen ein. |
Farben
| Einstellung | Gilt für |
|---|---|
| Themenfarbe / Theme-Textfarbe | Hintergrund und Text der Kopfzeile |
| Bot-Nachrichtenfarbe / Textfarbe | Nachrichtenblasen des Assistenten |
| Benutzernachrichtenfarbe / Textfarbe | Nachrichtenblasen des Besuchers |
| Chat-Button Farbe / Symbolfarbe | Schwebender Launcher-Button |
Der Editor prüft den Textkontrast und warnt, wenn ein Vorder- und Hintergrundpaar unter dem empfohlenen WCAG-Verhältnis liegt. Beheben Sie diese Warnungen vor der Veröffentlichung.
Bilder
Jedes Bild akzeptiert entweder einen Upload oder eine URL:
| Bild | Wo es erscheint |
|---|---|
| Avatar-Bild | Neben den Assistent-Nachrichten |
| Chat-Button-Bild | Im schwebenden Launcher anstelle des Standard-Symbols |
| Willkommens-Bild | Über der Begrüßungsnachricht, oft für ein Logo oder Banner genutzt |
Uploads unterstützen PNG, JPG, WebP und GIF. Verwenden Sie kleine, optimierte Bilder. Der Editor zeigt die aktuellen Größenbeschränkungen neben jedem Upload an.
Inhalte
| Einstellung | Auswirkung |
|---|---|
| Willkommensnachricht | Rich-Text-Einleitung, die beim Öffnen des Chats angezeigt wird |
| Sprechblasentext | Kurze Einladung, die neben dem geschlossenen Chat-Button angezeigt wird |
| Datenschutzhinweis | Optionaler Rich-Text-Hinweis im Widget, einschließlich Links zu Datenschutzinformationen |
Begrüßungs- und Sprechblasentexte können mit Mit KI erstellen entworfen und anschließend bearbeitet werden. Halten Sie die Sprechblase kurz. Platzieren Sie längere Erklärungen in der Begrüßungsnachricht.
Verhalten
Sichtbarkeit und Interaktion
| Einstellung | Auswirkung |
|---|---|
| Widget auf Website deaktivieren | Verhindert die Anzeige des schwebenden Widgets, ohne seine Konfiguration zu löschen. |
| Anfänglich geöffnet | Öffnet das Chat-Fenster direkt beim Laden der Seite. |
| Mikrofon deaktivieren | Entfernt die Spracheingabe aus dem Widget. |
| Quellen unter Antworten anzeigen | Zeigt bis zu vier Quellen-Links an, wenn diese verfügbar sind. |
| KI-Kennzeichnung unter Bot-Antworten | Kennzeichnet KI-Antworten. Dies ist immer aktiv und kann nicht deaktiviert werden. |
| Automatische Übersetzung | Übersetzt Widget-Oberflächentexte in die erkannte Sprache des Besuchers. |
| Datei-Upload | Erlaubt Besuchern das Anhängen von Dateien oder Bildern zur Analyse, sofern ihr Tarif dies zulässt. |
| Benachrichtigungston | Spielt einen kurzen Ton ab, wenn eine proaktive Nachricht erscheint. |
| WhatsApp-Nummer | Fügt der Widget-Kopfzeile einen WhatsApp-Button hinzu. Verwenden Sie die vollständige Nummer einschließlich Ländervorwahl. |
Auf URLs/Pfaden ausblenden
Geben Sie eine Regel pro Zeile ein. Platzhalter * werden unterstützt, sodass Sie das Widget auf Seiten wie diesen ausblenden können:
/checkout/*
/account/*
https://example.com/en/legal/*
Nutzen Sie dies für Checkout-, Konto-, Login- oder andere Seiten, auf denen das schwebende Widget von der eigentlichen Aufgabe ablenken oder wichtige Bedienelemente verbergen würde.
Positionierung
Legen Sie unabhängige horizontale und vertikale Abstände für Desktop und Mobil fest. Die Werte bestimmen den Abstand vom rechten und unteren Rand. Testen Sie diese Einstellungen bei sichtbaren Cookie-Bannern, fixierten Navigationsleisten und mobilen Safe Areas.
Automatische Ansprache
Aktivieren Sie Proaktive Trigger aktivieren, wenn das Widget Besucher basierend auf Zeit, Scroll-Tiefe, Exit-Intent, Seite, Inaktivität, wiederkehrenden Besuchen oder anderem Verhalten kontaktieren soll.
Das Panel enthält den Trigger-Editor, globale Frequenzeinstellungen, optionale Zeitpläne und Zielgruppenansprachen, Vorlagen und Leistungsdaten. Es erläutert auch die optionale Verbindung zur Einwilligung. Grundlegendes proaktives Verhalten funktioniert anonym. Die Erkennung wiederkehrender Besucher, dauerhafte Limits, Analysen und KI-generierte Begrüßungen erfordern ein erteiltes Einwilligungssignal.
Lesen Sie Proaktive Trigger für alle Trigger-Typen, Antwortmodi, Limits und Datenschutzfunktionen.
Buttons & Formulare
Schnellaktionen
Prompt-Buttons (auch als Starter-Fragen, vorgeschlagene Fragen oder Gesprächsstarter bezeichnet) sind Ein-Klick-Nachrichten, die angezeigt werden, bevor der Besucher etwas tippt. Sie befinden sich unter Kanäle → Chat-Widget → Buttons & Formulare → Schnellaktionen.
| Feld | Funktion |
|---|---|
| Titel | Die Beschriftung auf dem Button. Emojis sind erlaubt. |
| Aktion | Die Nachricht, die beim Klick auf den Button an den Assistenten gesendet wird. Formulieren Sie eine vollständige Frage, da sie im Transkript erscheint. |
Verwenden Sie Button hinzufügen für einen neuen Eintrag, ziehen Sie den Griff links zum Neuanordnen und klicken Sie auf Änderungen speichern. Mit KI erstellen generiert einen Entwurf basierend auf den eigenen Datenquellen des Assistenten. Der Schalter darüber hält diesen Entwurf automatisch aktuell.
Die Buttons sind sichtbar, solange die Konversation noch leer ist. Sobald der Besucher die erste Nachricht sendet, wandern sie in das Aktionsmenü neben dem Eingabefeld.
Zwei Besonderheiten: Eine aktive Action Bar ersetzt die Prompt-Buttons, nutzen Sie daher entweder das eine oder das andere. Zudem besitzt der Inline-Chat eigene Buttons unter Kanäle → Inline-Chat, diese Einstellung gilt dort nicht.
Action Bar
Die Action Bar zeigt dauerhafte Aktionen am unteren Rand des Chats an. Wenn sie aktiv ist, ersetzt sie Prompt-Buttons. Je nach Elementtyp kann sie einen Link, WhatsApp, eine eingebettete Calendly-Seite oder ein individuelles Formular öffnen.
Formulare
Erstellen Sie Formulare, fügen Sie Felder hinzu, ordnen Sie sie neu an, definieren Sie Pflichtfelder und passen Sie den Absende-Button sowie die Erfolgsmeldung an. Übermittelte Daten werden im Leads-Dashboard gespeichert.
Lesen Sie Action Bar & Formulare für Elementtypen, Feldtypen, Übersetzung und Lead-Zuordnung.
Erweitert
Quelle der Spracherkennung
Wählen Sie, wie die automatische Übersetzung die Sprache der Besucher erkennt:
- Browsersprache verwendet die
Accept-Language-Einstellung des Browsers. - HTML-Attribut lang verwendet den Wert
<html lang="…">der Seite.
Verwenden Sie die HTML-Option, wenn jede lokalisierte Seite ihre Sprache korrekt deklariert und die Sprache des Widgets steuern soll. Verwenden Sie die Browsersprache, wenn die Seite selbst nicht zuverlässig lokalisiert ist.
Branding
Branding ausblenden entfernt den WebChatAgent-Hinweis, wenn der aktuelle Plan dies zulässt. Das Panel zeigt eindeutig an, ob das Branding aktuell sichtbar oder ausgeblendet ist.
Eigenes CSS
Eigenes CSS wird in das Widget eingefügt und hat Vorrang vor integrierten Stilen ohne !important. Der Editor bietet Start-Presets sowie eine Liste stabiler .wca-*-Selektoren. Er zeigt außerdem das Zeichenlimit an und übernimmt Änderungen live in die Vorschau.
Nur dokumentierte Selektoren stellen einen stabilen Vertrag dar. Siehe Eigenes CSS für die Selektorentabelle und Beispiele.
Testen und veröffentlichen
- Verwenden Sie Deinen Chatbot testen nach Änderungen an Inhalten oder am Verhalten.
- Prüfen Sie den Willkommensstatus, eine echte Antwort, Quellen, Prompt-Buttons, Formulare und den Datei-Upload, falls zutreffend.
- Klicken Sie auf Änderungen speichern.
- Öffnen Sie die echte Website auf dem Desktop und auf Mobilgeräten.
- Verwenden Sie Installation prüfen, wenn das Widget nicht erkannt wird.
Die Vorschau im Dashboard ist nützlich, aber die echte Website ist maßgeblich für Z-Index, Cookie-Banner, responsive Abstände, Schriftarten und seitenspezifische Sichtbarkeitsregeln.