De gehoste widget aanpassen

Pas de kant-en-klare interface aan die wordt geladen door https://chattybox.ai/widget.js. Zie Installatiehandleidingen voor canonieke installatievoorbeelden voor frameworks en platforms.

Voordat je aanpast

Maak het project, indexeer de content en controleer representatieve antwoorden in Test Chat voordat je tijd besteedt aan de presentatie. Zie Aan de slag voor de volledige volgorde.

De gehoste widget configureren

1. Ga naar je Dashboard en selecteer je project.
2. Ga naar het tabblad Embed.
3. Bekijk een voorbeeld van het uiterlijk en taalgedrag van de widget en sla dit op.

Het tabblad Embed regelt de presentatie en genereert installatiecode, maar openbare sleutels worden afzonderlijk beheerd. Als je klaar bent om te installeren:

1. Open Public Keys en maak een browsersleutel aan.
2. Beperk de toegestane origins tot de bedoelde websitedomeinen.
3. Ga terug naar Embed, selecteer de sleutel en kopieer het gegenereerde fragment.
4. Volg de Installatiehandleidingen voor je platform.

<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>

tip

Wijzigingen aan de widgetpresentatie die in het dashboard worden opgeslagen, worden toegepast zonder het fragment op je site te vervangen.

---

Visuele aanpassing

ChattyBox heeft een volledig geïntegreerde visuele editor. Je kunt het uiterlijk van je widget precies op je merk afstemmen zonder code aan te raken.

Dashboardinstellingen

1. Accent Color - Kies de primaire merkkleur. Dit beïnvloedt de launcher, belangrijke accenten en gebruikersberichten.

2. Position - Kies waar de widget op het scherm verschijnt.

3. Header Title - Stel de titel bovenaan het chatvenster in.

4. Welcome Message - Pas het eerste bericht aan dat bezoekers zien wanneer ze de chat openen.

opmerking

Wijzigingen in het dashboard worden direct toegepast. Je hoeft de embedcode op je site niet bij te werken.

Geavanceerde opties

Dashboardinstellingen versus scriptattributen

Beheer het meeste widgetgedrag vanuit het dashboard, zodat je je website niet opnieuw hoeft te deployen voor eenvoudige wijzigingen.

Gebruik het dashboard voor kleuren, positie, pictogram, koptitel, welkomstbericht, standaardtalen, beheer van openbare sleutels, scraping en analytics.

Als je project originbeperkingen voor openbare sleutels gebruikt, houd die beperkingen dan gesynchroniseerd met de domeinen waarop de widget is geïnstalleerd.

Gebruik scriptattributen alleen voor waarden die de widget nodig heeft bij het laden van de pagina:

• data-api-key identificeert de openbare widgetsleutel.
• data-api-url vertelt de widget waar verzoeken naartoe moeten. In productie is dit een stabiele https://...convex.site/chat-URL uit je dashboard.
• data-locale kan optioneel een specifieke widget-UI-taal voor die pagina afdwingen.

Verschijnt de widget na installatie niet, bekijk dan Probleemoplossing.

Begin voor platformspecifieke voorbeelden met Docusaurus, MkDocs, VitePress, WordPress of GitBook.

De widget op specifieke pagina’s verbergen

Als je de widget op geselecteerde pagina’s wilt verbergen, kan dat met CSS:

.chattybox-widget {
  display: none;
}

Aangepaste integraties

Heb je een specifiekere inrichting nodig dan de gehoste widget? Bouw je eigen interface met de JavaScript-SDK of neem contact op met support@chattybox.ai voor architectuuradvies.

Meertalige ondersteuning

De ChattyBox-widget past zich automatisch aan de taalvoorkeuren van bezoekers aan en biedt gebruikers wereldwijd een gelokaliseerde ervaring.

Officieel ondersteunde talen

De widgetinterface (knoppen, labels en systeemberichten) wordt officieel ondersteund in 14 talen:

Taal	Code	Widget-UI	Kwaliteit van AI-antwoorden
Engels	en	Volledige ondersteuning	Uitstekend
Frans	fr	Volledige ondersteuning	Hoog
Duits	de	Volledige ondersteuning	Hoog
Spaans	es	Volledige ondersteuning	Hoog
Italiaans	it	Volledige ondersteuning	Hoog
Nederlands	nl	Volledige ondersteuning	Hoog
Portugees	pt	Volledige ondersteuning	Hoog
Pools	pl	Volledige ondersteuning	Hoog
Zweeds	sv	Volledige ondersteuning	Hoog
Indonesisch	id	Volledige ondersteuning	Gemiddeld
Ests	et	Volledige ondersteuning	Gemiddeld
Fins	fi	Volledige ondersteuning	Gemiddeld
Welsh	cy	Volledige ondersteuning	Gemiddeld
Tsjechisch	cs	Volledige ondersteuning	Gemiddeld

:::note Uitgebreide taalondersteuning Hoewel we de widgetinterface officieel in 14 talen ondersteunen, kan de onderliggende AI 100+ talen begrijpen en daarin antwoorden. Voor talen buiten de officiële lijst kunnen we echter geen hoge kwaliteit garanderen. :::

Hoe taaldetectie werkt

De widget gebruikt een trapsgewijs detectiesysteem:

1. Attribuut data-locale - Hoogste prioriteit. Stel dit in op je embedcode om een specifieke taal af te dwingen.
2. Pagina-attribuut <html lang> - De widget controleert de opgegeven taal van je pagina.
3. Browsertaal (navigator.language) - Gebruikt de voorkeuren van de bezoeker.
4. Standaardfallback - Engels als er geen taal wordt gedetecteerd.

Taal handmatig overschrijven

Voeg het attribuut data-locale toe om de widget ongeacht de browserinstellingen in een specifieke taal te laten weergeven:

<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 Gebruikssituatie Dit is vooral nuttig als je een meertalige website hebt waarbij elke taalversie een eigen URL heeft (bijvoorbeeld /de/, /fr/). Stel data-locale in op de taal van elke pagina voor een consistente gebruikerservaring. :::

Taalinstellingen in het dashboard

In het app-dashboard kun je de taalvoorkeuren van de widget per project configureren:

• Auto-detect (Aanbevolen) - Komt automatisch overeen met de browsertaal van de bezoeker
• Fixed Language - Dwingt de widget altijd in een specifieke taal weer te geven
• Allow Script Override - Schakelt het overschrijven van het attribuut data-locale in of uit

Je vindt deze instellingen in je Dashboard → Project → tabblad Embed → sectie Widget Language.

Inhoudstaal laten overeenkomen

Voor de beste meertalige ervaring moet je chatbot antwoorden in dezelfde taal als de vraag van de gebruiker. Zo doe je dat:

1. Scrape alle taalversies van je documentatie met het bestand sitemap.xml
2. De scraper voorziet content automatisch van een taalmarkering
3. Het RAG-systeem haalt op basis van de query de juiste taalversie op

Instellen in het app-dashboard: gebruik bij het configureren van scraping de URL van je sitemap.xml (bijvoorbeeld https://yourdocs.com/sitemap.xml) om alle taalversies van je content automatisch te vinden en te indexeren.

Probleemoplossing

De widget blijft Engels tonen

• Hard refresh als diagnose - Laad opnieuw met Ctrl+F5 of Cmd+Shift+R en controleer daarna in het browsernetwerkpaneel de widget- en vertaalverzoeken
• Controleer data-locale - Controleer of het attribuut correct is ingesteld met een ondersteunde taalcode
• Controleer de browsertaal - Controleer of de voorkeurstaal van je browser correct is ingesteld
• Controleer HTML lang van de pagina - Zorg dat je pagina <html lang="de"> (of de juiste code) bevat

Bronnen staan in de verkeerde taal

• Scrape je content opnieuw - Zorg dat alle taalversies zijn geïndexeerd
• Gebruik sitemap.xml - Zo vindt de scraper alle URL’s zoals /de/, /fr/ enzovoort
• Controleer de vraagtaal - De AI probeert de antwoordtaal af te stemmen op de vraagtaal

Ontbrekende vertalingen

• Controleer ondersteunde talen - Alleen de 14 hierboven genoemde talen hebben gegarandeerde UI-vertalingen

Aanbevolen werkwijzen

1. Stel <html lang> in op je pagina’s - Dit helpt bij toegankelijkheid en widgetdetectie
2. Test tijdens ontwikkeling met data-locale - Controleer of elke taal correct wordt weergegeven
3. Scrape alle taalversies - Gebruik sitemap.xml voor uitgebreide meertalige indexering
4. Houd de taalverdeling in de gaten - Bekijk analytics om te zien welke talen bezoekers het meest gebruiken