Componenten: LeadBot midden in je eigen website

Wat zijn componenten?

De gewone LeadBot is één widget: een zwevende knop rechtsonder die een paneel opent met je flow erin. Dat paneel is afgeschermd van je site — de CSS van je website kan er niet bij, en LeadBot bepaalt waar het staat.

Componenten draaien dat om. Je installeert een npm-pakket, plaatst een component precies daar waar je hem wil hebben, en de HTML komt gewoon in je eigen pagina terecht. Je eigen CSS kan er dus wél bij. Je kiest zelf de breedte, de plek, de kleuren en het lettertype.

Alles daarachter blijft hetzelfde: inzendingen komen in dezelfde inbox, dezelfde bezoeker wordt herkend als bij de widget, en je statistieken, webhooks en bevestigingsmails werken ongewijzigd.

Wanneer gebruik je componenten?

Componenten zijn bedoeld voor de plekken waar een zwevende widget te weinig is of niet past. Een paar veelgebruikte situaties:

• Een formulier in je landingspagina — Een terugbelformulier midden in de hero of onder een prijstabel, in de vormgeving van je eigen site.
• Een AI-chat als vast paneel — Bijvoorbeeld naast je documentatie of productcatalogus, altijd zichtbaar in plaats van achter een knop.
• Een eigen call-to-action-knop — Een knop in jouw huisstijl die de gewone LeadBot-widget opent, eventueel meteen bij de juiste stap.
• WhatsApp op de contactpagina — Een WhatsApp-blok tussen je adresgegevens, waarbij het bericht eerst als lead wordt vastgelegd.
• Meerdere formulieren op één site — Elk met een eigen label, zodat je in de inbox precies ziet waar iemand vandaan komt.

Component-LeadBot of gewone LeadBot?

In het dashboard zijn dit twee verschillende soorten LeadBots, en je herkent ze aan het label bij de naam.

Een gewone LeadBot is een flow: stappen die aan elkaar geknoopt zijn en die een bezoeker doorloopt in de widget. Een component-LeadBot heeft geen flow. Het is een verzameling losse componenten die elk op zichzelf staan; jij bepaalt in je code welke waar op de pagina komt.

De component-LeadBot is er vooral voor de toeschrijving: alle inzendingen van de componenten die eronder hangen krijgen zijn naam in de inbox, zijn te filteren op die naam, en verschijnen samen in je statistieken en exports. Je kunt er meerdere per domein maken — bijvoorbeeld één per site-onderdeel.

• Gewone LeadBot — Een flow in de zwevende widget. Wordt geladen met de scripttag.
• Component-LeadBot — Losse componenten die je zelf in je pagina plaatst. Wordt geladen met een npm-pakket.
• Headless LeadBot — Een gewone flow die je via de SDK in je pagina zet in plaats van in de widget. Zie [Headless: je hele LeadBot-flow in je pagina](/headless-flow-in-je-pagina).

Wat je nodig hebt

Componenten worden in de code van je website geplaatst. Je hebt dus toegang tot die code nodig — zelf, via je developer, of via een AI-codeertool zoals Claude Code, Cursor, Lovable of v0. Het dashboard geeft je een kant-en-klare opdracht voor die tools, dus een developer is geen harde eis.

• Componenten ingeschakeld — Componenten moeten voor je domein aan staan. Staat dat uit, dan zie je in het dashboard 'Componenten zijn niet ingeschakeld' met een knop naar de instellingen.
• Een website waar je code kunt plaatsen — Het pakket wordt via npm geïnstalleerd, dus je site moet een build-stap hebben (React, Vue, Next.js, Nuxt, Astro, of gewone JavaScript met een bundler).
• Je domeinsleutel — Te vinden onder Instellingen > Installatie > Script implementatie. Dezelfde sleutel als voor de gewone widget.

Van nul naar live in 3 stappen

Als je een component-LeadBot opent, staat het tabblad Aan de slag klaar met precies deze drie stappen. Ze vinken zichzelf af zodra je klaar bent.

1. 1 Bouw je componenten. Ga naar het tabblad Bewerken en klik op 'Component toevoegen'. Kies het type — chatbot, formulier, terugbelverzoek, e-mailverzoek, WhatsApp of knop — en stel de velden, teksten en AI-agent in. Zolang een component nog iets mist, staat er 'Vraagt aandacht' op de kaart.
2. 2 Publiceer. Wijzigingen in het dashboard doen niets op je site totdat je publiceert. Je componenten laden hun configuratie altijd uit de gepubliceerde versie.
3. 3 Plaats de SDK op je website. In stap 2 van Aan de slag staat de code, per framework, plus een AI-opdracht die je zo in je AI-codeertool kunt plakken.
4. 4 Controleer de verbinding. Stap 3 kijkt of de SDK ook echt op je site geladen is. Zodra dat gebeurt, verandert 'Nog geen verbinding gedetecteerd' in 'SDK gedetecteerd op je site'. Dit kan een paar minuten duren na het publiceren van je site.

Publiceren is verplicht

Dit is het belangrijkste om te onthouden. De gepubliceerde versie is de enige bron van waarheid: je componenten halen hun velden, labels, teksten, WhatsApp-nummer en AI-agent daaruit op. Wat je in het dashboard aanpast maar niet publiceert, verandert niets op je site — daar loopt nog de laatst gepubliceerde versie.

Omgekeerd geldt hetzelfde: haal je een component-LeadBot offline, dan verdwijnen zijn componenten van elke pagina. Ze tonen dan niets meer totdat je opnieuw publiceert. Verwijder je een component, dan stoppen ingesloten snippets die ernaar verwijzen met werken.

Je ziet in het dashboard altijd waar je staat: 'Deze componenten zijn nog niet live' als je nog nooit gepubliceerd hebt, en 'Je laatste wijzigingen zijn nog niet live' als er ongepubliceerde wijzigingen klaarstaan.

Welke gegevens heb je nodig in de code?

Drie waarden komen terug in elk stukje installatiecode. Je hoeft ze niet met de hand op te zoeken — de gegenereerde snippet in het dashboard bevat ze allemaal al — maar het helpt om te weten wat wat is.

• domainKey (domeinsleutel) — Identificeert je website. Te vinden onder Instellingen > Installatie > Script implementatie. Dezelfde sleutel als in de scripttag van de gewone widget; hij is niet geheim.
• leadbotId — Het ID van de component-LeadBot waar het component onder valt. Staat bovenaan de detailpagina van de component-LeadBot als 'LeadBot-ID:' en in de URL.
• id (component-ID) — Het ID van het specifieke component. Elk component dat je toevoegt krijgt er één; hij staat in de codesnippet van dat component. Hiermee weet de SDK welke velden, teksten en agent hij moet laden.

Wat wordt er geteld?

Componenten tellen precies zoals de gewone widget. Bij het laden van een pagina haalt de SDK één keer per component-LeadBot de gepubliceerde configuratie op; dat is ook het moment waarop de paginaweergave geteld wordt. Staan er op één pagina componenten van twee verschillende component-LeadBots, dan zijn dat dus twee paginaweergaven. In een single-page app telt een routewissel er opnieuw één.

AI-chatgesprekken tellen mee in je AI-verbruik zoals elk ander gesprek: één gesprek is één conversatie in de inbox, ook als de bezoeker tien keer heen en weer typt.

Om de paginaweergave ook te tellen op pagina's waar helemaal geen component staat, geef je leadbotId mee in de initialisatie. De gegenereerde snippet doet dat al voor je.

Volgende stappen

• Alle componenten en hun instellingen — wat elk componenttype doet en wat je erin configureert.
• Componenten op je website plaatsen — de code, waar hij hoort, en hoe je een AI-tool het laat doen.
• Componenten stylen — kleuren, tokens, CSS-klassen en layout.
• SDK-referentie — alle componenten, parameters en opties.
• Headless: je hele LeadBot-flow in je pagina — een complete flow in plaats van losse componenten.