Zum Inhalt

Widget & Embed-Code

Pfad: /dashboard/embed · Berechtigung: Einstellungsmodul

Widget & Embed Widget & Embed

Das Widget ist die primäre Schnittstelle, über die Nutzer mit Ihrem KI-Assistenten auf Ihrer Website interagieren. Diese Seite erklärt, wie Sie es implementieren, was die einzelnen Embed-Attribute bewirken und wie das Widget technisch funktioniert.

So erhalten Sie Ihren Embed-Code

Der einfachste Weg, Ihren Embed-Code abzurufen:

  1. Gehen Sie in der Seitenleiste auf Dashboard → Embed.
  2. Die Seite generiert automatisch das korrekte Skript für Ihren aktuellen Bot und Ihre Domain.
  3. Klicken Sie auf Kopieren, um das vollständige Embed-Snippet zu kopieren.
  4. Fügen Sie es in den HTML-Code Ihrer Website ein, direkt vor dem schließenden </body>-Tag.

Embed-Skript Referenz

<script 
  src="https://user.frenzy.bot/chatbot-widget/v1/js/loader.js"
  data-bot-id="sales-assistant"
  data-bot-name="Sales Assistant"
  data-theme-color="#3b82f6"
  data-backend-url="https://user.frenzy.bot"
  async>
</script>

Attribute

Attribut Erforderlich Funktion
data-bot-id Ja Die eindeutige Slug-ID Ihres Bots.
data-bot-name Nein Die Beschriftung, die oben im Chat-Fenster angezeigt wird.
data-theme-color Nein Primäre Widget-Farbe (Hex-Code).
data-backend-url Nein Die Server-URL. Standardmäßig https://user.frenzy.bot (oder Ihre benutzerdefinierte Domain).

So finden Sie Ihre Bot-ID

  • Öffnen Sie das Dashboard und gehen Sie zu Embed oder Einstellungen.
  • Die Bot-ID wird im Embed-Code und auf der Bot-Verwaltungsseite angezeigt.
  • Format: Kleinbuchstaben und Zahlen mit Bindestrichen (z. B. sales-assistant, support-bot).

Dynamische Embed-Seite

Die Seite Dashboard → Embed erkennt automatisch Ihren aktuellen Hostnamen und generiert das korrekte Embed-Snippet. Dies ist sicherer als das manuelle Hardcodieren von URLs, weil:

  • Wenn Sie später die Domain ändern, spiegelt der generierte Embed-Code automatisch die neue Domain wider.
  • Jeder Bot erhält sein eigenes Embed-Snippet mit der korrekten data-bot-id.
  • Das Kopieren per Mausklick beschleunigt die Implementierung.

Widget-Funktionen

Das FRENZY.BOT Widget ist für den Produktivbetrieb optimiert und bietet folgende Funktionen:

Feature Funktion
Shadow DOM Isolation Verhindert, dass das CSS Ihrer Website das Design des Widgets beeinflusst.
Sitzungserhalt Der Chatverlauf bleibt bei Seitenaktualisierungen via localStorage erhalten.
Lazy Loading Verhindert Performance-Einbußen bei langen Konversationen.
Kontext-Fenster Die letzten 6 Nachrichten werden an die KI gesendet, um die Antwortqualität zu sichern.
Mehrsprachigkeit Unterstützt mehrere Sprachen mit automatischer Erkennung.
RTL-Unterstützung Vollständiges Rechts-nach-Links-Layout für Hebräisch und Arabisch.
Vorgeschlagene Fragen Vordefinierte Prompts unter der Willkommensnachricht.
Lead-Formular Kontakterfassung direkt im Chat mit konfigurierbaren Feldern.
Text-to-Speech Optionale Audio-Wiedergabe der KI-Antworten.

Widget testen

Bevor Sie das Widget auf Ihrer Live-Seite einbinden:

  1. Stellen Sie sicher, dass der Server läuft.
  2. Öffnen Sie die integrierte Testseite: https://user.frenzy.bot/chatbot-widget/test.html
  3. Senden Sie einige Testnachrichten.
  4. Aktualisieren Sie die Seite — der Chatverlauf sollte erhalten bleiben.
  5. Überprüfen Sie, ob der Bot auf Basis Ihrer Wissensdatenbank antwortet.

WordPress-Integration

Für WordPress-Seiten stehen zwei Optionen zur Verfügung:

Option 1: Skript einfügen

Fügen Sie das Embed-Skript in die footer.php Ihres Themes ein oder nutzen Sie ein Plugin, das benutzerdefinierte Skripte im Footer erlaubt.

Option 2: WordPress-Plugin

  • Laden Sie das FRENZY.BOT WordPress-Plugin (ZIP) hoch und aktivieren Sie es.
  • Nutzen Sie den Shortcode [FRENZY.BOT_whitelabel] für ein eingebettetes Support-Portal im Vollbildmodus.

Häufige Fehler

Problem Ursache Lösung
Widget erscheint, antwortet aber nicht Falsche data-bot-id Prüfen Sie die Bot-ID unter Dashboard → Embed
Widget erscheint nicht Server nicht erreichbar Prüfen Sie, ob Port 8321 offen ist und der Server läuft
Läuft auf Localhost, aber nicht live Fehlende data-backend-url Setzen Sie diese auf Ihre Live-Domain-URL
CSS-Konflikte mit Ihrer Seite Kein Shadow DOM verwendet Dies sollte nicht passieren — prüfen Sie auf erzwungene globale Styles
Alte Widget-Version wird angezeigt Browser-Cache Versionsbasiertes Cache-Busting regelt dies automatisch

Embed pro Bot

In einer Multi-Bot-Konfiguration hat jeder Bot sein eigenes Embed-Snippet. Das Attribut data-bot-id bestimmt, welcher Bot die Konversation übernimmt. Das Widget jedes Bots nutzt eigene:

  • System-Prompts und KI-Modelle
  • Branding, Farben und Avatare
  • Willkommensnachrichten und vorgeschlagene Fragen
  • Lead-Formular-Konfigurationen
  • Spracheinstellungen

Wechseln Sie im Dashboard zwischen den Bots, um den jeweils passenden Embed-Code zu generieren.

FAQ

F: Das Widget lädt, antwortet aber nicht.

  • Überprüfen Sie, ob die data-bot-id korrekt ist.
  • Stellen Sie sicher, dass OpenRouter verbunden ist (LLM-Anzeige sollte grün sein).
  • Prüfen Sie, ob die Wissensdatenbank Inhalte enthält.

F: Das Widget funktioniert auf localhost, aber nicht in der Produktion.

  • Bestätigen Sie, dass Port 8321 auf Ihrem Server offen ist.
  • Setzen Sie data-backend-url auf Ihre Produktions-Domain (mit https://).
  • Falls Sie eine benutzerdefinierte Domain verwenden, prüfen Sie die SSL-Konfiguration.

F: Kann ich das Widget auf mehreren Domains verwenden?

  • Ja. Das Widget funktioniert auf jeder Domain, solange data-backend-url auf Ihren Server zeigt. Nutzen Sie die dynamische Embed-Seite oder eine benutzerdefinierte Domain für Konsistenz.

F: Wie aktualisiere ich das Widget nach Änderungen?

  • Widget-Updates werden automatisch über versionsbasiertes Cache-Busting angewendet. Wenn der Server aktualisiert wird, erhöht sich die Widget-Version und der Browser lädt die neue Version.