Handbuch · Kapitel 8 · Teil C Kanäle
Chat einbetten
Wozu
Der Chat Ihrer Sammlung soll auf Ihre Website. Dafür brauchen Sie genau eine Zeile Code, und alles, was der Chat kann, wie er aussieht und was er sagt, stellen Sie im Einbettungs-Baukasten ein. Jede Änderung erscheint sofort im Test-Chat daneben und wird automatisch gespeichert. Ein „Speichern“-Knopf fehlt hier absichtlich.
Wo
Öffnen Sie in der Sammlung den Punkt Chat. Oben läuft der Test-Chat mit dem indexierten Wissen der Sammlung. Darunter beginnt der Abschnitt Einbettungs-Code für externe Seiten mit dem Baukasten.
Schritt für Schritt
- Gestalten. Gehen Sie die Abschnitte des Baukastens von oben nach unten durch. Der Test-Chat zeigt jede Änderung sofort.
- Kopieren. Am Ende der Seite steht der fertige Einbettungs-Code. Der Knopf „Kopieren“ legt ihn in die Zwischenablage.
- Einfügen. Fügen Sie die Zeile einmal in Ihre Website ein, am besten direkt vor
</body>. Sie lädt alles Weitere selbst nach: Stylesheet, Chat-Logik und bei Bedarf die Sprachfunktion. - Freigeben. Tragen Sie die Website unter Bearbeiten → Zugriff und Besucherfunktionen → Erlaubte Websites ein. Solange die Liste leer ist, darf jede Website den Chat einbetten. Sobald ein Eintrag da ist, nur noch diese.
Die Abschnitte im Detail
Assistent & Sprache
| Feld | Bedeutung |
|---|---|
| Assistent | Welcher Assistent antwortet. „Standard der Sammlung“ nutzt die Sammlung ohne Assistenten-Profil. Ein Assistent bringt eigene Begrüßung, Einstiegsfragen, Akzentfarbe und ein eingegrenztes Wissen mit (Kapitel 10). |
| Sprache | „automatisch“ übernimmt die Sprache der einbettenden Seite. Eine feste Sprache erzwingt Oberfläche und Antwortsprache. |
| Sprachmodell | Welches Sprachmodell antwortet. Zur Wahl stehen das Standard-Modell der Sammlung und die weiteren Konfigurationen aus Kapitel 4. |
Diese drei Werte gelten nur für diese Einbettung. Eine zweite Einbettung derselben Sammlung kann einen anderen Assistenten oder ein anderes Modell nutzen.
Funktionen in dieser Einbettung
Hier legen Sie fest, was dieses Widget zeigt. Ein entferntes Häkchen blendet die Funktion nur in diesem Einbettungs-Code aus. Die Sammlung und andere Einbettungen behalten sie.
- Ausgegraute Funktionen sind in der Sammlung selbst ausgeschaltet. Der Link „einstellen“ führt direkt zur passenden Einstellung.
- Souveränität zeigt das Attest „KI-Verarbeitung nur in der EU“ bzw. „in Deutschland“ im Chat. Es ist nur wählbar, wenn die Sammlung eine Verarbeitungsregion hat und das oben gewählte Sprachmodell samt Suchindex dort verarbeitet. Bei einem anderen Modell ist das Häkchen ausgegraut.
- Streaming zeigt Antworten Wort für Wort, statt auf die fertige Antwort zu warten.
Aussehen
Der Abschnitt reicht für die allermeisten Websites, ohne eine Zeile CSS.
| Feld | Bedeutung |
|---|---|
| Darstellung | Blase in einer der vier Ecken oder fest in der Seite. Bei „fest“ bestimmt das Zielelement (CSS-Selektor), wo der Chat erscheint. Leer heißt: direkt hinter dem Script-Tag. |
| Abstände | Abstand der Blase vom Seitenrand und von oben bzw. unten, in Pixeln. |
| Öffnen bei Klick auf | CSS-Selektoren eigener Seitenelemente, mit Komma getrennt, zum Beispiel ein Knopf „Fragen Sie uns“. Bei der Blase öffnet der Klick das Panel, bei fester Einbettung springt die Seite zum Chat. |
| Farbschema | hell, dunkel oder automatisch nach dem System des Besuchers. |
| Farben | Akzentfarbe, Kopfzeile und Kopfzeilen-Schrift, Textfarbe, Hintergrund, Eingabefeld und Knöpfe, Rahmen, Antwort- und Besucher-Blase, Farben beim Überfahren der Einstiegsfragen und des Senden-Knopfs. Leere Felder folgen der Akzentfarbe. |
| Eckenradius, Bedienelemente, Schatten | Rundung des Chats, Form der Knöpfe (rund, dezent gerundet, eckig) und ob das Panel einen Schatten wirft. |
| Schriftart, Schriftgröße | Leer übernimmt die Schrift der Seite. Die Größe skaliert den gesamten Chat. |
| Panel-Breite, Panel-Höhe | Maße des Panels in Pixeln. |
| Kein CSS ausliefern | Für eigene Gestaltung: Das Widget kommt ohne Stylesheet. Die Knöpfe „CSS“ und „SCSS“ liefern eine Vorlage mit allen Variablen. |
Zurücksetzen. „Aussehen zurücksetzen“ setzt alle Werte dieses Abschnitts auf das Standard-Design zurück, nach einer Rückfrage.
Was der Test-Chat nicht zeigen kann. Darstellung, Abstände, Panel-Breite und „Öffnen bei Klick“ wirken erst auf der echten Seite. Ändern Sie eines dieser Felder, erscheint für einige Sekunden ein Hinweis unter dem Test-Chat.
Texte
Jedes Textfeld hat Tabs je Sprache, sobald die Sammlung Inhalte in mehreren Sprachen indexiert hat; bis dahin gibt es nur die Hauptsprache. Leere Felder werden beim ersten Öffnen mit einem Vorschlag belegt, den Sie jederzeit überschreiben. Ein leerer Sprachtab fällt im Chat auf die Hauptsprache zurück.
| Feld | Bedeutung |
|---|---|
| Titelzeile | Text in der Kopfzeile des Chats. |
| Name des Assistenten | Absendername über den Antworten. |
| Begrüßung | Erste Nachricht im Chat. {name} wird durch den Namen eines angemeldeten Besuchers ersetzt (Kapitel 13). |
| Einstiegsfragen | Eine Frage je Zeile, als anklickbare Chips unter der Begrüßung. Alternativ automatisch erzeugen: Dann stellt dAI Pro bei jedem neuen Gespräch frische Fragen aus dem Wissen der Sammlung zusammen, die Anzahl legen Sie fest. |
| Hilfetext im Chat | Text hinter dem ?-Knopf: Was der Chat ist, wohin Fragen gehen, Links zu Datenschutz, Kontakt und Impressum. „Neu generieren“ schreibt ihn aus den Angaben der Sammlung neu und berücksichtigt dabei das gewählte Sprachmodell. |
| Beschriftung neben der Blase | Kurzer Text, der neben der geschlossenen Blase steht, etwa „Fragen? Ich helfe.“ Nur bei der Darstellung als Blase. |
| Platzhalter im Eingabefeld | Grauer Hinweistext im leeren Eingabefeld. |
Verhalten der Blase
Gilt nur, wenn die Darstellung eine Blase ist.
| Feld | Bedeutung |
|---|---|
| Panel öffnen | nur auf Klick, sofort, nach einer Zahl von Sekunden oder ab einer Scrolltiefe in Prozent. |
| Offen/geschlossen merken | Der Browser merkt sich für den Besuch, ob der Besucher das Panel geschlossen hat. Es geht dann auf der nächsten Seite nicht wieder von selbst auf. |
| Auf Smartphones | Panel im Vollbild, Blase wie am Desktop oder Widget ganz ausblenden. |
Einbindung
| Feld | Bedeutung |
|---|---|
| Erst nach Einwilligung laden | Der Chat lädt erst, wenn der Besucher im Cookie-Banner zugestimmt hat: Cookiebot (mit Kategorie), Usercentrics, ein eigenes Ereignis oder ein gesetztes Cookie. Details in Kapitel 21. |
| Text bis zur Einwilligung | Was an der Stelle des Chats steht, solange die Zustimmung fehlt. Nur bei fester Einbettung. |
| Nur auf diesen Seiten | Pfade, auf denen der Chat erscheint, zum Beispiel /support/*. Leer heißt überall. |
| Datenschutz-, Hilfe-, Impressum-, Kontakt-URL | Links im Hilfetext und im Attest. dAI Pro schlägt sie aus den indexierten Seiten der Sammlung vor. |
Der Einbettungs-Code
Der Code ist ein einzelner Script-Tag. Alle Einstellungen stehen als data-Attribute daran, aber nur die, die von den Vorgaben der Sammlung abweichen. Die vollständige Liste der Attribute steht unter dem Code und in Kapitel 28.
Nutzt Ihre Website eine Content-Security-Policy, muss die Adresse Ihrer dAI-Pro-Instanz in script-src, style-src, connect-src und img-src erlaubt sein.
Häufige Fragen
Ich habe etwas geändert, auf meiner Website sehe ich es nicht. Laden Sie die Seite neu. Der Code bleibt gleich, die Einstellungen holt der Chat beim Laden. Bleibt es beim alten Stand, hält Ihr Browser oder ein Zwischenspeicher der Website die Dateien fest.
Der Chat erscheint auf einer anderen Website nicht. Prüfen Sie die erlaubten Websites in den Einstellungen der Sammlung. Ist die Liste gefüllt, kommen nur die eingetragenen Adressen durch.
„Souveränität“ lässt sich nicht anhaken. Das gewählte Sprachmodell verarbeitet nicht in der zugesagten Region. Wählen Sie oben ein passendes Modell oder entfernen Sie die Verarbeitungsregion in den Einstellungen der Sammlung (Kapitel 20).
Kann ich den Chat komplett selbst gestalten? Ja. Haken Sie „Kein CSS ausliefern“ an und starten Sie mit der CSS- oder SCSS-Vorlage. Alle Farben, Radien und Maße sind darin als Variablen vorbereitet.
Zwei Chats auf einer Website, einer für Kunden, einer intern? Legen Sie je Einbettung einen eigenen Code an, mit unterschiedlichem Assistenten und Seitenpfaden. Beide zeigen auf dieselbe Sammlung.
Siehe auch
- Kapitel 4 · Sammlungen einrichten (erlaubte Websites, Verarbeitungsregion)
- Kapitel 9 · Suche einbetten
- Kapitel 10 · Assistenten
- Kapitel 12 · Mensch-Übergabe und Aktionen
- Kapitel 21 · Einwilligung und Cookie-Banner
- Kapitel 28 · Einbettungs-Referenz