Overzicht

De Bugalou Website Chat widget laat je websitebezoekers direct een gesprek starten vanaf je site. Berichten verschijnen in je team inbox, net als WhatsApp en e-mail, zodat je team alles vanaf één plek afhandelt.

Stap 1: Open de Website Chat-instellingen

Klik in je Bugalou-dashboard op "Channels" in de linker zijbalk om de Kanaal Catalogus te openen. Zoek de "Website Chat"-kaart (met het "Popular" badge) en klik op "Verbinden" (of "Beheren" als het al is ingesteld).

Stap 2: Activeer de widget

Op de Website Chat-pagina zie je 6 tabbladen. Begin op het tabblad "Installatie":

1. Onder "Widget Status" zet je de schakelaar op "Actief" — dit maakt de widget zichtbaar op je website
2. Kopieer de Installatiecode die op de pagina wordt getoond

Stap 3: Installeer de widget-code

Plak de installatiecode vlak voor de afsluitende </body>-tag op je website. De code ziet er als volgt uit:

<!-- Bugalou Website Chat Widget -->
<script>
  (function() {
    var w = window;
    var d = document;
    w.BugalouWidget = w.BugalouWidget || {};
    w.BugalouWidget.key = 'JOUW_WIDGET_KEY';
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://bugalou.com/widget/loader.js';
    var x = d.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })();
</script>

Platform-specifieke instructies

• WordPress — plak de code in Weergave → Thema-editor → footer.php, of gebruik een plugin zoals "Insert Headers and Footers"
• Shopify — ga naar Online Store → Thema's → Code bewerken → theme.liquid, plak voor </body>
• Wix — ga naar Instellingen → Aangepaste code → Custom code toevoegen → Body einde
• Next.js / React — voeg het script toe aan je layout component of gebruik een <Script> component

Stap 4: Test de installatie

Op het tabblad Installatie kun je je websitedomein invoeren in het veld "Test Installatie" en op de knop klikken om te controleren of de widget correct is geladen.

Stap 5: Beperk tot specifieke domeinen (optioneel)

Onder "Toegestane Domeinen" kun je de widget beperken tot specifieke domeinen. Voer een domein in (bijv. voorbeeld.nl of *.voorbeeld.nl) en klik op de "+"-knop. Laat leeg om de widget op elk domein toe te staan.

Uiterlijk aanpassen

Klik op het tabblad "Uiterlijk" om aan te passen hoe de widget eruitziet. Je kunt wijzigen:

• Kleuren — primaire kleur (bepaalt de gradiënt-hero, CTA-knop en chatknop), knoptekstkleur, berichttekstkleur, welkom header tekstkleur, chat achtergrond
• Knop instellingen — positie (links of rechts), horizontale en verticale marges, knopstijl (rond, afgerond, vierkant, pill of zwevend) en knoppictogram (chat, bubbel, bericht, support, snel of zwaai)
• Welkomstbericht & teksten — titel, bericht, homescreen titel, chat knoptekst, e-mail tab ondertitel, invoerplaatshouder en begroetingsbericht (getoond wanneer een bezoeker de chat opent, nog voordat ze een bericht sturen)
• Taal — kies tussen Nederlands en Engels (bepaalt alle widget UI-labels)
• Logo — wordt getoond in de homescreen-hero, agentkaart, chatheader en e-mailtab hero

Een live voorbeeld met drie tabbladen (Home, Chat, E-mail) aan de rechterkant laat precies zien hoe elk scherm eruitziet bij wijzigingen. Alle wijzigingen worden automatisch opgeslagen.

Pre-chat formulier (optioneel)

Klik op het tabblad "Pre-chat Formulier" om bezoekersinformatie te verzamelen voordat ze beginnen met chatten. Zet "Pre-chat Formulier Inschakelen" aan en configureer welke velden getoond worden:

• Voornaam — standaard aan, kan als verplicht worden ingesteld
• Achternaam — standaard aan, kan als verplicht worden ingesteld
• E-mailadres — standaard aan, kan als verplicht worden ingesteld
• Telefoonnummer — optioneel, standaard uit
• Onderwerp — optioneel, standaard uit
• Bestelnummer — optioneel, standaard uit

Je kunt ook een Privacy Checkbox inschakelen om bezoekers te verplichten je privacybeleid te accepteren voordat ze chatten.

Let op: bezoekers zien eerst het Home-scherm wanneer ze de widget openen. Het pre-chat formulier verschijnt wanneer ze op de CTA-knop klikken of naar het Chat-tabblad overschakelen.

Autoresponder

Klik op het tabblad "Autoresponder" om verschillende automatische berichten in te stellen voor:

• Online — wanneer je team beschikbaar is
• Offline — wanneer niemand beschikbaar is
• Buiten Uren — buiten je geconfigureerde openingstijden

Je kunt hier ook je Openingstijden configureren voor elke dag van de week (maandag t/m zondag), inclusief begin- en eindtijden.

FAQ (Pro+ plan)

Op het tabblad "FAQ" (vereist Pro+ plan) kun je veelgestelde vragen toevoegen. FAQ-items worden als een accordion op het Home-scherm van de widget getoond — bezoekers kunnen vragen uitklappen om het antwoord te lezen zonder een chat te starten.

Gedrag

Klik op het tabblad "Gedrag" om geavanceerde widget-instellingen te beheren:

• Weergavetriggers — toon de widget na een aantal seconden of na het scrollen van een percentage van de pagina
• Apparaatinstellingen — kies of je op mobiel en/of desktop wilt tonen
• AI Chatbot — schakel AI-gestuurde automatische reacties in (vereist Pro-plan en AI Agent ingeschakeld)
• Paginaregels — toon de widget alleen op specifieke pagina's, of verberg op bepaalde pagina's (bijv. verberg op /checkout)
• "Powered by Bugalou" branding — aan- of uitzetten

Klik op "Wijzigingen Opslaan" na het aanbrengen van wijzigingen op elk tabblad.

Teamroutering

Na het instellen van je widget kun je een standaardteam toewijzen aan dit kanaal. Alle nieuwe inkomende live chat-gesprekken worden automatisch naar het geselecteerde team gerouteerd. Ga naar de widgetinstellingenpagina en gebruik het "Standaard Team"-dropdown om een team te selecteren.

Voor geavanceerdere routering kun je routeringsregels aanmaken die gesprekken routeren op basis van trefwoorden, tijdstip of andere voorwaarden. Zie Teambeheer voor een compleet overzicht.