Dokumentation

JavaScript-Widget

Fügen Sie das Chat-Widget mit einem einfachen Script-Tag zu jeder Website hinzu.

Das JavaScript-Widget ist der einfachste Weg, Ihren Agenten zu einer beliebigen Website hinzuzufügen. Ein einzelnes Script-Tag erzeugt eine schwebende Chat-Blase, auf die Besucher klicken können, um eine Unterhaltung zu starten.

Schnelleinrichtung

  1. Gehen Sie zum Tab Veröffentlichen Ihres Agenten
  2. Wählen Sie Chat-Widget (Standard)
  3. Kopieren Sie das angezeigte JavaScript-Snippet
  4. Fügen Sie es in Ihre Website vor </body> ein
  5. Speichern Sie und aktualisieren Sie Ihre Website

Die Chat-Blase erscheint in der Ecke Ihrer Seite. Ihr Snippet enthält Ihre individuelle Agent-ID und die passende Skript-URL.

Widget-Konfiguration

Position

Das Widget erscheint standardmäßig unten rechts. Ändern Sie die Position in den Design-Einstellungen.

Farben

Die Widget-Farben richten sich nach den Theme-Einstellungen Ihres Agenten. Passen Sie sie im Tab Design an.

Mobilgeräte

Das Widget ist vollständig responsiv und funktioniert automatisch auf mobilen Geräten.

Dateianhänge

Besucher können direkt im Widget Dokumente, Tabellen, Bilder und Textdateien anhängen. Anhänge dienen nur als temporärer Unterhaltungskontext und werden nicht zu den Trainingsquellen Ihres Agenten hinzugefügt.

Unterstützt werden PDF-, Word-, Excel-, HTML-, TXT-, Markdown-, JSON-, CSV-, PNG-, JPG-, WEBP- und GIF-Dateien. Besucher können pro Nachricht bis zu 3 Dateien anhängen, mit einem Limit von 10 MB pro Datei. Bei PDFs werden nur die ersten 20 Seiten ausgewertet, damit Antworten schnell und zuverlässig bleiben.

Datenattribute

Das Widget nutzt Datenattribute zur Konfiguration:

AttributBeschreibungStandard
data-chatbotErforderlich. Die ID Ihres Agenten (in Ihrem Einbettungscode enthalten)-

Platzierung

Wo Sie den Code einfügen

Fügen Sie das Script kurz vor </body> ein, um die beste Performance zu erzielen:

<!DOCTYPE html>
<html>
<head>
  <!-- Your head content -->
</head>
<body>
  <!-- Your website content -->

  <!-- Paste your embed code from Chatbot > Publish here -->
</body>
</html>

Single-Page-Anwendungen

Fügen Sie das Script bei SPAs zu Ihrer Haupt-HTML-Vorlage oder Ihrer Index-Datei hinzu.

Mehrere Seiten

Fügen Sie dasselbe Script auf jeder Seite ein, auf der das Widget erscheinen soll. Oder fügen Sie es in die Layout-Vorlage Ihrer Website ein.

Ihre Installation testen

Nachdem Sie den Code hinzugefügt haben:

  1. Rufen Sie Ihre Website in einem Browser auf
  2. Achten Sie auf die Chat-Blase (standardmäßig unten rechts)
  3. Klicken Sie, um den Chat zu öffnen
  4. Senden Sie eine Testnachricht
  5. Prüfen Sie, ob die Antwort korrekt ist

Fehlerbehebung

Widget erscheint nicht:

  • Prüfen Sie, ob das Script vor </body> steht
  • Stellen Sie sicher, dass die Agent-ID korrekt ist
  • Leeren Sie den Browser-Cache
  • Prüfen Sie die Browser-Konsole auf Fehler

Falsche Position:

  • Prüfen Sie die Design-Einstellungen
  • Suchen Sie nach CSS-Konflikten

Keine Antwort:

  • Stellen Sie sicher, dass Trainingsinhalte vorhanden sind
  • Prüfen Sie das Nachrichtenlimit Ihres Tarifs
  • Testen Sie zuerst im Playground

Domain-Einschränkungen

Wenn Sie zulässige Domains konfiguriert haben:

  • Das Widget lädt nur auf genehmigten Domains
  • Andere Websites sehen kein Widget (es wird kein Fehler angezeigt)

Domains konfigurieren →

Performance

Das Widget ist auf minimale Auswirkungen optimiert:

  • Lädt asynchron (Attribut async)
  • Kleine Bundle-Größe
  • Kein Render-Blocking
  • Lädt die Chat-Oberfläche per Lazy Loading

Styling-Konflikte

Das Widget verwendet isolierte Styles und sollte nicht mit Ihrer Website in Konflikt geraten. Falls doch, gehen Sie so vor:

  1. Prüfen Sie auf globale CSS-Selektoren
  2. Suchen Sie nach !important-Regeln
  3. Kontaktieren Sie den Support, wenn das Problem bestehen bleibt

Widget entfernen

So entfernen Sie es:

  1. Löschen Sie das Script-Tag aus Ihrem HTML
  2. Leeren Sie alle Caches
  3. Das Widget verschwindet sofort

Nächste Schritte