Chat-widget #

Handleiding voor integratie van de website-chat-widget #

Voeg een gebruiksvriendelijke chat-widget toe aan uw website waarmee bezoekers rechtstreeks via de interface van uw site kunnen communiceren. Het integratieproces is eenvoudig en voorziet uw website van ingebouwde berichtfuncties.

De chatwidget maken en configureren #

Hoe kom je daar:

1. Klik op Instellingen onderaan de linkerzijbalk. (Tik op een telefoon eerst op het menupictogram ☰ in de bovenhoek om de zijbalk te openen.)
2. Klik in de linker kolom van Instellingen onder Kanalen op Kanalen.
3. Zoek de kaart Website chatwidget.
4. Als je nog geen widget hebt, klik dan op Verbinden om er een te maken met een weergavenaam en welkomstbericht.
5. Zodra deze is aangemaakt, kun je op elk gewenst moment op Beheren klikken om het volledige configuratiepaneel te openen.

Wijzigingen die je opslaat, worden automatisch toegepast op je live widget — je hoeft de installatiecode niet opnieuw te plakken nadat je een wijziging hebt aangebracht.

Een Live preview staat direct naast de instellingen: een voorbeeldwebpagina met je daadwerkelijke widget erop, die je kleuren, positie, logo, launcher-icoon en proactieve pop-up precies laat zien zoals bezoekers ze zullen zien. Het volgt je bewerkingen terwijl je ze maakt, dus je hoeft niet op te slaan om te zien hoe een kleur- of themawijziging eruitziet. Je kunt zelfs op de chatknop in het voorbeeld klikken om de widget te openen en uit te proberen.

Wat je kunt aanpassen #

Het paneel Beheren is onderverdeeld in vier secties.

Uiterlijk #

• Stijlthema: Pas de hele widget met één klik aan. Zes thema’s bepalen elk de look, kleuren, hoeken en het lettertype: Classic (de originele solide look — een gekleurde kopbalk op een plat paneel), Glass (een mat, doorschijnend paneel dat de pagina erachter zachtjes vervaagt, waarbij de koptekst en het berichtvenster als afgeronde kaarten erin zweven), Midnight (Glass in donkere kleuren), Bloom (zachtroze, extra afgerond), Ember (warm oranje Glass) en Mono (zwart-wit, scherpe hoeken). Een thema is een startpunt — nadat je er een hebt gekozen, kun je nog steeds elke kleur of instelling individueel wijzigen. Nieuwe widgets beginnen op Glass; overschakelen gebeurt direct overal waar de widget is ingesloten, zonder codewijzigingen op je site.
• Hoeken en lettertype: Twee onafhankelijke stijlinstellingen. Hoeken bepaalt hoe afgerond het paneel, de tekstballonnen en de knoppen zijn (Rond, Zacht of Scherpe hoeken), en Lettertype kiest het lettertype dat bezoekers zien (Standaard, Serif, Afgerond of Mono) — lettertypes zijn afkomstig van wat er al op het apparaat van de bezoeker staat, dus er wordt niets extra’s geladen op je site.
• Weergavenaam: Wordt getoond in de widget-koptekst.
• Logo: Upload een afbeelding die bovenaan de chat verschijnt. Gebruik je bedrijfslogo of een vriendelijke profielfoto.
• Launcher-icoon: Het icoon op de zwevende chatknop zelf. Kies een van de ingebouwde iconen (chatballon, papieren vliegtuigje, vraagteken en meer), hergebruik je geüploade logo of upload een aparte eigen afbeelding — handig als je een foto van een echt teamlid wilt dat bezoekers begroet.
• Kleuren: Vijf kleuren, waarbij elk de naam geeft van het onderdeel van de widget dat het kleurt. Merkkleur is de zwevende knop, de koptekst en de eigen berichten van de bezoeker, met Merktekst voor de tekst die daarop staat. Bot-ballon is de achtergrond van de antwoorden van je bot en van de type-indicator, met Bot-ballontekst voor de woorden daarin en de geanimeerde typ-stippen. Chatvenster is het paneel achter alle berichten. Kies een Bot-ballonkleur die duidelijk verschilt van je Merkkleur — als de twee overeenkomen, krijgen beide kanten van het gesprek dezelfde kleur en kunnen bezoekers de antwoorden van je bot niet onderscheiden van die van henzelf. Een lichtgrijze bot-ballon met donkere tekst naast je merkkleur is de veilige combinatie.
• Positie: Plaats de zwevende chatknop in de rechtsonder of linksonder hoek, met horizontale en verticale offset (in pixels) als deze iets anders op je pagina overlapt.
• Startvragen: Snel-antwoord suggesties (klikbare chips) die in de chat worden getoond zodat bezoekers met één tik aan de slag kunnen in plaats van te typen — bijvoorbeeld “Wat zijn jullie prijzen?” of “Bieden jullie ondersteuning?” — maximaal 10.

Gedrag #

• Openingsbericht: Het eerste bericht dat bezoekers zien wanneer ze de chat openen (bijvoorbeeld: “Hoe kan ik je helpen?”).
• Geluid: Speel een geluid af wanneer er een nieuw bericht in de chat binnenkomt.
• Vraag om notificatietoestemming: Vraag bezoekers optioneel om browsermeldingen toe te staan, zodat ze op de hoogte worden gebracht van antwoorden, zelfs als ze naar andere tabbladen zijn overgeschakeld.
• Proactieve pop-upbubbel: Een optioneel tekstballonnetje dat naast de chatknop verschijnt om mensen uit te nodigen. Schakel dit in om het bericht, de tekst op de accepteer/weiger-knop en het aantal seconden dat moet verstrijken voordat het verschijnt, in te stellen. De bubbel verbergt zichzelf na 20 seconden als niemand erop klikt (dat aantal staat vast), en zodra een bezoeker op Niet nu klikt, blijft deze de rest van het bezoek weg. Het chatvenster zelf opent nooit uit zichzelf: het opent wanneer de bezoeker op de chatknop of de bubbel klikt en blijft open totdat ze het sluiten.
• AI-antwoordtijd: Een schuifregelaar tussen Langzamer (menselijker — de AI wacht even voordat deze antwoordt) en Max. snelheid (robotachtiger — antwoorden komen zo snel mogelijk). Gebalanceerd staat in het midden.

Talen #

De widget is van zichzelf meertalig — er hoeft niets te worden ingeschakeld.

• De taal van de bezoeker wordt automatisch gekozen. Eerst kijkt het naar de taal die je pagina in de HTML (<html lang="it">) aangeeft, daarna valt het terug op de taal van de browser van de bezoeker. Als geen van beide een taal is die we ondersteunen, wordt Engels getoond.
• Of kies er zelf een. Het veld Widgettaal in het gedeelte Gedrag staat standaard op Auto, wat de bovenstaande detectie is. Kies daar een taal en de eigen labels van de widget (de velden Voornaam, E-mail en Telefoon van het bezoekersformulier en hun voorbeeldtekst, de privacyverklaring, de knoppen) blijven in die taal, ongeacht wat de pagina of browser zegt. Gebruik dit wanneer je websitebouwer niet de juiste taal aangeeft, of wanneer je één vaste taal wilt voor elke bezoeker.
• Ondersteunde talen: Engels, Nederlands, Duits, Frans, Spaans, Italiaans, Portugees, Roemeens, Pools, Arabisch, Fins en Filipijns. Dit is de lijst voor de eigen knoppen en labels van de widget.
• Je berichten worden voor je vertaald. Elke keer dat je opslaat, worden je openingsbericht, proactieve pop-upbubbel en startvragen vertaald naar alle twaalf bovenstaande talen. Je hoeft ze maar één keer te schrijven, in de taal van jouw voorkeur.
• Schrijf elk bericht in slechts één taal. Als je twee talen in hetzelfde veld zet — bijvoorbeeld een Engelse regel en een Italiaanse regel — wordt het geheel behandeld als één enkel bericht en vertaald zoals het er staat, waardoor een Italiaanse bezoeker uiteindelijk dezelfde zin twee keer ziet. Schrijf het één keer, in de taal van jouw voorkeur.
• De AI antwoordt in de taal van de bezoeker. Welke taal iemand ook typt, je agent antwoordt in diezelfde taal, ongeacht in welke taal de labels van de widget worden weergegeven. Als je wilt dat deze altijd in één vaste taal antwoordt, geef dit dan aan in de instructies van je agent.

Tip: als je website geen lang-kenmerk op de <html>-tag heeft staan, voeg er dan een toe. Dit is het sterkste signaal dat we hebben om de juiste taal te kiezen, vooral voor bezoekers die vanuit het buitenland browsen.

Leadgeneratie & Privacy #

• Bezoekersinformatie verzamelen: Standaard uitgeschakeld. Indien ingeschakeld, wordt bezoekers gevraagd om hun naam en e-mailadres (en optioneel telefoonnummer) voordat het gesprek begint, zodat u de lead vastlegt, zelfs als ze het gesprek halverwege verlaten.
• Formuliertitel en Formulier-ondertitel: Pas de kop en de korte uitleg aan die boven het formulier worden weergegeven.
• Telefoonnummer verzamelen: Schakel dit in om ook om een telefoonnummer te vragen; indien uitgeschakeld, worden alleen de naam en het e-mailadres verzameld.

Een bezoeker heeft een telefoonnummer achtergelaten en is van je site vertrokken — kan ik doorgaan op WhatsApp? Ja. Open hun chat en kies Doorgaan op WhatsApp in het menu met de drie puntjes (WhatsApp Web of WhatsApp Business moet verbonden zijn). Your AI Connector maakt een gekoppeld WhatsApp-gesprek aan voor dezelfde persoon, kopieert hun naam, e-mailadres en gegevens, en de AI neemt mee wat ze op je site hebben gezegd, zodat niemand zichzelf hoeft te herhalen. De website-chat blijft waar deze is en beide chats verwijzen naar elkaar onder Gekoppelde gesprekken in het contactpaneel. Zie Chatinterface.

Kan de AI-agent zelf voorstellen om over te schakelen naar WhatsApp? Ja, en daar is geen extra functie voor nodig — één regel in de instructies van de agent is voldoende. Maak een Korte link voor je WhatsApp-nummer met een vooraf ingevuld bericht zoals “Hoi, ik was aan het chatten op jullie website en wil hier verdergaan”, en vertel de agent vervolgens wanneer deze verzonden moet worden, bijvoorbeeld: “Als de bezoeker weg moet, later verder wil gaan of om WhatsApp vraagt, bied dan aan om daar verder te gaan en stuur deze link: (jouw korte link)”. Links in de widget zijn aanklikbaar, dus de bezoeker komt in WhatsApp terecht met jouw nummer geselecteerd en het bericht al ingetypt, en hun eerste bericht opent een WhatsApp-gesprek in je inbox. Als de bezoeker het telefoonnummer waarvan ze schrijven (met landcode) heeft achtergelaten in het widgetformulier, koppelt Your AI Connector de twee gesprekken automatisch en kent de AI op WhatsApp het website-gesprek al, precies zoals bij Doorgaan op WhatsApp. Als er geen telefoonnummer is verzameld, worden de twee chats niet gekoppeld, dus zorg dat het vooraf ingevulde bericht specifiek genoeg is zodat de WhatsApp-agent weet waar de persoon vandaan komt.

• Bevestiging van privacybeleid vereisen: Vereis optioneel dat bezoekers je privacybeleid accepteren voordat ze chatten, en stel de URL in waarnaar dit verwijst.

Wat slaat de widget op in de browser van een bezoeker en moet ik deze achter een cookiebanner plaatsen? Er wordt niets opgeslagen door enkel een pagina te laden. De widget schrijft geen cookies en gebruikt geen browseropslag totdat de bezoeker ervoor kiest om te chatten: een eerste bericht verstuurt, het formulier met bezoekersinformatie invult of akkoord gaat met uw privacybeleid. Vanaf dat moment bewaart het een willekeurig gespreks-ID en een kopie van het gesprek in die browser, als first-party opslag op uw eigen domein, zodat de chat nog steeds beschikbaar is wanneer ze terugkeren. Het laadt geen analytics- of tracking-scripts en plaatst geen third-party cookies. Omdat er niets wordt geschreven totdat de bezoeker vraagt om te chatten, valt het onder de opslag die strikt noodzakelijk is voor een dienst waar de bezoeker om heeft gevraagd, dus u kunt deze laden zonder deze achter een toestemmingsbanner te plaatsen. Als uw site toch een toestemmingstool gebruikt, is het prima om de widget daarachter te houden; de chat verschijnt simpelweg zodra de bezoeker akkoord gaat.

Kanalen & Insluiten #

• Bijlageknop: Hiermee kunnen bezoekers afbeeldingen en bestanden in de chat versturen.
• Emoji-kiezer: Voegt een emoji-kiezer toe naast het tekstvak voor berichten.
• Kanaallinks: Voeg optioneel WhatsApp-, Instagram- of Messenger-links toe zodat bezoekers het gesprek kunnen voortzetten op het platform van hun voorkeur. Dit verschijnt pas nadat je een WhatsApp-nummer, Instagram of Messenger hebt gekoppeld.
• Actieknoppen: Een rij snelkoppelingen bovenaan de chat die de bezoeker ergens naartoe leiden in plaats van naar een gesprek — zie Actieknoppen hieronder.
• Domein-whitelist: Beperk welke websites je widget mogen insluiten. Voeg de domeinen toe waar je deze hebt geïnstalleerd (bijv. example.com of *.example.com); laat leeg om elk domein toe te staan.
• Routeer deze chats naar: Kies de campagne of agent die chats moet afhandelen die afkomstig zijn van de code die je zo gaat kopiëren. Laat dit op Accountstandaard staan om je normale chatwidget-routering te gebruiken. Zie Stuur verschillende pagina’s naar verschillende campagnes hieronder.
• Insluitcode: Kies Zwevende bubbel of Inline en kopieer de installatiecode (zie hieronder).
• Klant-demolink: Plak een willekeurig websiteadres om een deelbare link te krijgen die die site opent met jouw widget eroverheen — de ander hoeft niets te installeren. Zie Toon de widget op de website van iemand anders hieronder.

Onderaan het paneel verwijdert de actie Chatwidget verwijderen de widget onmiddellijk van je website — dit kan niet ongedaan worden gemaakt en bezoekers zullen de chatbubbel niet langer zien.

Actieknoppen #

Sommige bezoekers willen niet chatten. Ze willen je telefoonnummer, je adres of je e-mailadres, en ze willen dat met één tik kunnen vinden. Actieknoppen zijn een rij snelkoppelingen bovenaan het chatvenster die precies daarvoor dienen.

Voeg er maximaal zes toe. Elke knop heeft een label (de tekst op de knop) en een bestemming, en de bestemming hangt af van de actie die je kiest:

Deze knoppen verbruiken geen credits. Ergens op tikken verstuurt geen bericht en start geen gesprek — het brengt de bezoeker simpelweg naar de plek waar ze om vroegen. Alleen een daadwerkelijk gesprek met je AI-agent verbruikt credits, precies zoals voorheen.

Een paar dingen die handig zijn om te weten:

• De knoppen blijven zichtbaar terwijl de bezoeker chat. Iemand kan twee vragen stellen en daarna nog steeds op Routebeschrijving tikken zonder de pagina te verversen.
• Je labels worden precies zo getoond als je ze hebt geschreven. In tegenstelling tot je welkomstbericht en startvragen worden knoplabels niet automatisch vertaald. Als je bezoekers in meerdere talen bedient, houd de labels dan kort en duidelijk (of schrijf ze in je hoofdtaal).
• Vul een knop correct in, anders wordt deze niet opgeslagen. Als een telefoonnummer, e-mailadres of link niet geldig is, geeft het paneel dit aan en wordt Wijzigingen opslaan geblokkeerd in plaats van een knop te publiceren die niets doet op je site.
• Het zijn geen FAQ-antwoorden. Actieknoppen sturen mensen alleen ergens anders heen; ze antwoorden niet met standaardteksten. Vragen zijn de taak van je AI-agent, en die beantwoordt ze vanuit je kennisbank. Als je wilt suggereren wat ze kunnen vragen, gebruik dan startvragen onder Weergave.

Wat je niet kunt aanpassen #

Het Beheerpaneel bevat de volledige set opties. In het bijzonder:

• Geen aangepaste CSS of stylesheet. Styling is wat de thema-, hoek-, lettertype- en kleurkiezers bieden — je kunt je eigen CSS niet in de widget injecteren en regels op je pagina bereiken de binnenkant niet.
• Geen aangepaste tijdelijke aanduidingstekst in het berichtvak.
• Geen land- of geografische beperking. De Domein-whitelist beperkt welke websites de widget mogen insluiten; er is geen manier om deze te tonen of te verbergen op basis van waar de bezoeker zich bevindt. Als je dat nodig hebt, verberg het insluitfragment dan zelf op de pagina’s of voor de doelgroepen waar je het niet op wilt hebben.
• Geen video-insluiting in de chat.
• Geen timer voor automatisch verbergen. De uitnodigingsbubbel verdwijnt na 20 seconden uit zichzelf en dat aantal kan niet worden gewijzigd; het geopende chatvenster sluit zichzelf nooit. Als de bubbel over je pagina-inhoud heen staat, verplaats de widget dan met de Positie-offsets of schakel de bubbel uit en behoud alleen de opstartknop.

Als een van deze punten een blokkade voor je vormt, biedt de inline embed je de meeste controle: de widget bevindt zich in een container op je eigen pagina, die je zelf van formaat en positie voorziet.

Installatie-instructies #

Om de chatwidget aan je website toe te voegen, voeg je één regel code toe aan de HTML van je site.

1. Open het HTML-bestand van je website in een teksteditor.
2. Zoek de afsluitende </body>-tag — deze staat meestal helemaal aan het einde van het bestand.
3. Plak deze regel code vlak voor de </body>-tag, zodat de rest van je pagina eerst wordt geladen:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>

4. Vervang CONFIG_ID door je unieke configuratie-identificatie, die wordt weergegeven in het gedeelte Kanalen & Insluitingen van het Beheerpaneel. Deze identificatie is specifiek voor jouw account en verbindt de widget met je berichtensysteem.

Het fragment vertraagt je site niet: het is een kleine loader en de widget zelf wordt op de achtergrond gedownload zonder de pagina te blokkeren. Als je toch wilt dat de widget wacht tot je pagina volledig is geladen, kun je in plaats daarvan dezelfde URL als volgt verpakken:

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

En als je de kleine uitnodigingsballon wilt vertragen in plaats van het laden van de widget, dan is dat de Proactieve pop-upballon-vertraging in het gedeelte Gedrag hierboven — er is geen code nodig.

Hier is een compleet voorbeeld van hoe uw HTML-bestand eruit moet zien met de chat-widget geïmplementeerd:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>
</body>
</html>

Inline insluiten op een pagina (Geavanceerd) #

Als je liever wilt dat de chat als onderdeel van je pagina verschijnt — bijvoorbeeld in een speciale “Contact”-sectie, een help-tabblad of een zijbalk — in plaats van als een zwevende bubbel in de hoek, zet dan Insluit-snippet op Inline in het Beheerpaneel en kopieer de inline-snippet.

Het ziet er als volgt uit:

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

De <div> is het aankoppelingspunt — het chatpaneel wordt hierin weergegeven en vult de afmetingen ervan. Style de div zoals je wilt (geef het een vaste hoogte, plaats het in een flex-container, zet het in een grid-cel, enz.) en het chatpaneel zal volgen.

Je hebt slechts één <script>-tag op de pagina nodig, zelfs als je meerdere chatwidgets insluit. Het script scant de pagina op elke <div data-chat-widget="…"> en koppelt in elk daarvan een chatpaneel.

Wanneer kies je voor inline versus zwevend:

• Zwevende bubbel is geschikt voor een altijd beschikbare “Hulp nodig?”-knop op de hele site.
• Inline insluiting is geschikt wanneer de chat op een specifieke plek moet staan — een ondersteuningspagina, een zijbalk in de kennisbank, een help-tabblad in de app — en aanvoelt als een natuurlijk onderdeel van die pagina.

De inline-insluiting hergebruikt dezelfde configuratie als de zwevende bubbel (logo, openingsbericht, leadgeneratie, startvragen, enzovoort), dus je hoeft niets dubbel in te stellen.

Toon de widget op de website van iemand anders #

Je kunt je chatwidget laten draaien op een website die je niet beheert — zonder code en zonder toegang tot hun site. Het is de snelste manier om een prospect te laten zien hoe de assistent eruit zou zien op hun eigen pagina’s.

1. Open het paneel Beheren en scrol naar Kanalen & Insluiten.
2. Typ bij Klant-demolink het websiteadres (bijvoorbeeld www.theircompany.com).
3. Klik op Kopiëren om de link te kopiëren, of op Openen om deze eerst zelf te bekijken.
4. Stuur de link naar degene aan wie je het wilt laten zien.

Het openen van de link laadt die website met je chatwidget eroverheen, precies zoals het eruit zou zien als het geïnstalleerd was. Iedereen met de link kan deze openen — er hoeft nergens ingelogd te worden.

Een paar dingen die handig zijn om te weten:

• Chats vanuit de demo zijn echt. Berichten die een bezoeker in een demo verstuurt, komen in je inbox terecht en worden beantwoord door je agent, en ze verbruiken credits zoals elk ander gesprek.
• De pagina is merkloos. Het toont hun website en jouw widget, en niets anders.
• Sommige websites kunnen niet in een frame worden geplaatst. Een aantal sites (banken, grote retailers, alles achter strikte beveiligingsinstellingen) blokkeert het weergeven van hun pagina’s door andere pagina’s. Wanneer dat gebeurt, werkt de link nog steeds: het toont een neutraal nep-browservenster in plaats van de echte site, met je widget live eroverheen zodat de demo nog steeds zijn werk doet.
• Het verandert hun website niet. Er wordt niets geïnstalleerd en niets aangepast — de demo bestaat alleen binnen die link.

De demolink gebruikt altijd je accountstandaard-routering, ongeacht wat er is ingesteld bij Routeer deze chats naar. Als je wilt dat demochats door een specifieke agent worden afgehandeld, stel die agent dan eerst in als je standaard voor de chatwidget.

Stuur verschillende pagina’s naar verschillende campagnes #

Standaard wordt elke chat die via je widget binnenkomt, afgehandeld door dezelfde campagne of agent. Je kunt dit per pagina overschrijven, zodat bezoekers op je prijspagina met je verkoopcampagne praten, terwijl bezoekers op je helppagina met je supportagent praten — allemaal vanuit dezelfde chatwidget.

Er zijn twee manieren om de code te verkrijgen:

• Vanuit de campagne of agent. Open op de Campagnes-pagina het ⋮-menu bij een campagne en kies Toevoegen aan website. Klik op de Agenten-pagina op de </>-knop in de rij, of open de agent en ga naar het tabblad Toegangspunten. In beide gevallen krijg je een kant-en-klaar fragment dat al naar die campagne of agent verwijst.

  Het tabblad Toegangspunten van een agent bevat ook een paneel Website-chatwidget dat laat zien hoeveel website-chats die agent al afhandelt. Chats vanuit een embed bereiken de agent rechtstreeks, dus je hoeft geen toegangspuntregel voor ze aan te maken — een agent zonder enige regels beantwoordt nog steeds zijn embed.

  Toevoegen aan website verschijnt alleen bij campagnes die live zijn en zijn ingesteld om inkomende chats te verwerken. Een conceptcampagne kan nog geen bezoekers ontvangen, dus de optie is verborgen totdat je deze publiceert. Op de pagina Agents verschijnt dit bij actieve agents. Een gepauzeerde agent zou de chat wel ontvangen maar nooit antwoorden, dus de optie is verborgen totdat je deze weer inschakelt. Er is geen kanaal in te stellen voor een agent — een agent kan een chat van elk kanaal oppakken.

• Via de widgetinstellingen. Stel in Instellingen → Kanalen → Beheren bij je chatwidget Routeer deze chats naar in en kopieer het fragment daaronder. Het wijzigen van het dropdownmenu herschrijft het fragment.

De zwevende snippet bevat de bestemming in het adres:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?campaign=CAMPAIGN_ID"></script>

De inline snippet bevat deze in plaats daarvan op de <div>, zodat één pagina meerdere chats kan bevatten die naar verschillende plaatsen gaan:

<div data-chat-widget="CONFIG_ID" data-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Voor een agent verandert de bewoording in ?agent=AGENT_ID of data-agent="AGENT_ID".

Een paar dingen die handig zijn om te weten:

• Gebruik de kopieerknop in plaats van het ID handmatig in te typen. Als het ID niet overeenkomt met een campagne of agent in je account, werkt de chat nog steeds, maar valt deze terug op je standaardroutering.
• Iemand die al in gesprek is, blijft bij degene met wie het gesprek is begonnen, zelfs als diegene later op een pagina terechtkomt die naar een andere plek verwijst. Dit voorkomt dat een gesprek halverwege van persoonlijkheid verandert.
• Een paginaspecifieke bestemming krijgt voorrang op je accountstandaard en op trefwoord-triggers.

Vertel de widget wie de bezoeker is (Geavanceerd) #

Als je de chatwidget in een ledengedeelte, een klantportaal of een app plaatst waar mensen al zijn ingelogd, weet je site al wie ze zijn. Je kunt die informatie doorgeven aan de widget, zodat de bezoeker niet om gegevens wordt gevraagd die ze al eerder hebben verstrekt, en zodat je AI kan gebruiken wat je al over hen weet.

Voeg een klein instellingenblok toe vóór het widgetscript:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>

Je pagina moet die waarden aan de serverzijde invullen, op basis van wie er is ingelogd.

Er gebeuren twee dingen:

• Het “Voordat we beginnen…”-formulier wordt overgeslagen. Met een opgegeven naam en e-mailadres gaat de bezoeker direct het gesprek in, en die gegevens worden exact zo opgeslagen bij hun contactpersoon alsof ze deze zelf hadden ingetypt.
• Alles onder data wordt doorgegeven aan je AI. Alles wat je daar plaatst — abonnement, bestelnummer, verlengingsdatum, kredietsaldo, hoeveel licenties ze hebben — wordt onderdeel van wat de AI over die persoon weet. Hierdoor kan de AI vragen beantwoorden als “wanneer wordt mijn abonnement verlengd?” zonder eerst te hoeven vragen wie ze zijn. Gebruik de veldnamen die voor jou logisch zijn; ze verschijnen bij de contactpersoon onder Aangepaste velden. Tot 20 waarden, die bij elk bericht opnieuw worden verzonden, dus als het abonnement halverwege het gesprek verandert, ziet de AI de nieuwe gegevens.

Voor inline embeds kun je dezelfde informatie in plaats daarvan op de <div> plaatsen, wat handig is wanneer één pagina meerdere chats bevat:

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Als je site pas weet wie de bezoeker is nadat de pagina is geladen — bijvoorbeeld bij een single-page app waar het inloggen gebeurt zonder dat de pagina opnieuw wordt geladen — roep dit dan aan zodra je de details hebt, waarna de widget zichzelf bijwerkt:

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

Een paar dingen die handig zijn om te weten:

• Als twee verschillende mensen op dezelfde computer inloggen, start de tweede persoon een nieuw gesprek in plaats van de chat van de eerste persoon te zien. De widget merkt de verandering van persoon op en reset zichzelf.
• Dit is bedoeld voor context, niet voor het inloggen van iemand. Gesprekken blijven nog steeds gescheiden zoals altijd; het doorgeven van een id zorgt er dus niet voor dat iemand de chat van iemand anders kan openen, en iemand die een ander apparaat of browser gebruikt, start daar een nieuw gesprek.
• Het is optioneel. Een widget op een normale openbare pagina heeft dit niet nodig en gedraagt zich precies zoals voorheen.

Wijzig de widgetinstellingen vanuit je eigen code (API) #

Alles op het Beheren-paneel van de widget kan ook worden gewijzigd via de REST API, wat handig is als je veel websites beheert of de bijlageknop automatisch wilt uitschakelen voor een klant. Stuur een PATCH naar https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID met je API-sleutel en alleen de velden die je wilt wijzigen — bijvoorbeeld {"show_upload_button": false} verbergt de bijlageknop, {"show_emoji_button": false} verbergt de emoji-kiezer en {"launcher_icon": "chat-dots"} vervangt het launcher-icoon. CONFIG_ID is dezelfde identificatie als in je embed-script. De volledige lijst met geaccepteerde velden (naam, openingsbericht, kleuren, launcher-icoon, toegestane domeinen, formulier voor bezoekersinformatie, privacyverklaring, thema, hoek- en letterstijl) staat in de API-referentie onder Chatwidget. Websites verwerken de wijziging de volgende keer dat de pagina wordt geladen.

Wat kun je verwachten na de installatie #

Zodra je het script aan je website hebt toegevoegd, maakt de chatwidget automatisch een chatknop in de hoek van je website (standaard rechtsonder). De widget blijft op een vaste positie staan terwijl gebruikers door je pagina’s scrollen, zodat deze altijd toegankelijk is.

Wanneer bezoekers op deze knop klikken, vouwt deze uit tot een volledig chatvenster waar ze een gesprek kunnen starten, waarbij je openingsbericht wordt getoond. Als Bezoekersinformatie verzamelen is ingeschakeld, verschijnt er eerst een klein formulier waarin om hun naam en e-mailadres (en optioneel telefoonnummer) wordt gevraagd voordat ze kunnen typen.

De chatinterface past zich automatisch aan verschillende schermformaten aan, waardoor deze naadloos werkt op zowel desktop- als mobiele apparaten.

Je implementatie testen #

Nadat je de widget aan je site hebt toegevoegd, test je of deze werkt:

1. Open je website in een browser.
2. Klik op de chatknop om de widget te openen.
3. Stuur een testbericht en bevestig dat je een antwoord krijgt.
4. Herhaal dit op een ander apparaat of in een andere browser om te bevestigen dat het overal werkt.

Als de chatwidget niet op je site verschijnt, controleer dan het volgende:

1. Zorg ervoor dat je CONFIG_ID hebt vervangen door je werkelijke configuratie-identificatie.
2. Zorg ervoor dat de script-tag vóór de afsluitende </body>-tag is geplaatst.
3. Controleer de code op typefouten.

Achter een bedrijfsfirewall #

Als de widget wel laadt voor het publiek, maar niet voor medewerkers op het kantoornetwerk, dan blokkeert het netwerk vrijwel zeker het domein waarvan deze wordt geladen. Vraag je IT-team om het volgende toe te staan via normale HTTPS op poort 443:

• Het domein in je insluitfragment — het adres in de <script src="..."> regel die je hebt gekopieerd uit het Beheerpaneel.
• api.youraiconnector.com — de widget verstuurt zijn berichten ook hierheen.

Er hoeft niets anders te worden geopend: geen extra poorten en geen inkomende regels. Als de widget daarna nog steeds niet verschijnt, open dan de ontwikkelaarsconsole van je browser op de pagina en stuur ons wat daar wordt gerapporteerd — een geblokkeerd verzoek noemt het domein dat werd geweigerd, wat meestal het volledige antwoord is.