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 in één klik aan. Zes thema’s bepalen samen 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 berichtvak 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 afzonderlijk wijzigen. Nieuwe widgets beginnen op Glass; het wisselen is overal waar de widget is ingesloten direct zichtbaar, 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, die elk het onderdeel van de widget aangeven dat ze kleuren. 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 typindicator, 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 rechteronderhoek of linkeronderhoek, met horizontale en verticale offset (in pixels) als deze iets anders op je pagina overlapt.
• Startvragen: Snelantwoord-suggesties (klikbare knoppen) 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.
• Voettekst: Een optionele kleine regel met je eigen tekst onder het berichtvak, bijvoorbeeld “Powered by Your Agency”. Deze staat standaard uit en er wordt niets getoond onder het berichtvak zolang deze uit staat. Zet hem aan, typ je tekst (maximaal 40 tekens) en voeg eventueel een link toe die begint met https://; bezoekers die op de tekst klikken, openen die pagina in een nieuw tabblad. Bureaus gebruiken dit om hun eigen naam te plaatsen op de widgets die ze voor klanten bouwen.

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 gesteld van antwoorden, zelfs als ze naar een ander tabblad 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 voor de accepteer/weiger-knop en het aantal seconden te bepalen voordat het verschijnt. De bubbel sluit zichzelf na 20 seconden als de bezoeker er niet op klikt. Dit is de enige tekst die de widget naast de chatknop toont: er is geen instelling voor een permanent label naast de knop.
• AI-reactiesnelheid: 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. Het eerste deel van een antwoord komt aan met de vertraging die de schuifregelaar instelt, waarbij de typindicator kort daarvoor verschijnt.
• Toon een ‘bezig’-melding terwijl de AI werkt: Standaard uitgeschakeld. Wanneer een antwoord meer dan een paar seconden duurt, bijvoorbeeld omdat je agent iets opzoekt in een ander systeem, zien bezoekers een korte regel naast de typ-stippen: “Bezig met je antwoord” na 5 seconden, “Ik zoek het voor je op” na 15 seconden, en daarna “Nog even geduld, ik ben er bijna” met een verontschuldiging voor het wachten als het langer duurt. Snelle antwoorden tonen alleen de stippen. De regel volgt de taal van de widget en verschijnt alleen terwijl je AI daadwerkelijk aan een antwoord werkt, nooit wanneer de AI voor die chat is uitgeschakeld of een persoon het heeft overgenomen.

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, worden de eigen labels van de widget getoond in de taal waarin je je openingsbericht hebt geschreven, en verschijnen je openingsbericht, pop-upballon en startvragen precies zoals je ze hebt geschreven.
• Een paginataal die in tegenspraak is met je begroeting wordt niet vertrouwd. Sommige websitebouwers plaatsen lang="en" op elke pagina, ongeacht de taal van de site. Wanneer de pagina één taal aangeeft en je je openingsbericht in een andere taal hebt geschreven, behandelt de widget de paginawaarde als een standaardinstelling van de bouwer: in plaats daarvan volgt het de taal van de browser van de bezoeker, en als dat geen taal is die we ondersteunen, gebruikt het de taal waarin je hebt geschreven. Een pagina die zijn lang-waarde wijzigt wanneer de bezoeker een taal op je site kiest, wordt altijd gevolgd. Als je liever niet afhankelijk wilt zijn van dit alles, zet de taal dan vast in het gedeelte Gedrag.
• 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 voornaam-, e-mail- en telefoonvelden van het bezoekersformulier en hun voorbeeldtekst, de privacyverklaring, de knoppen) blijven in die taal, ongeacht wat de pagina of browser aangeeft. 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, Filipijns, Sloveens, Thais, Bengaals, Japans, Noors (Bokmål) en Turks. Dit is de lijst voor de eigen knoppen en labels van de widget.
• Van-rechts-naar-links-talen worden van rechts naar links uitgelijnd. Voor Arabische, Hebreeuwse, Perzische en Urdu-sprekende bezoekers spiegelt het hele chatvenster: de koptekst, de berichtballonnen, de typ-stippen, het bezoekersformulier en het berichtvak beginnen allemaal aan de rechterkant. De ballonknop blijft in de hoek die je hebt gekozen. Hebreeuwse, Perzische en Urdu-sprekende bezoekers zien de labels in het Engels (of de taal die je hebt vastgezet), maar de lay-out volgt nog steeds hun taal. Een bericht dat in een andere richting is geschreven, zoals een Engels antwoord in een Arabische chat, wordt nog steeds in de juiste volgorde gelezen.
• Je berichten worden voor je vertaald. Elke keer dat je opslaat, worden je openingsbericht, proactieve pop-upballon en startvragen vertaald naar alle achttien bovenstaande talen. Je schrijft ze slechts één keer, in welke taal je ook verkiest: de taal waarin je hebt geschreven wordt herkend aan de tekst zelf, die versie wordt woord voor woord behouden en elke andere taal is daar een vertaling van. Het maakt niet uit op welke taal je account is ingesteld.
• Schrijf je eigen versie voor een taal. In het gedeelte Vertalingen van het Beheer-paneel, direct onder Gedrag, kun je de automatische vertaling vervangen door je eigen bewoordingen, bijvoorbeeld formeel Spaans (“usted”) waar de automatische vertaling informeel is. Kies een taal onder Taal en vul vervolgens een van de volgende velden in: Openingsbericht, Pop-upbericht, de Accepteer-tekst en Weiger-tekst van de pop-up (getoond terwijl de pop-upballon zichtbaar is) en Startvragen. Elk veld toont de automatische vertaling in het grijs; Begin met de automatische vertaling kopieert deze zodat je vanaf daar kunt bewerken. Alles wat je leeg laat, behoudt de automatische vertaling. Talen die je zelf hebt geschreven staan bovenaan, gemarkeerd als Jouw eigen bewoordingen, en Verwijder mijn (taal) bewoordingen keert terug naar de automatische vertaling voor die taal. Je eigen bewoordingen blijven behouden wanneer je later de originele tekst bewerkt; alleen de automatische vertalingen worden opnieuw gedaan.
• De pop-upknoppen worden ook vertaald. De Accepteer- en Weiger-knoppen van de proactieve pop-upballon worden samen met je andere berichten vertaald, zodat een Spaanse bezoeker geen Engelse knoppen meer ziet.
• Schrijf elk bericht in slechts één taal. Als je twee talen in hetzelfde veld plaatst — 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 welke taal je ook verkiest.
• 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 getoond. Als je liever hebt dat deze altijd in één vaste taal antwoordt, geef dit dan aan in de instructies van je agent.
• Stel de taal per pagina in in de insluitcode. Gebruikt u één widget op een Engelse site en een vertaalde kopie ervan? Voeg data-lang toe aan het script-tag van de widget op elke pagina. data-lang="es" toont de widget in het Spaans op die pagina, ongeacht wat de browser zegt; data-lang="page" zorgt ervoor dat deze de eigen <html lang="...">-waarde van de pagina volgt (dus lang="es-MX" geeft Spaans), zelfs wanneer uw openingsbericht in een andere taal is geschreven. Dit heeft voorrang op het veld Widgettaal, dat op zijn beurt voorrang heeft op automatische detectie. Bijvoorbeeld:

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

Houd de insluitcode uit het Beheerpaneel zoals deze is en voeg alleen het data-lang-attribuut toe. Voor een inline chatpaneel plaatst u data-lang op de <div data-chat-widget="…"> in plaats daarvan.

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 #

• Bezoekersgegevens verzamelen: Standaard uitgeschakeld. Indien ingeschakeld, wordt bezoekers gevraagd om hun naam en e-mailadres (en optioneel telefoonnummer) voordat het gesprek begint, zodat je de lead vastlegt, zelfs als ze de chat voortijdig verlaten.
• Formuliertitel en Formulier-subtitel: Pas de kop en de korte uitleg boven het formulier aan.
• Telefoonnummer verzamelen: Schakel dit in om ook om een telefoonnummer te vragen; uitgeschakeld worden alleen naam en e-mailadres verzameld.
• Achternaam verzamelen: Standaard uitgeschakeld. Schakel dit in om een verplicht Achternaam-veld toe te voegen direct na de voornaam. Dit wordt opgeslagen bij de contactpersoon als hun achternaam, zodat je AI en alles wat deze opzoekt in je eigen systemen vanaf het eerste bericht de volledige naam heeft. Bezoekers die het formulier al hebben ingevuld voordat je dit inschakelde, krijgen deze vraag niet opnieuw.
• E-mails met ongelezen antwoorden naar bezoekers: een bezoeker die een e-mailadres heeft achtergelaten en je antwoord na 15 minuten nog niet heeft gezien, krijgt een e-mail die hen terugverwijst naar de chat. Schakel dit uit onder Instellingen → Notificaties → Chatwidget-bezoekers. Zie E-mails naar chatwidget-bezoekers.

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.

Een bezoeker heeft hun e-mailadres achtergelaten maar nooit geboekt — kan ik ze per e-mail benaderen? Ja, met een automatisering. Een Contact aanmaken-stap met Kanaal ingesteld op E-mail verandert het adres dat de bezoeker heeft achtergelaten in een e-mailcontact op je gekoppelde E-mailkanaal, en een Bericht verzenden-stap daarna wordt verstuurd als e-mail; antwoorden komen terug in Chats voor je e-mailagent. Het volledige recept, inclusief hoe je de reeks stopt zodra ze aangeven dat ze hebben geboekt, vind je in Automatiseringen → Voorbeeld: e-mailopvolging voor website-chatleads.

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 berichtvenster.
• 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 (WhatsApp Business of WhatsApp Web), Instagram of Messenger hebt gekoppeld. Als je de WhatsApp-link inschakelt, wordt je gekoppelde nummer ingevuld; de link blijft bewerkbaar, dus nadat je van nummer bent gewisseld, kun je daar het nieuwe nummer typen.
• 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 waarop je deze hebt geïnstalleerd (bijv. example.com of *.example.com); laat leeg om elk domein toe te staan.
• Geblokkeerde landen: Houd de widget uit de buurt van bezoekers in landen die je niet bedient. Bezoekers wiens netwerklocatie zich in een land bevindt dat je kiest, zien de widget nooit en elke chat die ze proberen te starten wordt geweigerd. Laat leeg om iedereen toe te staan. Zie Bots en onnodig verbruik buitenhouden hieronder.
• Routeer deze chats naar: Kies de agent die chats moet afhandelen die afkomstig zijn van de code die je gaat kopiëren. Laat dit op Accountstandaard staan om je normale chatwidget-routering te gebruiken. Zie Stuur verschillende pagina’s naar verschillende agents hieronder.
• Insluitcode: Kies Zwevende bubbel of Inline en kopieer de installatiecode (zie hieronder).
• Klant-demolink: Plak een willekeurig websiteadres en klik op Link maken om een deelbare link te krijgen die die site opent met je widget eroverheen, zonder dat er aan hun kant iets geïnstalleerd hoeft te worden. Elke link die je maakt wordt vermeld en je kunt ze elk uitschakelen. Zie Toon de widget op de website van iemand anders hieronder.
• Deellink: Een kant-en-klare link die je assistent op een eigen pagina opent, volledig scherm, zonder dat er een website nodig is. Kopieer deze en verstuur hem overal naartoe. Zie Deel een directe link naar de chat 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 beperkt tot wat de thema-, hoek-, lettertype- en kleurkiezers bieden — je kunt geen eigen CSS in de widget injecteren en regels op je pagina hebben geen invloed op de inhoud ervan.
• Geen aangepaste tijdelijke aanduidingstekst in het berichtvenster.
• Geen video-insluiting in de chat.

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.

Bots en kredietverbruik buiten de deur houden #

Elk AI-antwoord kost credits, dus een script (of één verveeld persoon) dat de ene na de andere chat op je website opent, is het enige waar een openbare widget zich tegen moet verdedigen. De widget regelt het meeste zelf, en met twee instellingen in het Beheer-paneel kun je dit voor je site aanscherpen.

• Domein-whitelist. Alleen de websites die u vermeldt, kunnen de widget tonen. Iedereen die uw insluitcode naar een andere site kopieert, krijgt niets te zien.
• Geblokkeerde landen. Bezoekers wiens netwerklocatie zich in een land bevindt dat u blokkeert, zien de widget nooit, en een chat die ze toch proberen te starten, wordt geweigerd. De locatie is gebaseerd op de verbinding van de bezoeker: iemand op een VPN verschijnt als het land van de VPN, en een bezoeker wiens locatie niet kan worden bepaald, wordt doorgelaten in plaats van geblokkeerd. Uw eigen voorbeeldweergave in de app blijft werken, zelfs als u het land blokkeert waarin u zich bevindt.
• Nieuwe gesprekken per verbinding. Eén verbinding (in de praktijk één huishouden of kantooradres) kan 20 nieuwe gesprekken per dag openen op een widget. Terugkerende bezoekers die hun bestaande chat voortzetten, tellen niet mee; alleen gloednieuwe gesprekken tellen mee. Een script dat continu nieuwe chats start om AI-antwoorden te verzamelen, loopt dus na 20 keer vast, terwijl echte bezoekers er niets van merken. Als veel mensen één verbinding op uw site delen (een campus, een callcenter), verhoog het aantal dan via de REST API met max_new_chats_per_ip_daily; 0 schakelt de controle uit.
• Menselijke controle (optioneel). Bezoekers doorlopen een snelle Cloudflare Turnstile-controle voordat hun eerste bericht wordt verzonden, zodat een script helemaal geen chats kan starten. De meeste mensen hoeven nergens op te klikken; Cloudflare toont alleen een selectievakje wanneer het twijfelt. Het gebruikt uw eigen gratis Turnstile-sleutels, zie Een menselijke controle toevoegen hieronder.
• Ingebouwde limieten. Bovendien is elke browsersessie beperkt in het aantal berichten dat per minuut en per dag kan worden verzonden, en de agent die de chat beantwoordt, stopt met reageren op een bezoeker zodra deze het Max. AI-berichten per chat bereikt dat is ingesteld onder de Reactielimieten.

Niets hiervan identificeert apparaten of personen: de widget slaat niets op in de browser van een bezoeker totdat ze ervoor kiezen om te chatten (zie hierboven), en er is geen sprake van fingerprinting.

Een menselijke controle toevoegen (Cloudflare Turnstile) #

Schakel dit in wanneer bots chats op uw website blijven openen en de bovenstaande instellingen niet voldoende zijn. De controle wordt één keer uitgevoerd, vlak voordat het eerste bericht van een bezoeker wordt verzonden. Een bezoeker die slaagt, kan 24 uur lang blijven chatten zonder de controle opnieuw te zien, en iedereen die terugkeert naar een eerder gesprek kan dit nog steeds lezen voordat de controle plaatsvindt.

1. Meld u aan bij uw Cloudflare-account (een gratis account is voldoende) en open Turnstile.
2. Klik op Add widget, geef deze een naam en voeg elk domein toe waarop uw chatwidget draait (bijvoorbeeld yourshop.com). Laat de widgetmodus op Managed staan.
3. Kopieer de Site key en de Secret key die Cloudflare u toont.
4. Open in de app het Beheren-paneel van uw chatwidget, schakel Menselijke controle voor het chatten in, plak beide sleutels en sla op.

Wat u kunt verwachten:

• De controle blijft uitgeschakeld totdat beide sleutels zijn ingevuld, dus het inschakelen zonder sleutels sluit bezoekers nooit buiten.
• Als een bezoeker de controle niet doorstaat of deze onopgelost laat, wordt het bericht niet verzonden en krijgt de bezoeker een Opnieuw proberen-knop.
• De controle verschijnt alleen op de domeinen die u in Cloudflare hebt toegevoegd. Op elk ander domein weigert Cloudflare de controle en kan niemand op die site een bericht verzenden, dus voeg elk domein toe voordat u de functie inschakelt.
• Als uw website een Content Security Policy gebruikt, sta dan https://challenges.cloudflare.com toe voor scripts en frames, anders kan de controle niet worden geladen.
• De sleutels zijn van uw eigen Cloudflare-account en de geheime sleutel wordt nooit naar de browsers van uw bezoekers verzonden.

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" defer></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.

Installeren op Shopify #

1. Ga in je Shopify-beheeromgeving naar Online Store > Themes.
2. Klik bij het thema dat is gemarkeerd als je huidige (gepubliceerde) thema op de …-knop en kies Edit code. Het bewerken van een concept of een kopie van het thema verandert niets aan je live winkel.
3. Open layout/theme.liquid en scrol naar de afsluitende </body>-tag onderaan.
4. Plak je installatieregel vlak boven </body> en klik op Save:

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

Als je de widget hebt geïnstalleerd voordat de installatieregel defer bevatte, toont de code-editor van Shopify een rode onderstreping eronder. Die onderstreping is een waarschuwing van de codecontrole van Shopify over scriptregels zonder defer of async, geen foutmelding: het thema wordt nog steeds opgeslagen en de widget werkt nog steeds. Het toevoegen van defer zoals hierboven getoond, laat de onderstreping verdwijnen en verandert niets aan de werking van de widget, dus het is niet nodig om deze opnieuw te installeren op andere sites.

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" defer></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 Client-demolink het websiteadres (bijvoorbeeld www.theircompany.com).
3. Optioneel: kies onder het veld de Agent die in deze demo moet antwoorden, bijvoorbeeld een agent die je hebt gebouwd op basis van de eigen website van de prospect, zodat deze praat over hun diensten, prijzen en veelgestelde vragen. Laat dit op Accountstandaard staan om je normale chatwidget-routering te gebruiken.
4. Klik op Link maken. De link wordt voor je gekopieerd en verschijnt in de lijst onder het veld, met Kopiëren- en Openen-knoppen en de agent die wordt gebruikt.
5. Stuur de link naar iedereen aan wie je deze 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 uit de demo zijn echt. Berichten die een bezoeker in een demo verstuurt, komen in uw inbox terecht en worden beantwoord door uw agent, en ze verbruiken credits zoals elk ander gesprek.
• De pagina is merkloos. Het toont hun website en uw widget, en niets anders.
• Sommige websites kunnen niet in een frame worden geplaatst. Een aantal sites (banken, grote retailers, alles achter strikte beveiligingsinstellingen) blokkeert andere pagina’s om ze weer te geven. Wanneer dat gebeurt, werkt de link nog steeds: het toont een neutraal nep-browservenster in plaats van de echte site, met uw widget live erbovenop zodat de demo nog steeds zijn werk doet.
• Het verandert hun website niet. Er wordt niets geïnstalleerd en niets gewijzigd — de demo bestaat alleen binnen die link.
• Schakel een link uit wanneer de demo voorbij is. Klik op Uitschakelen naast de link in de lijst en bevestig. Vanaf dat moment ziet iedereen die de link opent een pagina met de melding dat de link is uitgeschakeld. Uw widget en uw andere demolinks blijven werken. Een link die is uitgeschakeld kan niet opnieuw worden ingeschakeld; maak in plaats daarvan een nieuwe aan.
• Links gekopieerd vóór 25 september 2026. Demolinks die zijn gemaakt voordat de lijst bestond, staan er niet in. Ze blijven werken totdat u onder de lijst op Schakel die uit klikt, wat ze allemaal tegelijk uitschakelt (en Schakel ze weer in draait dit terug).

Een demolink die is aangemaakt zonder agent gebruikt de standaardroutering van uw account, ongeacht hoe Routeer deze chats naar is ingesteld. Wanneer een agent is gekozen, wordt elke chat vanaf die link toegewezen aan die agent en door deze beantwoord. De widget behoudt zijn eigen uiterlijk, naam en openingsbericht. De link bevat dit als &agent=AGENT_ID; dit handmatig toevoegen aan een oudere link werkt ook (gebruik &, niet ?, omdat de link al een ? bevat).

Als je later de agent verwijdert die een demolink gebruikt, blijft de link werken: de chats gaan dan naar de standaardroutering van je account en in de lijst staat “verwijderde agent, gebruikt de standaard” ernaast. Het verwijderen van de agent die je standaard chatwidget is, heeft geen invloed op links die aan een andere agent zijn gekoppeld.

Deel een directe link naar de chat #

Soms is er geen website om de widget op te plaatsen — je wilt iemand een link geven zodat diegene direct met je assistent kan praten. Elke chatwidget heeft er een:

1. Open het Beheerpaneel en scrol naar Kanalen & Insluiten.
2. Zoek Deellink (deze staat net onder de Klant-demolink).
3. Klik op Kopiëren om de link te pakken, of op Openen om het zelf te proberen.

Als je deze opent, zie je niets anders dan je assistent, die het hele scherm vult — geen website erachter, geen bubbel om eerst op te klikken, niets om te installeren. Plaats het in je Instagram-bio, een QR-code op een flyer, een e-mailhandtekening of een WhatsApp-bericht naar een prospect.

De deellink volgt de standaardroutering van uw chatwidget. Om in plaats daarvan een specifieke agent te openen, voegt u ?agent=AGENT_ID toe aan het einde van de link; elke chat vanaf die link wordt vervolgens toegewezen aan die agent en door deze beantwoord, terwijl de pagina de naam en het openingsbericht van uw widget behoudt.

Een paar dingen die handig zijn om te weten:

• Chats via de link zijn echt. Ze komen in je inbox terecht, je agent beantwoordt ze en ze verbruiken credits zoals elk ander gesprek.
• De pagina bevat geen branding van ons. Het toont alleen je assistent en niets anders, en het wordt buiten zoekresultaten gehouden.
• Het werkt op je eigen adres. Als je provider de app op hun eigen domein draait, gebruikt de link dat adres ook, zodat er niets onbekends in verschijnt.
• Eén bezoeker per link, per browser. Wie de link opent, behoudt dezelfde identiteit in die browser, dus later terugkomen zet hetzelfde gesprek voort in plaats van een nieuw gesprek met een vreemde te starten. Een andere browser, of de link van een andere widget, is een andere bezoeker.

Stuur verschillende pagina’s naar verschillende agents #

Standaard wordt elke chat die via je widget binnenkomt door dezelfde agent afgehandeld. Je kunt dit per pagina overschrijven, zodat bezoekers op je prijspagina met je verkoopagent 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 agent. Klik op de pagina AI-agents op de </>-knop in de rij, of open de agent en ga naar het tabblad Toegangspunten. In beide gevallen krijg je een kant-en-klare snippet die al naar die 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.

  De </>-knop verschijnt alleen 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 oppikken.

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

De zwevende snippet bevat de bestemming in het adres:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?agent=AGENT_ID" defer></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-agent="AGENT_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Snippets die zijn gekopieerd voordat campagnes werden stopgezet, bevatten in plaats daarvan ?campaign= of data-campaign=. Deze blijven werken, dus je hoeft niets opnieuw te plakken.

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 agent in je account, werkt de chat nog steeds, maar valt deze terug op je standaardroutering.
• Iemand die al in een gesprek zit, blijft bij degene met wie ze begonnen zijn, zelfs als ze later op een pagina terechtkomen die naar ergens anders 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" defer></script>

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

Om ook een achternaam op te slaan, voeg je last_name toe naast name in het visitor-blok (data-visitor-last-name bij een inline embed). Dit is optioneel: een naam en een e-mailadres zijn nog steeds voldoende om het formulier over te slaan, ongeacht of Achternaam verzamelen is ingeschakeld.

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 inloggen op dezelfde computer, start de tweede persoon een nieuw gesprek in plaats van de chat van de eerste te zien. De widget merkt de verandering van persoon op en stelt zichzelf opnieuw in.
• Op zichzelf is dit bedoeld voor context, niet om iemand in te loggen. Gesprekken worden nog steeds gescheiden gehouden zoals altijd, dus het doorgeven van een id zorgt er 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. Om het gesprek over apparaten heen voort te zetten, moet je de id ondertekenen zoals hierna beschreven.
• Het is optioneel. Een widget op een normale openbare pagina heeft dit niet nodig en gedraagt zich precies zoals voorheen.

Hetzelfde gesprek hervatten op elk apparaat (ingelogde bezoekers-ID) #

Als je klanten accounts hebben, kun je ervoor zorgen dat hun chat hen volgt: inloggen op een telefoon, doorgaan op een laptop, en het is hetzelfde gesprek met dezelfde contactpersoon in je inbox, en de AI weet nog steeds alles wat er is gezegd. Hiervoor heeft Your AI Connector bewijs nodig dat de bezoeker echt is wie je pagina zegt dat ze zijn, anders zou iedereen een klantnummer in zijn browser kunnen typen en de chat van die klant kunnen lezen. Het bewijs is een handtekening die je op je server berekent.

1. Zoek in het Beheren-paneel van de widget onder Kanalen & Insluiten naar Ingelogde bezoekers en klik op Geheim genereren. Kopieer het identiteitsgeheim. Bewaar dit alleen op uw server; plaats het nooit op de pagina zelf.

2. Wanneer uw server een pagina rendert voor een ingelogde klant, bereken dan een HMAC-SHA256 van het ID van die klant met behulp van het geheim, als een hexadecimale string in kleine letters:

// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");

// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);

# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()

3. Plaats het ID en de hash in het instellingenblok, naast de naam en e-mail die je al doorgeeft:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      hash: "3f2a…e91c",
      name: "Maria",
      email: "maria@example.com"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

De inline embed gebruikt dezelfde waarde als data-visitor-hash op de <div>, en window.chatWidget.setVisitor({ visitor: { id, hash } }) werkt voor apps die mensen inloggen zonder de pagina te verversen.

Wat er gebeurt zodra de handtekening is gecontroleerd:

• De chat van de klant wordt opgeslagen onder hun account in plaats van onder de browser, dus het is hetzelfde gesprek op elk apparaat en elke browser waar ze zijn ingelogd, en één contactpersoon in je inbox.
• Hun eerdere berichten worden geladen op het nieuwe apparaat en de AI gaat verder waar ze gebleven waren.
• Als de handtekening onjuist is, gedraagt de widget zich stilletjes zoals voorheen, als een normale chat per browser, en print de reden in de browserconsole zodat een ontwikkelaar deze kan opmerken. Je bezoekers zien nooit een foutmelding.
• Het ID wordt exact vergeleken zoals je het hebt verzonden, dus onderteken dezelfde waarde die je doorgeeft als id, en gebruik overal hetzelfde ID voor dezelfde persoon.

Twee dingen om te weten:

• Opnieuw genereren in het Beheer-paneel geeft je een nieuw geheim. Pagina’s die nog steeds ondertekenen met het oude geheim vallen terug op normale chats per browser totdat je server het nieuwe geheim gebruikt. Bestaande gesprekken blijven behouden; ze zijn gekoppeld aan het ID van de klant, niet aan het geheim.
• Een gesprek dat iemand voerde voordat hij inlogde, als anonieme bezoeker, blijft een aparte chat. Het op account gebaseerde gesprek begint met het eerste bericht dat ze sturen terwijl ze zijn ingelogd.

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-ID.
2. Zorg ervoor dat de script-tag vóór de afsluitende </body>-tag is geplaatst.
3. Controleer de code op typefouten.
4. Zorg er op Shopify voor dat je het gepubliceerde thema hebt bewerkt en op Save hebt geklikt. Een bewerking in een concept of gedupliceerd thema bereikt nooit je live winkel.

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.