Öffentlicher Chatbot und Website-Einbindung

Ein öffentlicher Chatbot ist ein Agent, der ohne Login über einen Link erreichbar ist: als digitaler Frontdesk auf Ihrer Website, als Service-Bot für häufige Fragen oder als Beratungs-Assistent. Besucher:innen erhalten rund um die Uhr Antworten, ohne ein hermine.ai-Konto zu benötigen.

Voraussetzungen

• Freischaltung durch das hermine.ai Team: Der öffentliche Zugriff wird pro Agent von einem Superadmin aktiviert. Fragen Sie die Freischaltung über den Support an.
• Keine sensiblen Integrationen: Agenten mit Microsoft 365 Tools, MCP Servern oder E-Mail-Postfach können nicht öffentlich gemacht werden. Der Agent-Editor zeigt dann die Warnung Öffentlicher Zugriff nicht verfügbar.

Schritt für Schritt: Agent öffentlich machen

1. Bereiten Sie den Agenten inhaltlich vor: Wissen anbinden, Regeln und Tonalität festlegen, Willkommensnachricht pflegen.
2. Öffnen Sie im Agent-Editor den Tab Chatbot teilen.
3. Aktivieren Sie im Abschnitt Öffentlicher Zugriff den gleichnamigen Schalter, der Status wechselt auf Aktiv (sichtbar für Superadmins, sonst über den Support anfragen).
4. Kopieren Sie die öffentliche URL der Form https://app.hermine.ai/c/<account-id>/<agent-slug> über den Kopier-Button und testen Sie den Bot über Chat starten.
5. Optional: Aktivieren Sie den Schalter Passwortgeschützter Zugriff aktiviert und vergeben Sie Benutzername für passwortgeschützten Zugriff und Passwort für passwortgeschützten Zugriff (Basic Authentication). Praktisch für Vorschauen und interne Tests.

1. Schalter Öffentlicher Zugriff mit Status Aktiv: schaltet den Agenten öffentlich frei (nur durch das hermine.ai Team bedienbar).
2. URL-Box mit der öffentlichen Chat-URL (/c/<account-id>/<agent-slug>) und Kopier-Button; über Chat starten testen Sie den Bot direkt. Dieselbe URL nutzen Sie auch für die iframe-Einbettung.
3. Abschnitt Passwortgeschützter Zugriff aktiviert mit den Feldern Benutzername für passwortgeschützten Zugriff und Passwort für passwortgeschützten Zugriff.

URL und Slug

Das Feld Eindeutiger Pfad (Slug) bestimmt die öffentliche URL des Agenten. Erlaubt sind Kleinbuchstaben, Zahlen und Bindestriche.

Achtung: Das Ändern des Slugs ändert alle URLs des Agenten. Bestehende Links, Lesezeichen, Widgets und API-Integrationen funktionieren dann nicht mehr.

Einbindungsvarianten

Iframe-Beispiel:

<iframe
  src="https://app.hermine.ai/c/IHRE-ACCOUNT-ID/ihr-agent-slug"
  style="width: 100%; height: 700px; border: none;"
></iframe>

Widget-Konfigurator

Das JavaScript-Widget konfigurieren Sie komplett visuell:

1. Öffnen Sie im Agent-Editor den Tab Chatbot einbetten.
2. Klicken Sie auf Widget-Konfigurator öffnen.
3. Passen Sie die Einstellungen in den Sektionen Texte, Button und Icon, Farben, Darstellung und Position, Teaser und Verhalten an. Alle Änderungen erscheinen sofort in der Live-Vorschau, die Sie mit Desktop und Mobil in beiden Ansichten prüfen.
4. Übernehmen Sie das erzeugte Snippet mit Code kopieren und fügen Sie es vor dem schließenden </body>-Tag Ihrer Website ein.

1. Einstellungs-Spalte mit den Sektionen Texte, Button und Icon, Farben und weiteren: alle Darstellungsoptionen des Web-Widgets.
2. Live-Vorschau mit dem echten, gerenderten Chat-Widget: Änderungen sind sofort sichtbar.
3. Umschalter Desktop / Mobil: beide Ansichten prüfen.
4. Code-Bereich mit Code kopieren: das fertige Embed-Snippet für Ihre Website.

Das erzeugte Snippet lädt das Widget vom CDN und enthält nur die Werte, die vom Standard abweichen:

<script>
  (async function() {
      'use strict';
      const Hermine = await import("https://cdn.zauberware.com/hermine-chat/current/esm/index.js");
      Hermine.HermineChat({
          accountId: 'IHRE-ACCOUNT-ID',
          agentSlug: 'ihr-agent-slug',
          chatTitle: 'Support-Chat'
      });
  })();
</script>

Das Widget ist Open Source: Alle Optionen und Details finden Sie im GitHub-Repository zauberware/hermine-chat, das auch aus dem Tab Chatbot einbetten verlinkt ist.

Anpassung im Agent-Editor

Im Tab Individuelle Anpassung gestalten Sie das Chat-Erlebnis:

• Standard-Prompts für die Auswahl: Definieren Sie bis zu 4 Vorschläge, die Besucher:innen beim Start als Gesprächseinstieg angezeigt werden (zum Beispiel "Preis anfragen", "Demo ansehen").
• Input Platzhalter (deutsch) und Input Platzhalter (englisch): der Platzhaltertext im Eingabefeld.
• Eigenes CSS: wirkt nur auf den öffentlichen Chatbot beziehungsweise die iframe-Einbettung, nicht auf das JavaScript-Widget (das gestalten Sie im Widget-Konfigurator).
• Agent-Bild: hochladen oder direkt per KI mit Bild generieren erstellen. Es dient auch als Button-Icon des Widgets.

CSS-Beispiel für die iframe-Einbettung:

/* Primärfarbe und Button-Radius anpassen */
:root {
  --primary-color: #1a73e8;
  --button-radius: 8px;
}

Datenschutz und Sicherheit

• Datenschutz Disclaimer (Tab Chatbot einbetten): Dieser Text wird Besucher:innen angezeigt, bevor sie mit dem Chatbot interagieren können. Ohne eigenen Text greift ein Standardhinweis zur KI-Verarbeitung. Im Widget steuern Sie über Datenschutzhinweis erneut zeigen nach (Stunden), wie oft der Hinweis erneut bestätigt werden muss.
• Safety-Layer (eigener Tab): Alle Anfragen an den Chatbot werden in fünf Bedrohungsstufen von 0 (keine Bedrohung) bis 5 (kritisch) klassifiziert. Nachrichten ab Stufe 2 werden automatisch blockiert. Auswahl: Kein Schutz oder Schutz aktiviert. Für öffentliche Bots empfehlen wir Schutz aktiviert.
• Nachrichten durch Admin einsehbar: Mit diesem Schalter können Admins die Nachrichten öffentlicher Nutzer:innen einsehen, um Qualität und Missbrauch zu prüfen. Interne Chats sind davon nicht betroffen.
• Passwortschutz für öffentlichen Link: schützt den Bot mit Benutzername und Passwort (Basic Authentication), solange er nicht für alle sichtbar sein soll.

Problemlösung

Tipp: Starten Sie mit dem passwortgeschützten Link für interne Tests, sammeln Sie Feedback über Nachrichten durch Admin einsehbar und schalten Sie den Bot erst dann ohne Passwort frei. So geht kein peinlicher Fehlstart live.