Chatbot

Eine Organisation bindet den Keural-Chatbot auf ihrer Website ein. Klickt ein Besucher auf den Button in einer Ecke des Bildschirms, öffnet sich das Chatfenster. Fügen Sie dazu den im Verwaltungsbildschirm erstellten Installationscode auf Ihrer Website ein.

Chatbot erstellenAnkerlink kopieren

1. Ein Inhaber oder Administrator der Organisation klickt unter Organisationsverwaltung → Chatbots auf Chatbot hinzufügen.
2. Geben Sie einen Chatbot-Namen und eine Basis-Domain (z. B. https://example.com) ein und registrieren Sie den Chatbot.
3. Öffnen Sie den Chatbot und konfigurieren Sie die drei Registerkarten.

4. Fügen Sie den Installationscode in Ihre Website ein.

InstallationscodeAnkerlink kopieren

Kopieren Sie auf der Registerkarte Token & Installationscode den HTML- oder Next.js-Code. Der Code besteht aus zwei Teilen.

• Loader: Er legt zuerst die Funktion Keural an und lädt nach dem vollständigen Laden der Seite das Chatbot-Skript (/plugin/keural-widget@1.0.1.js) asynchron nach. Befehle, die vor dem Eintreffen des Skripts aufgerufen werden, werden zwischengespeichert und in der Reihenfolge ausgeführt.
• Startbefehl: Keural('boot', { token: '…' }). Das Token beginnt mit wgt_.

Die Skriptversion ist in der Adresse festgelegt. Erscheint eine neue Version, kopieren Sie den Installationscode erneut und ersetzen Sie den alten. Fügen Sie den Installationscode zweimal auf derselben Seite ein, protokolliert die Konsole einen Fehler und die zweite Einbindung wird ignoriert.

<script id="keural-one-script">
  /* Code aus der Registerkarte Token & Installationscode */
</script>

In Next.js binden Sie ihn mit <Script id="keural-one-script" strategy="afterInteractive"> aus next/script ein. Um ihn auf allen Seiten anzuzeigen, fügen Sie ihn im Root-Layout ein.

StartoptionenAnkerlink kopieren

Werte, die Sie an boot übergeben, haben Vorrang vor den Einstellungen im Verwaltungsbildschirm. Verwenden Sie sie, wenn Sie das Erscheinungsbild pro Seite ändern möchten.

Keural('boot', {
  token: 'wgt_…',
  theme: 'system',
  header: { enabled: true, extended: true, draggable: true, title: 'Kundenservice', color: '#495BD8' },
  button: { visible: true, iconUrl: 'https://example.com/icon.png', color: '#495BD8', position: 'right', offsetX: 30, offsetY: 30 },
});

Die Standardwerte eines neuen Chatbots sind: Kopfzeile sichtbar und erweitert, Kopfzeilen- und Button-Farbe #495BD8, rechts, Versatz 30 px, Design system.

Steuerung von der SeiteAnkerlink kopieren

Methoden wie Keural.open() funktionieren nur nach dem Laden des Skripts. Beim Aufruf direkt nach dem Laden der Seite verwenden Sie die Funktionsschreibweise Keural('open'), die in der Reihenfolge ausgeführt wird.

<button onclick="Keural('open')">Jetzt beraten lassen</button>

Sie können auch den Standardbutton ausblenden (button.visible: false) und den Chatbot über einen Button Ihrer Seite öffnen.

BildschirmgrößeAnkerlink kopieren

Das Chatbot-Fenster misst 390×800 px. Ist die Bildschirmbreite 480 px oder kleiner, öffnet es sich im Vollbild. Mit der Vergrößerungsschaltfläche in der Kopfzeile können Sie das Fenster vergrößern.

AnzeigedomainsAnkerlink kopieren

• Der Chatbot öffnet sich auf Seiten, deren Host mit der Basis-Domain übereinstimmt. Der Host wird einschließlich Port verglichen; Groß- und Kleinschreibung spielen keine Rolle. Eine Adresse mit www. und eine Subdomain gelten als andere Hosts. Zum Testen auf einem Entwicklungsserver legen Sie einen eigenen Chatbot mit dieser Adresse als Basis-Domain an.
• Die Basis-Domain lässt sich nach dem Anlegen nicht mehr ändern. Zum Ändern legen Sie einen neuen Chatbot an.
• Lassen Sie die erlaubten Domains unter Erweitert leer, öffnet sich der Chatbot auf allen Seiten der Basis-Domain. Tragen Sie erlaubte Domains ein, öffnet er sich nur auf Seiten, die mit diesen Adressen beginnen. Geben Sie einen Pfad wie https://example.com/help an, wird er auf die Seiten unterhalb dieses Pfads beschränkt. Erlaubte Domains beginnen mit http:// oder https://, und Sie können bis zu 5 eintragen.
• Das Token im Installationscode ist auf der Seite sichtbar. Verbinden Sie mit dem Chatbot nur Inhalte, die öffentlich zugänglich sein dürfen.

Content-Security-Policy (CSP)Ankerlink kopieren

Verwendet Ihre Website eine Content-Security-Policy, erlauben Sie Folgendes. Die Adressen beziehen sich auf keural.ai.