Componenten op je website plaatsen

Voordat je begint

Drie dingen moeten kloppen voordat de code iets doet.

Componenten moeten aan staan voor je domein. Is dat niet zo, dan zie je in het dashboard 'Componenten zijn niet ingeschakeld' met een knop naar de instellingen.

Je component-LeadBot moet minstens één geconfigureerd component hebben. Zonder componenten valt er niets te genereren: 'Voeg eerst een component toe en configureer het — de snippet wordt op basis van je componenten gegenereerd.'

En je component-LeadBot moet gepubliceerd zijn. De ingesloten componenten laden hun configuratie uit de gepubliceerde versie; zonder publicatie tonen ze niets.

Waar je de code vindt

Open je component-LeadBot en ga naar het tabblad Aan de slag. Stap 2, 'Plaats de SDK op je website', bevat alles: de AI-opdracht bovenaan, en daaronder 'Liever zelf doen?' met de code per framework.

De code is al ingevuld met jouw gegevens — je domeinsleutel, je LeadBot-ID en het ID van elk component. Je hoeft er niets aan te veranderen.

Wil je de code van één specifiek component in plaats van allemaal? Dan vind je die ook op de kaart van dat component in het tabblad Bewerken, onder Codesnippet.

Waar hoort de code?

De code bestaat uit twee delen, en die horen op verschillende plekken.

De setup komt één keer in de root van je app — de layout, het template of het entry-bestand dat op elke pagina wordt geladen. Denk aan app/layout.tsx in Next.js, main.ts in een Vue-app, of je basistemplate. Daarna kun je de componenten overal in je site gebruiken.

De componenten zelf zet je op de plek waar ze moeten verschijnen: in een pagina, in een sectie, in een sidebar. Ze nemen de breedte van hun omgeving over, dus het element eromheen bepaalt hoe groot ze zijn.

De stylesheet importeer je één keer, meestal naast de setup.

De code

Kies hierboven je framework — die keuze geldt voor alle codevoorbeelden in deze documentatie.

In React zet je LeadBotProvider in de root van je app. In Vue registreer je LeadBot één keer als plug-in in main.ts en gebruik je de componenten daarna in je templates. Zonder framework roep je init() één keer aan en koppel je elk component aan een element op de pagina; elke mount-functie geeft een handle terug waarmee je het component later kunt bijwerken of opruimen.

Elk component krijgt een leadbotId (welke component-LeadBot) en een id (welk component).

npm install @leadbot/components

<!-- index.html -->
<div id="leadbot-agent-1"></div>
<div id="leadbot-form-1"></div>

// leadbot.js
import { init, mountAgentChat, mountCallbackRequest } from "@leadbot/components";
import "@leadbot/components/styles.css";

init({
  domainKey: "JOUW-DOMEINSLEUTEL",
  apiHost: "https://collector.leadbot.com",
  baseColor: "#0074FF",
  leadbotId: 18,
});

mountAgentChat(document.querySelector("#leadbot-agent-1"), { leadbotId: 18, id: "COMPONENT-ID" });
mountCallbackRequest(document.querySelector("#leadbot-form-1"), { leadbotId: 18, id: "COMPONENT-ID" });

npm install @leadbot/react

// app/layout.tsx (of je root-component)
import { LeadBotProvider, LeadBotAgent, LeadBotCallbackRequest } from "@leadbot/react";
import "@leadbot/components/styles.css";

export default function App() {
  return (
    <LeadBotProvider
      domainKey="JOUW-DOMEINSLEUTEL"
      apiHost="https://collector.leadbot.com"
      baseColor="#0074FF"
      leadbotId={18}
    >
      {/* je app */}
      <LeadBotAgent leadbotId={18} id="COMPONENT-ID" />
      <LeadBotCallbackRequest leadbotId={18} id="COMPONENT-ID" />
    </LeadBotProvider>
  );
}

npm install @leadbot/vue

// main.ts
import { createApp } from "vue";
import { LeadBot } from "@leadbot/vue";
import "@leadbot/components/styles.css";
import App from "./App.vue";

createApp(App)
  .use(LeadBot, {
    domainKey: "JOUW-DOMEINSLEUTEL",
    apiHost: "https://collector.leadbot.com",
    baseColor: "#0074FF",
    leadbotId: 18,
  })
  .mount("#app");

<!-- App.vue -->
<script setup lang="ts">
import { LeadBotAgent, LeadBotCallbackRequest } from "@leadbot/vue";
</script>

<template>
  <!-- je app -->
  <LeadBotAgent :leadbot-id="18" id="COMPONENT-ID" />
  <LeadBotCallbackRequest :leadbot-id="18" id="COMPONENT-ID" />
</template>

Wat de code precies doet

Regel voor regel, zodat je weet wat je plakt.

• De import van het pakket — Haalt de componenten binnen. Preact zit intern in het pakket en heeft geen invloed op je eigen React- of Vue-versie.
• @leadbot/components/styles.css — De standaardvormgeving. Je mag hem weglaten en alles zelf stylen; zie het artikel over stylen.
• LeadBotProvider / app.use(LeadBot) / init() — De setup. Eén keer per app. Zet de domeinsleutel, de servergegevens en de standaardwaarden klaar voor alle componenten eronder.
• domainKey — Identificeert je website bij LeadBot. Dezelfde sleutel als in de scripttag van de gewone widget, en net zo openbaar.
• apiHost — De server waar de inzendingen naartoe gaan. Staat al goed ingevuld in de gegenereerde snippet.
• baseColor — Je basiskleur uit het tabblad Instellingen van de component-LeadBot. Wordt de accentkleur van knoppen, focusranden en chatbellen.
• leadbotId in de setup — Zorgt dat de configuratie meteen bij het laden van de pagina wordt opgehaald. Daardoor wordt de paginaweergave ook geteld op pagina's zonder zichtbaar component.
• leadbotId op een component — Onder welke component-LeadBot de inzending valt. Elk component op de pagina mag een andere hebben.
• id op een component — Welk component het is. Hiermee haalt de SDK de velden, labels, teksten en agent op uit je gepubliceerde configuratie.

Met AI: laat je AI-tool het plaatsen

Je hebt hier geen developer voor nodig. In stap 2 van Aan de slag staat een kant-en-klare opdracht waarin alle gegevens van jouw bot al verwerkt zijn. Je kopieert hem met één klik en plakt hem in de AI-tool waarmee je website gemaakt is.

De opdracht is geschreven om zelfstandig uitvoerbaar te zijn: hij legt uit wat LeadBot is, welke drie pakketten er zijn, en instrueert de tool om zelf te bepalen welke bij jouw project past en alleen die te gebruiken. Daarna volgen de installatieopdracht en werkende voorbeeldcode voor React, Vue én gewone JavaScript, en een verwijzing naar de README van het gekozen pakket voor de volledige referentie.

1. 1 Open het tabblad Aan de slag van je component-LeadBot en klap stap 2 open.
2. 2 Klik op 'Kopieer de opdracht'. Wil je eerst zien wat erin staat, klik dan op 'Toon de opdracht'.
3. 3 Open de AI-tool waarmee je website is gemaakt — Claude Code, Cursor, Lovable, v0 of Bolt.
4. 4 Plak de opdracht en laat de tool zijn werk doen.
5. 5 Publiceer je website en kom terug naar stap 3 om de verbinding te controleren.

Wat er in de AI-opdracht staat

Handig om te weten, bijvoorbeeld als je hem wil aanvullen met je eigen wensen. De opdracht bevat:

• Je componenten met hun ID's — Een genummerde lijst: welk component het is, wat het doet, en het component-ID dat erbij hoort.
• Code per framework — Een sectie voor React, een voor Vue en een voor gewone JavaScript, elk met de installatieopdracht en werkende code, al ingevuld met jouw gegevens.
• Een verwijzing naar de README — Het pad naar de README van elk pakket, zodat de tool de volledige optie-referentie kan nalezen voor het gaat integreren.
• Regels waar de tool zich aan moet houden — Domeinsleutel, LeadBot-ID en component-ID's ongewijzigd laten; geen velden, labels of teksten in code toevoegen (die komen uit het dashboard); LeadBot één keer initialiseren in de root; de stylesheet één keer importeren; alleen de genoemde componenten gebruiken.
• Hoe de vormgeving aangepast mag worden — Dat alles herstijlbaar is via CSS-variabelen (--leadbot-primary, --leadbot-font-family, --leadbot-radius-card en zo verder) en dat de tool de componenten met de eigen vormgeving van de site mag positioneren.

Tips voor een goed AI-resultaat

• Plak de opdracht in de tool die de code van je site echt kan bewerken, niet in een los chatvenster. Een AI-tool die je repository ziet, plaatst de setup meteen op de juiste plek.
• Vertel er zelf bij waar de componenten moeten komen. De opdracht zegt welke componenten je hebt, maar niet dat het formulier onder je prijstabel hoort — dat weet alleen jij.
• Vraag de tool om de vormgeving op je huisstijl aan te sluiten. De opdracht geeft hem daar expliciet toestemming voor en noemt de CSS-variabelen die hij mag zetten.
• Laat de gegevens met rust. Als een tool voorstelt om de domeinsleutel of een component-ID te 'verbeteren', is dat fout: die waarden verwijzen naar jouw configuratie in het dashboard.
• Voeg geen velden of labels toe in code. Die horen in het dashboard, zodat je ze kunt aanpassen zonder je site opnieuw uit te rollen.

Controleren of het werkt

Stap 3 van Aan de slag, 'Controleer de verbinding', kijkt of de SDK ook echt geladen wordt op je site.

Zolang er nog niets binnenkomt staat er 'Nog geen verbinding gedetecteerd', met de melding dat je hier de eerste sessie ziet zodra de SDK voor het eerst laadt op je domein. Dat kan een paar minuten duren na het publiceren van je site.

Zodra het werkt verandert het in 'SDK gedetecteerd op je site' — je componenten laden en sturen data naar LeadBot. Via 'Bekijk statistieken' spring je meteen naar het overzicht.

Let op: de controle kijkt naar activiteit binnen de standaard analyseperiode. Een site die lang stil ligt kan dus terugvallen naar 'Nog geen verbinding gedetecteerd' zonder dat er iets stuk is.

Veelvoorkomende problemen

Loopt het niet meteen, dan is het vrijwel altijd een van deze vijf.

• Er verschijnt niets — Meestal is de component-LeadBot niet (meer) gepubliceerd, ontbreekt de domeinsleutel, of stond het element nog niet in de DOM toen het component gekoppeld werd. Kijk in de console van je browser.
• Inzendingen worden geweigerd (403) — Componenten staan niet aan voor dit domein, of het abonnement is gesloten. Zet componenten aan in de instellingen van je domein.
• De chat zegt dat de assistent niet gevonden kan worden — De gepubliceerde stap heeft geen agent, of de agent is niet uitgerold. Controleer de agent bij het component en publiceer opnieuw.
• Een foutmelding onder een invoerveld — De server heeft de waarde afgekeurd, bijvoorbeeld een telefoonnummer dat niet klopt. De melding zelf legt uit wat eraan schort.
• Een component verdween ineens — Is de component-LeadBot offline gehaald of het component verwijderd? Dan tonen ingesloten snippets niets meer.

Een gewone flow plaatsen (headless)

Wil je geen losse componenten maar je volledige LeadBot-flow in de pagina, dan werkt dat met dezelfde setup: één component, LeadBotFlow (of mountFlow). Je zet daarvoor in de instellingen van die (gewone) LeadBot de schakelaar Headless aan.

Alles daarover staat in Headless: je hele LeadBot-flow in je pagina .