Zum Hauptinhalt springen
ChattyBox Logo

Widget-Einrichtung & Anpassung

Fügen Sie Ihrer Website in weniger als 5 Minuten ein KI-gestütztes Chat-Widget hinzu.

Schnelle Einrichtung​

Ihr Chatbot ist schnell live. Kopieren Sie einfach den kleinen Code-Snippet aus Ihrem Dashboard.

Schritt 1: Einbettungscode abrufen​

  1. Öffnen Sie Ihr Dashboard und wählen Sie Ihr Projekt aus.
  2. Wechseln Sie zum Tab Einbetten.
  3. Wählen Sie den API-Schlüssel aus, den Sie verwenden möchten, oder erstellen Sie einen neuen.
  4. Kopieren Sie den generierten Code-Snippet.

Schritt 2: Zur Website hinzufügen​

Fügen Sie den Code-Snippet direkt vor dem schließenden </body>-Tag auf jeder Seite ein, auf der das Chat-Widget erscheinen soll.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="de"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Profi-Tipp Das war es schon. Farben und Einstellungen müssen nicht im Code gepflegt werden; alles wird im Dashboard verwaltet. :::

Visuelle Anpassung​

ChattyBox enthält einen integrierten visuellen Editor. Passen Sie Aussehen und Verhalten des Widgets an Ihre Marke an, ohne Code zu ändern.

Dashboard-Steuerung​

  1. Akzentfarbe - Wählen Sie die Hauptfarbe Ihrer Marke. Sie beeinflusst Launcher, Hervorhebungen und Benutzer-Nachrichten.
  2. Position - Legen Sie fest, wo das Widget auf dem Bildschirm angezeigt wird.
  3. Kopfzeilentitel - Bestimmen Sie den Titel oben im Chatfenster.
  4. Begrüßungsnachricht - Passen Sie die erste Nachricht an, die Besucher beim Öffnen des Chats sehen.
Notiz

Änderungen im Dashboard werden sofort übernommen. Sie müssen den Einbettungscode auf Ihrer Website nicht aktualisieren.

Erweiterte Optionen​

Dashboard-Einstellungen statt Skript-Attribute​

Die meisten Widget-Funktionen sollten im Dashboard verwaltet werden, damit Sie Ihre Website für einfache Änderungen nicht neu veröffentlichen müssen.

Verwenden Sie das Dashboard für Farben, Position, Icon, Kopfzeilentitel, Begrüßungsnachricht, Sprachvorgaben, öffentliche Schlüssel, Scraping und Analysen.

Wenn Ihr Projekt Ursprungsbeschränkungen für öffentliche Schlüssel nutzt, halten Sie diese Beschränkungen mit den Domains synchron, auf denen das Widget installiert ist.

Verwenden Sie Skript-Attribute nur für Werte, die das Widget beim Laden der Seite benötigt:

  • data-api-key identifiziert den öffentlichen Widget-Schlüssel.
  • data-api-url teilt dem Widget mit, wohin Anfragen gesendet werden.
  • data-locale erzwingt optional eine bestimmte Widget-Sprache für diese Seite.

Wenn das Widget nach der Installation nicht erscheint, lesen Sie Fehlerbehebung.

Widget auf bestimmten Seiten ausblenden​

Wenn Sie das Widget auf ausgewählten Seiten ausblenden müssen, geht das mit CSS:

.chattybox-widget {
  display: none;
}

Individuelle Integrationen​

Benötigen Sie eine speziellere Einrichtung als das Standard-Widget?

Kontaktieren Sie uns unter [email protected]. Wir helfen Ihnen, den passenden Integrationsansatz für Ihren Anwendungsfall zu wählen.

Mehrsprachige Unterstützung​

Das ChattyBox-Widget passt sich automatisch an die Spracheinstellungen Ihrer Besucher an und bietet weltweit eine lokalisierte Erfahrung.

Offiziell unterstützte Sprachen​

Die Widget-Oberfläche, einschließlich Schaltflächen, Beschriftungen und Systemmeldungen, wird offiziell in 14 Sprachen unterstützt:

SpracheCodeWidget-OberflächeQualität der KI-Antworten
EnglischenVollständig unterstütztAusgezeichnet
FranzösischfrVollständig unterstütztHoch
DeutschdeVollständig unterstütztHoch
SpanischesVollständig unterstütztHoch
ItalienischitVollständig unterstütztHoch
NiederländischnlVollständig unterstütztHoch
PortugiesischptVollständig unterstütztHoch
PolnischplVollständig unterstütztHoch
SchwedischsvVollständig unterstütztHoch
IndonesischidVollständig unterstütztMittel
EstnischetVollständig unterstütztMittel
FinnischfiVollständig unterstütztMittel
WalisischcyVollständig unterstütztMittel
TschechischcsVollständig unterstütztMittel

:::note Erweiterte Sprachunterstützung Während die Widget-Oberfläche offiziell 14 Sprachen unterstützt, kann die zugrunde liegende KI 100+ Sprachen verstehen und beantworten. Für Sprachen außerhalb der offiziellen Liste können wir jedoch keine gleichbleibend hohe Antwortqualität garantieren. :::

So funktioniert die Spracherkennung​

Das Widget verwendet ein gestuftes Erkennungssystem:

  1. Attribut data-locale - Höchste Priorität. Setzen Sie es im Einbettungscode, um eine bestimmte Sprache zu erzwingen.
  2. Attribut <html lang> der Seite - Das Widget prüft die deklarierte Seitensprache.
  3. Browsersprache (navigator.language) - Nutzt die Spracheinstellungen des Besuchers.
  4. Standard-Fallback - Englisch, wenn keine Sprache erkannt wird.

Sprache manuell überschreiben​

Um die Widget-Sprache unabhängig von den Browsereinstellungen festzulegen, fügen Sie das Attribut data-locale hinzu:

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="de"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Anwendungsfall Das ist besonders nützlich, wenn Ihre mehrsprachige Website pro Sprache eigene URLs hat, zum Beispiel /de/ oder /fr/. Setzen Sie data-locale passend zur Seitensprache, damit die Erfahrung konsistent bleibt. :::

Spracheinstellungen im Dashboard​

Im App-Dashboard können Sie die Widget-Spracheinstellungen pro Projekt konfigurieren:

  • Automatisch erkennen (empfohlen) - Entspricht automatisch der Browsersprache des Besuchers.
  • Feste Sprache - Erzwingt immer eine bestimmte Widget-Sprache.
  • Skript-Überschreibung zulassen - Aktiviert oder deaktiviert die Überschreibung über data-locale.

Sie finden diese Einstellungen im Dashboard unter Projekt → Einbetten → Widget-Sprache.

Inhaltssprache abgleichen​

Für die beste mehrsprachige Erfahrung sollte Ihr Chatbot in derselben Sprache antworten wie die Frage des Benutzers. So erreichen Sie das:

  1. Scrapen Sie alle Sprachversionen Ihrer Dokumentation über die Datei sitemap.xml.
  2. Der Scraper versieht Inhalte automatisch mit der passenden Sprache.
  3. Das RAG-System ruft anhand der Anfrage die passende Sprachversion ab.

Einrichtung im App-Dashboard: Verwenden Sie beim Konfigurieren des Scrapings Ihre sitemap.xml-URL, zum Beispiel https://yourdocs.com/sitemap.xml, damit alle Sprachversionen Ihrer Inhalte automatisch gefunden und indexiert werden.

Fehlerbehebung​

Widget zeigt weiterhin Englisch​

  • Browser-Cache leeren - Die Datei widget.js kann zwischengespeichert sein. Führen Sie einen harten Refresh aus (Strg+F5 / Cmd+Shift+R).
  • data-locale prüfen - Stellen Sie sicher, dass das Attribut mit einem unterstützten Sprachcode gesetzt ist.
  • Browsersprache prüfen - Kontrollieren Sie, ob die bevorzugte Browsersprache korrekt eingestellt ist.
  • HTML-lang der Seite prüfen - Stellen Sie sicher, dass die Seite <html lang="de"> oder den passenden Code verwendet.

Quellen erscheinen in der falschen Sprache​

  • Inhalte erneut scrapen - Stellen Sie sicher, dass alle Sprachversionen indexiert wurden.
  • sitemap.xml verwenden - Dadurch findet der Scraper alle URLs wie /de/, /fr/ usw.
  • Fragesprache prüfen - Die KI versucht, die Antwortsprache an die Fragesprache anzupassen.

Fehlende Übersetzungen​

  • Unterstützte Sprachen prüfen - Nur die 14 oben aufgeführten Sprachen haben garantierte UI-Übersetzungen.

Bewährte Vorgehensweisen​

  1. <html lang> auf Ihren Seiten setzen - Das hilft bei Barrierefreiheit und Widget-Erkennung.
  2. Während der Entwicklung mit data-locale testen - Prüfen Sie, ob jede Sprache korrekt dargestellt wird.
  3. Alle Sprachversionen scrapen - Verwenden Sie sitemap.xml für eine vollständige mehrsprachige Indexierung.
  4. Sprachverteilung überwachen - Prüfen Sie in den Analysen, welche Sprachen Ihre Besucher am häufigsten verwenden.