Anpassung des gehosteten Widgets

Passen Sie die vorgefertigte Oberfläche an, die von https://chattybox.ai/widget.js geladen wird. Kanonische Installationsbeispiele für Frameworks und Plattformen finden Sie in den Installationsleitfäden.

Vor der Anpassung

Erstellen Sie das Projekt, indexieren Sie seine Inhalte und überprüfen Sie repräsentative Antworten in Test Chat, bevor Sie Zeit in die Darstellung investieren. Die vollständige Reihenfolge finden Sie unter Erste Schritte.

Gehostetes Widget konfigurieren

1. Öffnen Sie Ihr Dashboard und wählen Sie Ihr Projekt aus.
2. Öffnen Sie den Tab Embed.
3. Sehen Sie sich das Erscheinungsbild und das Sprachverhalten des Widgets in der Vorschau an und speichern Sie beides.

Der Tab Embed steuert die Darstellung und erzeugt den Installationscode. Öffentliche Schlüssel werden jedoch separat verwaltet. Wenn Sie bereit für die Installation sind:

1. Öffnen Sie Public Keys und erstellen Sie einen Browserschlüssel.
2. Beschränken Sie seine zulässigen Ursprünge auf die vorgesehenen Website-Domains.
3. Kehren Sie zu Embed zurück, wählen Sie den Schlüssel aus und kopieren Sie das generierte Snippet.
4. Befolgen Sie die Installationsleitfäden für Ihre Plattform.

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

Tipp

Im Dashboard gespeicherte Änderungen an der Widget-Darstellung werden übernommen, ohne dass Sie das Snippet auf Ihrer Website ersetzen müssen.

---

Visuelle Anpassung

ChattyBox verfügt über einen vollständig integrierten visuellen Editor. Sie können das Aussehen und Verhalten Ihres Widgets ohne Code an Ihre Marke anpassen.

Dashboard-Steuerelemente

1. Accent Color – Wählen Sie die Primärfarbe Ihrer Marke. Sie beeinflusst Launcher, wichtige Hervorhebungen und Nutzernachrichten.

2. Position – Wählen Sie, wo das Widget auf dem Bildschirm erscheint.

3. Header Title – Legen Sie den Titel fest, der oben im Chatfenster angezeigt wird.

4. Welcome Message – Passen Sie die erste Nachricht an, die Besucher beim Öffnen des Chats sehen.

Notiz

Änderungen im Dashboard werden sofort angewendet. Sie müssen den Embed-Code auf Ihrer Website nicht aktualisieren.

Erweiterte Optionen

Dashboard-Einstellungen und Skriptattribute

Das Verhalten des Widgets sollte größtenteils über das Dashboard verwaltet werden, damit Sie Ihre Website für einfache Änderungen nicht erneut bereitstellen müssen.

Verwenden Sie das Dashboard für Farben, Position, Symbol, Header-Titel, Willkommensnachricht, Sprachvoreinstellungen, Verwaltung öffentlicher Schlüssel, Scraping und Analytics.

Wenn Ihr Projekt Einschränkungen der Ursprünge öffentlicher Schlüssel verwendet, halten Sie diese Einschränkungen mit den Domains synchron, auf denen das Widget installiert ist.

Verwenden Sie Skriptattribute 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 gibt an, wohin das Widget Anfragen sendet. In der Produktion ist dies eine stabile https://...convex.site/chat-URL aus Ihrem Dashboard.
• data-locale erzwingt optional eine bestimmte Sprache der Widget-Oberfläche für diese Seite.

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

Für plattformspezifische Beispiele beginnen Sie mit Docusaurus, MkDocs, VitePress, WordPress oder GitBook.

Widget auf bestimmten Seiten ausblenden

Wenn Sie das Widget auf ausgewählten Seiten ausblenden müssen, können Sie dies mit CSS tun:

.chattybox-widget {
  display: none;
}

Benutzerdefinierte Integrationen

Benötigen Sie eine individuellere Einrichtung als mit dem gehosteten Widget? Erstellen Sie mit dem JavaScript-SDK Ihre eigene Oberfläche oder wenden Sie sich für Architekturhilfe an support@chattybox.ai.

Mehrsprachige Unterstützung

Das ChattyBox-Widget passt sich automatisch an die Spracheinstellungen Ihrer Besucher an und bietet Nutzern weltweit ein lokalisiertes Erlebnis.

Offiziell unterstützte Sprachen

Die Widget-Oberfläche (Schaltflächen, Beschriftungen und Systemnachrichten) wird offiziell in 14 Sprachen unterstützt:

Sprache	Code	Widget-Oberfläche	Qualität der KI-Antworten
Englisch	en	Vollständig unterstützt	Hervorragend
Französisch	fr	Vollständig unterstützt	Hoch
Deutsch	de	Vollständig unterstützt	Hoch
Spanisch	es	Vollständig unterstützt	Hoch
Italienisch	it	Vollständig unterstützt	Hoch
Niederländisch	nl	Vollständig unterstützt	Hoch
Portugiesisch	pt	Vollständig unterstützt	Hoch
Polnisch	pl	Vollständig unterstützt	Hoch
Schwedisch	sv	Vollständig unterstützt	Hoch
Indonesisch	id	Vollständig unterstützt	Mittel
Estnisch	et	Vollständig unterstützt	Mittel
Finnisch	fi	Vollständig unterstützt	Mittel
Walisisch	cy	Vollständig unterstützt	Mittel
Tschechisch	cs	Vollständig unterstützt	Mittel

:::note Erweiterte Sprachunterstützung Obwohl wir 14 Sprachen für die Widget-Oberfläche offiziell unterstützen, kann die zugrunde liegende KI mehr als 100 Sprachen verstehen und in ihnen antworten. Für Sprachen außerhalb unserer offiziellen Liste können wir jedoch keine hohe Antwortqualität garantieren. :::

So funktioniert die Spracherkennung

Das Widget verwendet ein Kaskadensystem zur Erkennung:

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

Sprache manuell überschreiben

Um unabhängig von den Browsereinstellungen die Anzeige einer bestimmten Sprache zu erzwingen, 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 für mehrsprachige Websites, bei denen jede Sprachversion eine eigene URL hat (z. B. /de/, /fr/). Setzen Sie data-locale passend zur Seitensprache, um ein konsistentes Nutzererlebnis zu gewährleisten. :::

Spracheinstellungen im Dashboard

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

• Auto-detect (empfohlen) – Passt die Sprache automatisch an die Browsersprache des Besuchers an.
• Fixed Language – Erzwingt die Anzeige des Widgets in einer bestimmten Sprache.
• Allow Script Override – Aktiviert oder deaktiviert die Überschreibung über das Attribut data-locale.

Sie finden diese Einstellungen in Ihrem Dashboard → Projekt → Tab Embed → Abschnitt Widget Language.

Sprache der Inhalte abgleichen

Für das beste mehrsprachige Erlebnis sollte Ihr Chatbot Antworten in derselben Sprache wie die Frage des Nutzers zurückgeben. Gehen Sie dazu wie folgt vor:

1. Scrapen Sie alle Sprachversionen Ihrer Dokumentation mithilfe der Datei sitemap.xml.
2. Der Scraper versieht die Inhalte automatisch mit ihrer 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 (z. B. https://yourdocs.com/sitemap.xml), damit alle Sprachversionen Ihrer Inhalte automatisch gefunden und indexiert werden.

Fehlerbehebung

Widget wird weiterhin auf Englisch angezeigt

• Hard Refresh als Diagnose – Laden Sie die Seite mit Ctrl+F5 oder Cmd+Shift+R neu und prüfen Sie anschließend im Netzwerkbereich des Browsers die Widget- und Übersetzungsanfragen.
• data-locale prüfen – Überprüfen Sie, ob das Attribut mit einem unterstützten Sprachcode korrekt gesetzt ist.
• Browsersprache überprüfen – Stellen Sie sicher, dass die bevorzugte Sprache Ihres Browsers korrekt eingestellt ist.
• lang im Seiten-HTML prüfen – Stellen Sie sicher, dass Ihre Seite <html lang="de"> (oder den passenden Code) enthält.

Quellen sind in der falschen Sprache

• Inhalte erneut scrapen – Stellen Sie sicher, dass alle Sprachversionen indexiert sind.
• sitemap.xml verwenden – So findet der Scraper alle URLs unter /de/, /fr/ usw.
• Anfragesprache prüfen – Die KI versucht, die Antwortsprache an die Sprache der Anfrage anzupassen.

Übersetzungen fehlen

• Unterstützte Sprachen prüfen – Nur die oben aufgeführten 14 Sprachen verfügen über garantierte UI-Übersetzungen.

Best Practices

1. <html lang> auf Ihren Seiten setzen – Hilft bei Barrierefreiheit und Widget-Erkennung.
2. Während der Entwicklung mit data-locale testen – Überprü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 beobachten – Prüfen Sie in Analytics, welche Sprachen Ihre Besucher am häufigsten verwenden.