:::note Versiestatus De gepubliceerde npm-SDK 0.1.4 met gehoste widget.js v15 ondersteunt teardown via remove() of window.ChattyBox.destroy(): UI/stijlen worden verwijderd en lopende initialisatie, retries en chats geannuleerd. v15-chat doet hoogstens 10 pogingen binnen een planningsbudget van 30 seconden, geen harde timeout per request. Headless sendMessage() probeert niet automatisch opnieuw. :::

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 vraagt alleen bij initialisatie om een specifieke widget-UI-taal als het project scriptoverrides toestaat.

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 bepaalt de UI-locale bij initialisatie volgens de Fixed- of Auto-modus van het project; latere wijzigingen van attributen of clientroutes worden niet gevolgd.

Officieel ondersteunde talen

De widget heeft vertaalcatalogi voor 14 talen. Een catalogus betekent niet dat elke zichtbare of toegankelijke tekenreeks is vertaald en garandeert geen antwoordkwaliteit.

Taal	Code
Engels	en
Frans	fr
Duits	de
Spaans	es
Italiaans	it
Nederlands	nl
Portugees	pt
Pools	pl
Zweeds	sv
Indonesisch	id
Ests	et
Fins	fi
Welsh	cy
Tsjechisch	cs

:::note UI-taal en antwoorden De UI-locale wordt niet als taalparameter voor de chat verzonden. De backend detecteert de vraagtaal en probeert taalbewuste retrieval en generatie; antwoordtaal en -kwaliteit hangen af van geïndexeerde inhoud en het model. :::

Hoe taaldetectie werkt

De widget lost zijn UI-locale alleen bij initialisatie op; routewijzigingen aan clientzijde of latere attribuutwijzigingen worden niet gevolgd. De volgorde is:

1. Toegestane override - een niet-lege data-locale wint alleen als allowLocaleOverride niet false is, ook in vaste modus.
2. Vaste modus - zonder toegestane override gebruikt de widget defaultLocale.
3. Automodus - <html lang>, daarna browsertaal, daarna defaultLocale.
4. Normalisatie - fr-CA kan fr worden; een niet-ondersteunde waarde wordt onmiddellijk Engels.

Taal handmatig overschrijven

Schakel eerst Allow Script Override in en voeg data-locale vóór de loader toe om een specifieke taal aan te vragen:

<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 en controleer de gerenderde interface. :::

Taalinstellingen in het dashboard

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

• Auto-detect - gebruikt de paginataal vóór de browsertaal
• Fixed Language - gebruikt de ingestelde taal, behalve bij een toegestane override
• 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

Indexeer voor een bruikbare meertalige ervaring openbare content in de talen van je bezoekers en test de bronnen; detectie en retrieval zijn niet gegarandeerd. Zo doe je dat:

1. Scrape alle taalversies van je documentatie met het bestand sitemap.xml
2. De scraper probeert de taal te herkennen; inspecteer inhoud en citaten in plaats van een exact resultaat te veronderstellen
3. Retrieval probeert de herkende vraagtaal te verkiezen, maar kan terugvallen op andere geïndexeerde inhoud

Instellen in het app-dashboard: gebruik bij het configureren van scraping de URL van je sitemap.xml (bijvoorbeeld https://yourdocs.com/sitemap.xml) om taalversies te ontdekken en controleer vervolgens de geïndexeerde pagina's. Sitemaps omzeilen crawl-limieten of uitsluitingen niet.

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 - Controleer of de gewenste URL's echt zijn geïndexeerd; crawl-limieten en uitsluitingen kunnen ze weglaten
• Controleer de vraagtaal - De AI probeert de antwoordtaal af te stemmen op de vraagtaal

Ontbrekende vertalingen

• Controleer ondersteunde talen - Alleen de 14 bovenstaande codes hebben catalogi; ontbrekende labels kunnen op Engels terugvallen

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 ontdekking en controleer de geïndexeerde pagina's
4. Beoordeel echte vragen - Het dashboard heeft geen rapport voor de verdeling van widget-locales