Ga naar de hoofdinhoud
ChattyBox Logo

Widget instellen en aanpassen

Voeg in minder dan 5 minuten een AI-chatwidget toe aan je website.

Snelle installatie​

Je chatbot live zetten is eenvoudig. Kopieer alleen een klein codefragment uit je dashboard.

Stap 1: haal je insluitcode op​

  1. Open je dashboard en kies je project.
  2. Ga naar het tabblad Insluiten.
  3. Selecteer de API-sleutel die je wilt gebruiken of maak een nieuwe aan.
  4. Kopieer het gegenereerde codefragment.

Stap 2: voeg het toe aan je website​

Plak het fragment vlak vóór de afsluitende </body>-tag op elke pagina waar de chatwidget moet verschijnen.

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

:::tip Tip Dat is alles. Kleuren en instellingen hoef je niet in de code te beheren; alles wordt vanuit het dashboard geregeld. :::

Visuele aanpassing​

ChattyBox heeft een geïntegreerde visuele editor. Je kunt de widget laten aansluiten op je merk zonder code te wijzigen.

Dashboardinstellingen​

  1. Accentkleur - Kies de primaire merkkleur voor de launcher, accenten en gebruikersberichten.
  2. Positie - Kies waar de widget op het scherm verschijnt.
  3. Koptitel - Stel de titel bovenaan het chatvenster in.
  4. Welkomstbericht - Pas het eerste bericht aan dat bezoekers zien.
opmerking

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

Geavanceerde opties​

Dashboardinstellingen versus scriptattributen​

Beheer de meeste widgetfuncties in het dashboard, zodat je je website niet opnieuw hoeft te publiceren voor eenvoudige wijzigingen.

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

Als je project oorsprongsbeperkingen voor openbare sleutels gebruikt, houd die beperkingen gelijk aan de domeinen waar 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.
  • data-locale kan de interfacetaal voor die pagina afdwingen.

Verschijnt de widget na installatie niet, bekijk dan probleemoplossing.

De widget verbergen op specifieke pagina's​

Je kunt de widget op geselecteerde pagina's verbergen met CSS:

.chattybox-widget {
  display: none;
}

Aangepaste integraties​

Heb je een specifiekere opzet nodig dan de standaardwidget?

Neem contact op via [email protected]. We helpen je de juiste integratieaanpak te kiezen.

Meertalige ondersteuning​

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

Officieel ondersteunde talen​

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

TaalCodeWidgetinterfaceKwaliteit van AI-antwoorden
EngelsenVolledige ondersteuningUitstekend
FransfrVolledige ondersteuningHoog
DuitsdeVolledige ondersteuningHoog
SpaansesVolledige ondersteuningHoog
ItaliaansitVolledige ondersteuningHoog
NederlandsnlVolledige ondersteuningHoog
PortugeesptVolledige ondersteuningHoog
PoolsplVolledige ondersteuningHoog
ZweedssvVolledige ondersteuningHoog
IndonesischidVolledige ondersteuningGemiddeld
EstsetVolledige ondersteuningGemiddeld
FinsfiVolledige ondersteuningGemiddeld
WelshcyVolledige ondersteuningGemiddeld
TsjechischcsVolledige ondersteuningGemiddeld

:::note Uitgebreide taalondersteuning Hoewel de widgetinterface officieel 14 talen ondersteunt, kan de onderliggende AI 100+ talen begrijpen en beantwoorden. Voor talen buiten de officiële lijst kunnen we geen constante hoge kwaliteit garanderen. :::

Hoe taaldetectie werkt​

De widget gebruikt een trapsgewijs detectiesysteem:

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

Taal handmatig overschrijven​

Voeg data-locale toe om de widgettaal onafhankelijk van browserinstellingen vast te zetten:

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

:::tip Gebruikssituatie Dit is handig voor een meertalige site waar elke taal een eigen URL heeft, zoals /de/ of /fr/. Stel data-locale in volgens de paginataal voor een consistente ervaring. :::

Taalinstellingen in het dashboard​

In het app-dashboard kun je de taalvoorkeuren per project instellen:

  • Automatisch detecteren (aanbevolen) - Past zich aan de browsertaal van de bezoeker aan.
  • Vaste taal - Dwingt altijd één specifieke widgettaal af.
  • Scriptoverschrijving toestaan - Schakelt overschrijving via data-locale in of uit.

Je vindt dit in het dashboard → Project → Insluiten → Widgettaal.

Inhoudstaal laten overeenkomen​

Voor de beste meertalige ervaring moet je chatbot antwoorden in dezelfde taal als de vraag. Doe dit zo:

  1. Scrape alle taalversies van je documentatie met sitemap.xml.
  2. De scraper labelt inhoud automatisch met de juiste taal.
  3. Het RAG-systeem haalt de passende taalversie op basis van de vraag op.

Instelling in het dashboard: gebruik bij scraping de URL van sitemap.xml, bijvoorbeeld https://yourdocs.com/sitemap.xml, zodat alle taalversies automatisch worden gevonden en geïndexeerd.

Probleemoplossing​

Widget blijft Engels tonen​

  • Leeg de browsercache - widget.js kan gecachet zijn. Gebruik hard vernieuwen (Ctrl+F5 / Cmd+Shift+R).
  • Controleer data-locale - Verifieer dat de waarde een ondersteunde taalcode is.
  • Controleer de browsertaal - Kijk of de voorkeurstaal correct staat.
  • Controleer HTML lang - Zorg dat de pagina <html lang="nl"> of de juiste code gebruikt.

Bronnen staan in de verkeerde taal​

  • Scrape de inhoud opnieuw - Zorg dat alle taalversies zijn geïndexeerd.
  • Gebruik sitemap.xml - Zo vindt de scraper URL's zoals /de/ en /fr/.
  • Controleer de vraagtaal - De AI probeert de antwoordtaal af te stemmen op de vraag.

Ontbrekende vertalingen​

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

Aanbevolen werkwijzen​

  1. Zet <html lang> op je pagina's - Dit helpt 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 volledige meertalige indexering.
  4. Volg de taalverdeling - Gebruik analytics om te zien welke talen bezoekers het meest gebruiken.