JavaScript-Widget

Das JavaScript-Widget fügt Ihrer Website eine schwebende Chat-Blase hinzu. Der erzeugte Einbettungscode enthält zwei Script-Tags; kopieren Sie beide aus dem Tab Kanäle Ihres Agenten.

Schnelleinrichtung

1. Öffnen Sie bei Ihrem Agenten Kanäle → Website-Einbindung
2. Wählen Sie Chat-Widget und aktivieren Sie den Kanal
3. Kopieren Sie den vollständigen erzeugten Code einschließlich beider Script-Tags
4. Fügen Sie es in Ihre Website vor </body> ein
5. Speichern Sie und aktualisieren Sie Ihre Website

Das erste Tag bereitet die Agentkit-Befehlswarteschlange vor. Das zweite lädt das Widget mit Ihrer Agent-ID und der konfigurierten Script-URL. Lassen Sie beide Tags und ihre Werte zusammen.

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:

Platzierung

Wo Sie den Code einfügen

Fügen Sie beide erzeugten Script-Tags vor </body> ein:

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

  <!-- Paste both script tags from Channels > Website embed here -->
</body>
</html>

Single-Page-Anwendungen

Fügen Sie bei SPAs den vollständigen erzeugten Code in Ihre Haupt-HTML-Vorlage oder Index-Datei ein.

Mehrere Seiten

Fügen Sie denselben erzeugten Code auf jeder Seite ein, auf der das Widget erscheinen soll, oder verwenden Sie eine gemeinsame Layout-Vorlage.

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 im gerenderten Seitenquelltext, ob beide erzeugten Script-Tags vor </body> stehen
• 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. Entfernen Sie beide erzeugten Script-Tags aus Ihrem HTML
2. Leeren Sie alle Caches
3. Das Widget verschwindet sofort

Nächste Schritte

• Aussehen anpassen in den Design-Einstellungen
• Domain-Einschränkungen einrichten
• Vorgeschlagene Nachrichten hinzufügen