Website-Chatbot
Video-Tutorial
Website Chatbot
Auf der Tutorials-Seite ansehen →
Der Website-Chatbot stellt Ihren KI-Assistenten auf jeder Website als kleine Chat-Blase bereit, die Besucher öffnen und nutzen können. Sie konfigurieren ihn vollständig in QAnswer und fügen anschließend ein einziges Code-Snippet in Ihre Website ein.
Öffnen Sie den Assistenten, wechseln Sie zum Tab Bereitstellen und wählen Sie die Karte „Website-Chatbot“. Die geöffnete Seite ist eine fünfstufige Installationsanleitung; arbeiten Sie die Schritte von oben nach unten ab.
Schritt 1 — Anpassen
Der erste Schritt ist zweigeteilt: Die Karte „Widget-Einstellungen“ links enthält die Optionen, die „Widget-Vorschau“ rechts zeigt das Ergebnis live, während Sie sie ändern.
Die obere Hälfte der Einstellungskarte bestimmt Aussehen und Verhalten des Widgets:
- Widget-Titel — die Überschrift oben im geöffneten Widget. Bleibt das Feld leer, wird der Name des Assistenten verwendet.
- Erste Nachricht — die Begrüßung, mit der der Assistent startet, bevor der Besucher etwas eingibt.
- Design — Automatisch, Hell oder Dunkel. „Automatisch“ folgt der Systemeinstellung des Besuchers.
- Beim ersten Besuch ist das Widget… — „Minimiert“ zeigt nur die Blase, „Geöffnet“ klappt den Chat sofort auf.
- Position auf dem Bildschirm — in welcher Ecke das Widget sitzt — unten rechts, unten links, oben rechts oder oben links.
- Export von Unterhaltungen erlauben — fügt ein Bedienelement hinzu, mit dem Besucher ihre Unterhaltung herunterladen können.
Weiter unten auf derselben Karte finden Sie die feineren Gestaltungsoptionen:
- Positionsabstand — der Abstand in Pixeln zwischen Widget und Bildschirmrändern in X- und Y-Richtung — nützlich, wenn das Widget sonst etwas auf Ihrer Website verdecken würde.
- Akzentfarbe — die Primär- und Sekundärfarbe des Widgets, damit es zu Ihrer Marke passt.
- „Powered by“-Text anzeigen — deaktivieren Sie das Kontrollkästchen, um den QAnswer-Hinweis am unteren Rand des Widgets zu entfernen.
- CSS-Eigenschaft „font“ — eine erweiterte Option, mit der Sie eine rohe CSS-Schriftdeklaration übergeben, damit das Widget zur Typografie Ihrer Website passt.
Schritt 2 — Testen
Bevor Sie Ihre echte Website anfassen, können Sie sich das Widget darauf ansehen. Geben Sie die Adresse der Seite ein, auf der Sie es ausprobieren möchten:
- „Demo öffnen“ öffnet diese Seite in einem neuen Tab, mit Ihrem Widget darüber gelegt.
- „Kopieren“ kopiert den Demo-Link, damit Sie ihn zur Prüfung an Kolleginnen und Kollegen senden können.
Schritt 3 — Zugriff wählen
Ein Widget auf einer öffentlichen Website muss für Personen erreichbar sein, die nicht bei QAnswer angemeldet sind. Dieser Schritt legt fest, wer das ist. Es gibt zwei Karten, und Sie nutzen entweder die eine oder die andere:
Offener Zugriff
Macht den Assistenten öffentlich erreichbar, ganz ohne Zugangsdaten:
- Für alle zugänglich — jede Person, die Ihre Website lädt, kann das Widget nutzen. Das ist die übliche Wahl für eine öffentliche Website.
- Nicht zugänglich — niemand außerhalb von QAnswer kann darauf zugreifen. Solange dies ausgewählt ist, funktioniert das Widget nicht.
Geschützter Zugriff
Statt den Assistenten zu öffnen, können Sie einen API-Schlüssel erzeugen, den die Integration mit jeder Anfrage sendet:
- Geben Sie dem Schlüssel einen Namen und klicken Sie auf „Schlüssel generieren“. Kopieren Sie den Schlüssel, sobald er erscheint — Sie sehen ihn nur dieses eine Mal.
- „API-Schlüssel nur im lokalen Browserspeicher ablegen (erweitert)“ hält den Schlüssel aus dem Seitenquelltext heraus und legt ihn stattdessen im Browserspeicher des Besuchers ab.
Schritt 4 — Exportieren
Der letzte erforderliche Schritt liefert Ihnen den Code zum Einfügen in Ihre Website. Es gibt drei Varianten derselben Integration; wählen Sie die, die zum Aufbau Ihrer Website passt.
- Script — ein einzelnes '<script>'-Tag, das das Widget von QAnswer lädt. Die einfachste Variante und für nahezu jede Website die richtige.
- Script Content — der Inline-Inhalt dieses Skripts, für Plattformen, auf denen Sie JavaScript hinzufügen können, aber kein Script-Tag mit src-Attribut.
- IFrame — eine '<iframe>'-Einbettung, für Umgebungen, in denen externe Skripte durch eine Content Security Policy blockiert werden.
Schritt 5 — Zusätzliche Daten anpassen (optional)
Ihre Website weiß oft Dinge über den Besucher, die der Assistent nicht kennt — wer er ist, welchen Tarif er nutzt, welche Seite er gerade liest. Mit zusätzlichen Daten geben Sie diese als Schlüssel-Wert-Paare an den Assistenten weiter. Tragen Sie einen Feldnamen und einen Beispielwert ein und fügen Sie mit der Schaltfläche + weitere Zeilen hinzu.
Ein hinzugefügtes Paar verändert das Snippet in Schritt 4, kopieren Sie den Code also erneut, nachdem Sie hier etwas geändert haben. Die eingetragenen Beispielwerte dienen nur dem Aufbau des Snippets — ersetzen Sie sie beim Einfügen durch echte Werte aus Ihrer eigenen Website.