Inline-Chat Einbettung & Einstellungen
Inline-Chat
Der Inline-Chat (<web-chat-agent-inline>) wird direkt in Ihr Seitenlayout eingebettet, anstatt darüber zu schweben. Nutzen Sie ihn für ein Hilfe-Center, einen Produktberater, ein internes Portal oder einen ganzseitigen Assistenten.
Öffnen Sie Dashboard → Ihr Assistent → Kanäle → Inline-Chat. Der Kanal verfügt über einen eigenen Installationscode, eigene Einstellungen und eine Live-Vorschau. Er kann auf derselben Website wie das schwebende Chat-Widget laufen, mit unterschiedlichem Titel, Begrüßungstext, unterschiedlicher Höhe, eigenen Prompts und eigenem Styling.
Inline-Chat installieren
Klappen Sie Installationsdetails anzeigen auf und kopieren Sie den vorausgefüllten Code. Die manuelle Variante lautet:
<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
Platzieren Sie das Element genau dort, wo der Chat erscheinen soll, und laden Sie das Skript einmal pro Seite. Das Element füllt seinen übergeordneten Container aus, die Breite wird also durch Ihr Layout bestimmt:
<div style="max-width: 720px; margin: 0 auto;">
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
</div>
Nutzen Sie die im Dashboard kopierte Version, um Tippfehler in der Chatbot-ID zu vermeiden. Der Installationsbereich kann zudem prüfen, ob dieser Assistent auf einer zulässigen Domain geladen wird.
Erscheinungsbild
| Einstellung | Was sie ändert |
|---|---|
| Titel | Überschrift auf dem Startbildschirm. Leer lassen, um die Überschrift auszublenden. |
| Themenfarbe | Accent Color für Buttons und Besuchernachrichten. |
| Schriftfamilie | Schriftart des Widgets. Google Fonts durchsuchen oder einen benutzerdefinierten Schriftnamen eingeben. |
| Höhe | Höhe des Chat-Containers als CSS-Längenangabe, beispielsweise 600px, 80vh oder 100%. |
| Begrüßungsnachricht | Inhalt, der vor der ersten Besuchernachricht angezeigt wird. |
Die Live-Vorschau wird mit diesen Einstellungen aktualisiert. Das Senden einer Nachricht in der Vorschau nutzt den echten Assistenten und verbraucht das reguläre Nachrichtenkontingent.
Bilder
Fügen Sie optional per Upload oder URL ein Begrüßungsbild hinzu. Es erscheint auf dem Startbildschirm über der Begrüßungsnachricht. Verwenden Sie ein optimiertes Logo oder Banner und prüfen Sie das Ergebnis bei der schmalsten Containerbreite auf Ihrer Website.
Inhalt & Verhalten
| Einstellung | Was sie ändert |
|---|---|
| Begrüßungsnachricht | Rich-Text-Einleitung über dem Eingabefeld vor der ersten Nachricht. |
| Quellen anzeigen | Fügt den Antworten verfügbare Quellenangaben an. |
| KI-Kennzeichnung unter Bot-Antworten | Kennzeichnet jede Antwort des Assistenten als KI-generiert. Dies ist immer aktiv. |
| Automatische Übersetzung | Übersetzt Oberflächentexte in die erkannte Besuchersprache. |
| Datei-Upload | Erlaubt Besuchern das Anhängen von Dateien, sofern der Plan dies zulässt. |
| Prompt-Buttons | Einstiegsfragen auf dem Startbildschirm, auch vorgeschlagene Fragen oder Gesprächsstarter genannt. Jeder Eintrag hat einen sichtbaren Titel und eine an den Assistenten gesendete Nachricht. Bis zu 10 Einträge. |
Prompt-Buttons können mit KI entworfen oder manuell hinzugefügt werden. Halten Sie die Auswahl kurz und nutzen Sie Fragen, die das tatsächliche Wissen des Assistenten demonstrieren.
Erweitert
| Einstellung | Was sie ändert |
|---|---|
| Quelle der Spracherkennung | Verwendet für die automatische Übersetzung entweder die Browsersprache oder das <html lang>-Attribut der Seite. |
| Branding ausblenden | Entfernt den „Powered by“-Link, sofern der Plan dies erlaubt. |
| Eigenes CSS | Bettet CSS über die dokumentierten, stabilen Selektoren in das Inline-Widget ein. |
Der CSS-Editor enthält Vorlagen für den Einstieg, eine Referenz stabiler Selektoren, einen Zeichenzähler und eine Live-Vorschau. Siehe Eigenes CSS.
Optionale Kontext-Attribute
Das Inline-Element akzeptiert neben chatbot-id auch tracking-consent und context-data. Über Kontextdaten können nicht-geheime Sitzungsinformationen von der einbettenden Seite übergeben werden:
<web-chat-agent-inline
chatbot-id="YOUR_CHATBOT_ID"
context-data="Customer=Jane Doe;OrderID=A-1023"
></web-chat-agent-inline>
Die KI kann diese Werte in Antworten und freigegebenen Tool-Calls verwenden. Hinterlegen Sie in HTML-Attributen keine Geheimnisse, Zugangsdaten oder Informationen, für die der aktuelle Besucher keine Zugriffsberechtigung hat. Siehe Sitzungskontext-Daten für Formate, Limits und das Laufzeit-Event.
Schwebend vs. Inline
| Chat-Widget | Inline-Chat | |
|---|---|---|
| Platzierung | Fester schwebender Button und Overlay | Innerhalb Ihres Seitenlayouts |
| Element | <web-chat-agent> | <web-chat-agent-inline> |
| Skript | /widget/web-chat-agent.js | /widget/chat-widget-inline.js |
| Sprechblase und proaktive Trigger | Ja | Nein |
| Action Bar und Formulare | Ja | Nein |
| Live-Chat-Übernahme | Ja | Nein |
| Einstellungen | Kanäle → Chat-Widget | Kanäle → Inline-Chat |
Vor der Veröffentlichung testen
- Speichern Sie die Inline-Einstellungen.
- Senden Sie eine fundierte Testfrage in der Live-Vorschau.
- Öffnen Sie die echte Seite und prüfen Sie Höhe, Scrollverhalten, Laden der Schriftarten, Quellen und Prompt-Buttons.
- Testen Sie den kleinsten mobilen Container.
- Falls beide Widget-Typen installiert sind, stellen Sie sicher, dass sie wie vorgesehen ihre jeweils unabhängigen Einstellungen nutzen.