Met de JavaScript-API stuur je je LeadWin-agent aan vanaf je eigen website. Eigen knoppen openen de chat direct bij het contactformulier of bij afspraken boeken, en je dark mode en je taalkeuze schakelen de agent mee om. De pagina in het dashboard is een handleiding met codevoorbeelden om te kopiëren, ze verandert geen enkele instelling.
In één oogopslag
- Je vindt de pagina in het LeadWin-dashboard onder Weergave → API.
- De API zit in elk abonnement, ook in Free. Welke schermen ze kan openen, hangt wel af van je abonnement, zie Abonnementen vergeleken.
- Voorwaarde is de code uit de installatie op je website. Die code krijg je pas als de verwerkersovereenkomst is afgesloten. Met een registratie op leadwin.ai is dat al zo, kom je van Feedbax, als aanbieder of opdrachtgever, dan ga je er onder Privacy mee akkoord.
- Knoppen met het attribuut data-leadwin-open werken zonder eigen JavaScript, in elk CMS.
- Elke aanroep geldt alleen voor de betreffende bezoeker en verandert nooit je instellingen in het dashboard.
- De pagina is zichtbaar voor eigenaren en admins. Wie welke rol heeft, stel je in onder Team.
Zo werkt het
De code uit de installatie laadt op je website de functie LeadWin. Je roept die aan met een opdracht en een waarde, bijvoorbeeld LeadWin('open', 'lead'). Hoofd- en kleine letters in de opdracht maken niet uit. Een onbekende opdracht negeert LeadWin, en de API veroorzaakt nooit een fout in je pagina.
Je LeadWin-agent laadt pas als je pagina helemaal geladen is. Roept je eigen JavaScript hem eerder aan, dan vangt de basis de aanroep op en geeft die door zodra de agent er is. Omgekeerd verandert je LeadWin-agent niets aan je pagina. Hij meldt alleen wanneer de chat opengaat of sluit. Wat je pagina daarmee doet, bepaal jij.
Deze opdrachten zijn er:
| Opdracht | Waarde | Effect |
|---|---|---|
| open | geen, lead, booking, helpcenter of profile | Opent de chat, desgewenst direct in een scherm |
| close | geen | Sluit de chat |
| toggle | geen | Opent een gesloten en sluit een open chat |
| ask | een vraag van 1 tot 1.000 tekens | Opent de chat en stelt de vraag namens de bezoeker |
| theme | dark, light of auto | Schakelt tussen licht en donker thema, alleen met het kleurenschema API |
| language | de, en, fr, nl of auto | Schakelt de taal van de interface om |
| article | sleutel van een helpartikel | Opent de chat direct bij dit artikel |
| consent | granted of denied | Geeft de beslissing van je cookiebanner door |
De basis plaatsen
De basis heb je alleen nodig als je LeadWin vanuit eigen JavaScript aanroept. Voor knoppen met data-leadwin-open heb je die niet nodig.
- Open Weergave → API en klik in de eerste kaart op Code kopiëren. De melding Code gekopieerd bevestigt het.
- Voeg de code één keer toe in de head van je pagina, boven de scripts die LeadWin aanroepen.
- Laat de code uit de installatie ongewijzigd. Waar de basis ten opzichte daarvan staat, maakt niet uit.
<script>
globalThis.LeadWin ??= (...args) =>
(globalThis.LeadWin.q ??= []).push(args);
</script>
De chat openen en sluiten
Met open klap je de chat uit. Geef je een scherm mee, dan opent hij direct daar:
- lead: het contactformulier. Wat bezoekers daar invullen, komt terecht bij je aanvragen.
- booking: afspraken boeken. Dat moet ingericht zijn.
- helpcenter: je helpcentrum. Daarvoor heb je een actief helpcentrum uit je kennisbank nodig.
- profile: de profielweergave van je bedrijf uit je profiel.
Biedt je LeadWin-agent een scherm niet aan, dan opent de chat. close sluit hem, toggle wisselt tussen open en gesloten.
LeadWin('open');
LeadWin('open', { screen: 'lead' });
LeadWin('open', { screen: 'booking' });
LeadWin('close');
LeadWin('toggle');
Knoppen zonder JavaScript plaatsen
Elk element met het attribuut data-leadwin-open opent bij een klik de chat. Als waarde vul je het scherm in. Zonder waarde opent de chat zelf. Dat werkt in elk CMS, ook voor elementen die pas later op de pagina komen, en vraagt geen basis en geen eigen JavaScript.
<button data-leadwin-open="lead">Contact opnemen</button> <button data-leadwin-open>Chat openen</button>
Een vraag stellen namens de bezoeker
Met ask open je de chat en stel je meteen een vraag, alsof de bezoeker die zelf had getypt. Dat past bij knoppen waarachter altijd dezelfde vraag zit, zoals “Wat kost het?”.
- De vraag heeft 1 tot 1.000 tekens. Is ze leeg of langer, dan gebeurt er niets.
- Ze komt terecht in het gesprek dat de bezoeker op dat moment open heeft. Met newChat: true begint ze een nieuw gesprek.
- Schrijft je LeadWin-agent op dat moment een antwoord, dan wordt de klik genegeerd.
- De vraag is een normaal bericht van de bezoeker. Een nieuw gesprek telt daarom mee voor je gesprekstegoed.
LeadWin('ask', 'Wat kost het?');
LeadWin('ask', { prompt: 'Wat kost het?' });
LeadWin('ask', { prompt: 'Wat kost het?', newChat: true });
Dark mode koppelen
Schakelt je website tussen licht en donker, dan schakelt theme je LeadWin-agent mee om. Dat werkt alleen als onder Weergave het kleurenschema API is gekozen. Tot de eerste aanroep toont je LeadWin-agent dan het lichte thema. De aanroep geldt alleen voor de bezoeker die hem uitvoert. Met auto zet je hem terug.
LeadWin('theme', 'dark');
LeadWin('theme', 'light');
LeadWin('theme', 'auto');
Taal koppelen
Bij een gewone paginawissel leest je LeadWin-agent de taalinformatie van je pagina sowieso opnieuw. De opdracht language heb je alleen nodig als bezoekers van taal wisselen zonder dat de pagina opnieuw laadt. Ze accepteert de, en, fr en nl, ook als landcode zoals de-DE. Alleen talen die onder Taal zijn ingeschakeld, werken. Is de chat open, dan laadt hij opnieuw in de nieuwe taal en gaat het gesprek gewoon verder. Met auto geef je de beslissing terug aan de taalinformatie van je pagina.
LeadWin('language', 'en');
LeadWin('language', 'auto');
Reageren op het openen
Gaat de chat open of dicht, dan activeert je LeadWin-agent op je pagina de gebeurtenis leadwin:panel. In event.detail.open staat true of false. De gebeurtenis komt alleen bij een echte wijziging, niet bij elke opdracht. Ze stijgt op in het document, je kunt dus ook op window luisteren. Zo verberg je bijvoorbeeld een vaste balk of pauzeer je een video zolang de chat open is.
document.addEventListener('leadwin:panel', (event) =>
document.body.classList.toggle('leadwin-open', event.detail.open));
Meer opdrachten en attributen
Deze mogelijkheden staan niet op de pagina in het dashboard, maar werken net zo:
- LeadWin('article', 'sleutel'): opent de chat direct bij een artikel uit je helpcentrum. Als sleutel gebruik je de slug uit het adres van het artikel of de GUID ervan. Toegestaan zijn letters, cijfers, koppelteken en underscore, maximaal 300 tekens.
- LeadWin('consent', 'granted'): geeft de beslissing van je cookiebanner door. Hoe dat samenhangt met toestemming, lees je in Privacy.
- data-lang: op de code uit de installatie legt dit attribuut de taal van de pagina vast, bijvoorbeeld data-lang="en". Het gaat voor op het attribuut lang in de html-tag.
- data-title: op de code uit de installatie legt dit attribuut vast hoe schermlezers de launcher voorlezen. Zonder waarde heet hij Chat.
Beide attributen zet je in de openende script-tag die al data-key bevat.
Wat je abonnement bevat
De JavaScript-API zit in elk abonnement, van Free tot Scale. Wat een opdracht kan openen, hangt af van wat je abonnement bevat: afspraken boeken krijg je vanaf Basic, het eigen helpcentrum vanaf Pro. Het kleurenschema API zit in elk abonnement. Met Feedbax Business gelden de limieten van Basic, met Premium die van Pro en met Enterprise die van Scale. Meer hierover lees je in LeadWin in het Feedbax-abonnement.
Veelgestelde vragen
Hoe opent mijn knop Contact het LeadWin-formulier?
Voeg aan de knop het attribuut data-leadwin-open="lead" toe. Eigen JavaScript heb je daarvoor niet nodig.
Kan een knop direct afspraken boeken openen?
Ja, met data-leadwin-open="booking" of LeadWin('open', { screen: 'booking' }). Afspraken boeken moet ingericht zijn, anders opent de chat.
Mijn website heeft een dark mode. Hoe volgt de chat die?
Zet onder Weergave het kleurenschema op API en roep LeadWin('theme', 'dark') of LeadWin('theme', 'light') aan zodra je website omschakelt.
LeadWin('theme', 'dark') doet niets. Hoe kan dat?
Het kleurenschema staat niet op API. Alleen dan werkt de opdracht.
Heb ik de basis nodig?
Alleen als je eigen JavaScript LeadWin aanroept, mogelijk voordat je LeadWin-agent geladen is. Voor knoppen met data-leadwin-open niet.
Kan ik reageren als de chat opengaat?
Ja. Luister naar de gebeurtenis leadwin:panel en lees event.detail.open.
Kan ik een vraag namens de bezoeker sturen?
Ja, met LeadWin('ask', 'Je vraag') en maximaal 1.000 tekens. De vraag komt terecht in het open gesprek, tenzij je newChat: true meegeeft.
Werkt LeadWin('language', 'fr') als Frans niet is ingeschakeld?
Nee. De opdracht accepteert alleen talen die onder Taal zijn ingeschakeld.