Headless: je hele LeadBot-flow in je pagina

Wat is een headless LeadBot?

Een gewone LeadBot leeft in de widget: een zwevende knop rechtsonder die een paneel opent met je flow erin. Dat paneel is afgeschermd van je site en LeadBot bepaalt waar het staat.

Zet je die LeadBot op Headless, dan verdwijnt dat omhulsel. De flow wordt getoond als vast onderdeel van je pagina, op een plek die je zelf kiest. Het is de hele conversatie — alle stappen en routering — maar zonder widget: geen zwevende knop, geen vast paneel. Jouw element bepaalt de grootte en de plek.

Een headless LeadBot blijft verder een gewone LeadBot: campagnes, zichtbaarheidsregels en planning werken allemaal gewoon door, en inzendingen komen in dezelfde inbox terecht.

Headless of losse componenten?

Allebei zetten ze LeadBot in je eigen pagina en allebei gebruiken ze dezelfde SDK, maar ze lossen iets anders op. Ze sluiten elkaar niet uit: je kunt op dezelfde site een headless flow en losse componenten gebruiken.

• Headless flow — Eén component in je code dat je complete flow toont: alle stappen, routering en condities. Je bouwt hem gewoon in de builder van een LeadBot.
• Losse componenten — Een component-LeadBot heeft geen flow, maar losse blokken — AI-chat, formulier, terugbelverzoek, e-mailverzoek, WhatsApp of knop — die je elk apart in je pagina zet. Zie [Componenten: LeadBot midden in je eigen website](/wat-zijn-componenten).

Headless aanzetten

Headless is een instelling van de LeadBot zelf, niet van je code.

1. 1 Open de LeadBot en ga naar het tabblad Instellingen.
2. 2 Zet de schakelaar Headless aan.
3. 3 Publiceer. De omschakeling gaat in bij de volgende publicatie — tot dat moment blijft de widget gewoon op je site staan.
4. 4 Op de detailpagina van die LeadBot verschijnt daarna een installatiesectie met dezelfde opzet als bij componenten: een AI-opdracht die je in je AI-codeertool kunt plakken, en daaronder de code per framework.

Wat je nodig hebt

De flow wordt 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.

• 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.
• Het ID van je LeadBot — Staat in de URL van de detailpagina van die LeadBot (bijvoorbeeld /leadbots/21) en in de gegenereerde code.

De flow op je website plaatsen

De setup is dezelfde als bij componenten: één keer in de root van je app zet je LeadBotProvider neer (React), registreer je de plug-in (Vue) of roep je init() aan (gewone JavaScript), met je domeinsleutel erin. Die stap staat uitgebreid in Componenten op je website plaatsen .

Daarna is de flow één component: LeadBotFlow in React en Vue, mountFlow in gewone JavaScript. Zet hem op de plek waar het gesprek moet verschijnen; hij neemt de grootte van jouw element over.

import { mountFlow } from "@leadbot/components";

mountFlow(document.querySelector("#leadbot-flow"), {
  leadbotId: 21,
  layout: { maxWidth: "640px", align: "center" },
});

import { LeadBotFlow } from "@leadbot/react";

<LeadBotFlow leadbotId={21} layout={{ maxWidth: "640px", align: "center" }} />

<script setup lang="ts">
import { LeadBotFlow } from "@leadbot/vue";
</script>

<template>
  <LeadBotFlow :leadbot-id="21" :layout="{ maxWidth: '640px', align: 'center' }" />
</template>

De layout van de flow bepalen

Een headless flow heeft zijn eigen layout-variabelen. Je stelt ze in met de layout-optie, of je zet ze zelf als CSS-variabele op een element erboven. Zo hoef je nooit interne klassenamen van de SDK te gebruiken.

De rest van de vormgeving werkt precies als bij componenten — basiskleur, design tokens en donkere modus staan in Componenten stylen .

mountFlow(el, { leadbotId: 21, layout: { maxWidth: "640px", align: "center" } });

/* of gewoon in je eigen CSS, ergens boven de flow */
.mijn-flow-wrapper {
  --leadbot-flow-max-width: 640px;
  --leadbot-flow-align: center;
}

<LeadBotFlow leadbotId={21} layout={{ maxWidth: "640px", align: "center" }} />

/* of gewoon in je eigen CSS, ergens boven de flow */
.mijn-flow-wrapper {
  --leadbot-flow-max-width: 640px;
  --leadbot-flow-align: center;
}

<LeadBotFlow :leadbot-id="21" :layout="{ maxWidth: '640px', align: 'center' }" />

/* of gewoon in je eigen CSS, ergens boven de flow */
.mijn-flow-wrapper {
  --leadbot-flow-max-width: 640px;
  --leadbot-flow-align: center;
}

• --leadbot-flow-max-width — Maximale breedte van elke kaart, keuzeknop en formulier. Standaard 320px.
• --leadbot-flow-align — Uitlijning van het gesprek: flex-start (standaard), center, flex-end of stretch. Met stretch vullen de kaarten de container tot aan de maximumbreedte.
• --leadbot-flow-options-justify — Uitlijning van alleen de rij met keuzeknoppen, bijvoorbeeld space-evenly. Volgt standaard de uitlijning hierboven.
• --leadbot-flow-option-grow — Of keuzeknoppen meegroeien. Zet op 1 om de rij te vullen. Standaard 0.

Hoe de flow zich gedraagt

Een headless flow doet hetzelfde als de widget, alleen op een andere plek.

Bij het laden van de pagina haalt de SDK de gepubliceerde LeadBot op en telt daarbij de paginaweergave. De zichtbaarheidsregels van de LeadBot blijven gelden: valt de pagina daarbuiten, dan rendert er niets. De basiskleur uit de publicatie wordt automatisch toegepast; geef je baseColor mee, dan overschrijft die hem.

Staat bij de LeadBot 'open houden bij navigatie' aan, dan wordt het gesprek bij navigatie hersteld (per LeadBot bewaard in sessionStorage). Bij een routewissel in een single-page app wordt een nieuwe paginaweergave geteld en begint het gesprek opnieuw, tenzij die instelling het gesprek openhoudt.

Meerdere flows met verschillende LeadBot-ID's kunnen naast elkaar op een pagina staan, elk met een eigen gesprekstoestand. De gewone widget van je andere LeadBots blijft daarbij ongemoeid.

Goed om te weten

Een paar dingen die anders werken dan bij de widget.

• Zonder code is de LeadBot nergens te zien — Een headless LeadBot heeft geen widget meer. Staat het component nog niet in je site, dan toont die LeadBot dus niets.
• Geen knop die hem opent — Een headless LeadBot kun je niet als doel van een knopcomponent kiezen: hij wordt in de pagina zelf getoond en heeft geen widget om te openen.
• Publiceren blijft verplicht — De flow laadt altijd de gepubliceerde versie. Wijzigingen in de builder verschijnen pas op je site nadat je publiceert.
• Terug naar de widget — Zet je Headless weer uit en publiceer je opnieuw, dan verschijnt de LeadBot weer als zwevende widget. Haal het LeadBotFlow-component dan ook uit je code.

Volgende stappen

• Componenten op je website plaatsen — de SDK-setup, per framework, plus de AI-opdracht.
• Componenten stylen — basiskleur, design tokens, donkere modus en CSS-klassen.
• SDK-referentie — alle parameters van LeadBotFlow en mountFlow.
• Componenten: LeadBot midden in je eigen website — losse componenten in plaats van een hele flow.