SDK-referentie: alle componenten, parameters en opties

Pakketten

Drie pakketten, één engine. De React- en Vue-pakketten zijn dunne wrappers om @leadbot/components heen; welke je kiest hangt alleen af van je stack.

npm install @leadbot/components

// de stylesheet is optioneel maar hoort bij alle drie
import "@leadbot/components/styles.css";

npm install @leadbot/react

// de stylesheet is optioneel maar hoort bij alle drie
import "@leadbot/components/styles.css";

npm install @leadbot/vue

// de stylesheet is optioneel maar hoort bij alle drie
import "@leadbot/components/styles.css";

• @leadbot/react — React 18+. SSR-veilig, werkt in Next.js zonder dynamic import.
• @leadbot/vue — Vue 3 plug-in plus componenten. SSR-veilig, werkt in Nuxt.
• @leadbot/components — Framework-onafhankelijke JavaScript-API, en tegelijk de engine onder de twee wrappers. Rendert in de light DOM; Preact zit intern in het pakket en is onzichtbaar voor de gebruiker.

Configuratie

Dezelfde sleutels gelden op drie plekken: in init(), op LeadBotProvider / de Vue-plug-in, en op elk afzonderlijk component. Wat je op een component zet wint van de globale configuratie, dus één pagina kan desnoods meerdere domeinen bedienen.

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

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

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

<LeadBotProvider
  domainKey="JOUW-DOMEINSLEUTEL"
  apiHost="https://collector.leadbot.com"
  baseColor="#0074FF"
  leadbotId={18}
>
  …
</LeadBotProvider>

import { createApp } from "vue";
import { LeadBot } from "@leadbot/vue";

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

• domainKey — string, verplicht — De domeinsleutel uit het dashboard.
• apiHost — string, verplicht — De origin van de collector; "/api" wordt eraan geplakt. Bijvoorbeeld https://collector.leadbot.com. Laat je zowel apiHost als apiBase weg, dan gooit de mount een fout in plaats van stilletjes naar je eigen origin te posten.
• apiBase — string — Het volledige pad inclusief padgedeelte; wint van apiHost.
• baseColor — string — Accentkleur, bijvoorbeeld "#ff0076". Zet --leadbot-primary op de mount-container.
• leadbotId — number — Standaardwaarde voor de leadbotId van de componenten. In init() zorgt hij er bovendien voor dat de configuratie meteen wordt opgehaald, zodat de paginaweergave ook geteld wordt op pagina's zonder component.
• language — string — De taal die naar de collector gaat. Standaard het lang-attribuut van je html-element.
• path — string — Het pad dat naar de collector gaat. Standaard location.pathname. De site zelf wordt herkend aan de Origin- en Referer-headers, dus een host-optie bestaat niet.
• preview — boolean — Test-/voorbeeldmodus. Inzendingen en chatberichten lopen volledig door (de AI antwoordt echt), maar de collector bewaart ze niet in de inbox.
• previewToken — string — Token voor het dashboardvoorbeeld van een ongepubliceerd concept. Wordt alleen gebruikt als preview ook aan staat. Nooit in een productiebuild zetten: wie de uitgeleverde JS leest, kan er je concepten mee opvragen.

Gedeelde opties op elk component

Naast de configuratiesleutels hierboven accepteert elk component deze opties.

• leadbotId — number — De component-LeadBot waaronder de interactie valt. Verplicht op de meeste componenten; elk component op de pagina mag een andere hebben.
• id — string — De UUID van de gepubliceerde stap achter dit component. Bepaalt welke velden, labels, teksten en agent geladen worden, en is ook waar de collector inzendingen tegen valideert.
• className — string — Extra klassen op de mount-container.
• style — CSSProperties — Alleen in React: wordt op het host-element gezet.
• chrome — boolean — false haalt het kaartoppervlak, de maximumafmetingen, het scrollgebied en de knoppenbalk weg.
• labels — object — Alle zichtbare teksten van het component. Standaard Engels; per component staat hieronder welke sleutels er zijn.

De mount-handle

Elke mount-functie geeft een handle terug met twee methoden. update() voegt de nieuwe opties oppervlakkig samen met de bestaande en tekent het component opnieuw op zijn plek — de toestand blijft daarbij behouden, dus chatgeschiedenis en al ingevulde formuliervelden gaan niet verloren. destroy() ruimt op en verwijdert de klassen die de mount had toegevoegd.

De React- en Vue-componenten doen dit automatisch: een propwijziging roept update() aan, unmounten roept destroy() aan.

const chat = mountAgentChat(el, { leadbotId: 18, id: "COMPONENT-ID" });

chat.update({ placeholder: "Stel je vraag…" });
chat.destroy();

// een propwijziging roept update() aan, unmounten roept destroy() aan
<LeadBotAgent leadbotId={18} id="COMPONENT-ID" placeholder={placeholder} />

<!-- een propwijziging roept update() aan, unmounten roept destroy() aan -->
<LeadBotAgent :leadbot-id="18" id="COMPONENT-ID" :placeholder="placeholder" />

Voorrangsregels

Elk component wordt geconfigureerd vanuit de gepubliceerde stap. Wat je expliciet meegeeft wint daarvan; de standaardwaarden van een preset zijn de laatste terugval.

De volgorde is dus: expliciete prop of veld-children → gepubliceerde stap → standaardwaarde van de preset.

De configuratie wordt één keer per component-LeadBot per pagina opgehaald; alle andere componenten op die pagina lezen hetzelfde antwoord. Dat verzoek is ook wat de paginaweergave telt.

• LeadBotForm en de presets — Lezen de velden (in de gepubliceerde volgorde), de knoptekst, het succesbericht, het staptype, het event label en de kwalificatie.
• LeadBotWhatsApp — Leest het nummer, de contactnaam en de introductietekst.
• LeadBotAgent — Leest de agent, het openingsbericht, de gespreksstarters en het event label.
• LeadBotButtons — Leest de knoptekst en de ingestelde actie, of — bij een stap met opties — de opties als knoppen.

AI-chat — LeadBotAgent / mountAgentChat

Een volledige chat-UI: streamende antwoorden, typindicator, bronvermeldingen en een menu om opnieuw te beginnen. Elk gesprek is één item in de inbox dat met elke beurt aangroeit; destroy() en opnieuw koppelen start een nieuw gesprek.

mountAgentChat(document.querySelector("#chat"), {
  leadbotId: 18,
  id: "CHAT-COMPONENT-ID",
  initialMessage: "Hoi! Waar kan ik je mee helpen?",
  conversationStarters: ["Wat zijn jullie openingstijden?"],
  onMessage: (m) => console.log(m.role, m.content),
});

<LeadBotAgent
  leadbotId={18}
  id="CHAT-COMPONENT-ID"
  initialMessage="Hoi! Waar kan ik je mee helpen?"
  conversationStarters={["Wat zijn jullie openingstijden?"]}
  onMessage={(m) => console.log(m.role, m.content)}
/>

<LeadBotAgent
  :leadbot-id="18"
  id="CHAT-COMPONENT-ID"
  initial-message="Hoi! Waar kan ik je mee helpen?"
  :conversation-starters="['Wat zijn jullie openingstijden?']"
  :on-message="(m) => console.log(m.role, m.content)"
/>

• leadbotId — number, verplicht — De component-LeadBot van deze chat.
• id — string, verplicht — De UUID van de gepubliceerde chatstap. Bepaalt de agent en levert het openingsbericht, de gespreksstarters en het event label.
• initialMessage — string — Bericht van de assistent dat al klaarstaat voordat de bezoeker typt.
• conversationStarters — string[] — Aanklikbare voorbeeldvragen.
• placeholder — string — Placeholder van het invoerveld.
• eventLabel — string, max 100 tekens — Label voor het gesprek in de inbox en in analytics.
• chatSessionId — string — Groepeert de beurten tot één gesprek. Standaard een UUID per mount; geef er zelf een mee om een gesprek over paginaladingen heen door te trekken.
• onMessage — (message) => void — Vuurt bij elk afgerond bericht van bezoeker én assistent: { role, content, citations? }.
• onError — (error) => void — Fouten in de stream of het verzoek. De UI toont zelf ook een nette melding.
• labels — title, status, reset, send, menu, thinking, searching, plus de foutteksten chatbot_error_default, _network, _invalid_request, _step_not_found, _agent_not_found, _agent_not_configured, _agent_unavailable, _agent_no_response en _agent_response_failed.

Formulier — LeadBotForm / mountForm

Het vrij in te richten formulier. Zonder fields-array rendert het de velden van de gepubliceerde stap achter id.

interface ComponentsFormField {
  name: string;        // sleutel in user_data; hierop matchen ook serverfouten
  label: string;
  type: "text" | "email" | "tel" | "number" | "textarea"
      | "select" | "checkbox" | "checklist" | "radiolist" | "date";
  required?: boolean;
  options?: (string | { label: string; value: string })[];  // select/checklist/radiolist
  placeholder?: string;
}

• leadbotId — number, verplicht — De component-LeadBot van dit formulier.
• id — string, verplicht — De UUID van de gepubliceerde formulierstap; levert de velden, labels en het staptype.
• fields — ComponentsFormField[] — Overschrijft de gepubliceerde velden. Zie de definitie hieronder.
• stepType — "form_submit" (standaard), "callback_request", "email_request" of "whatsapp". Bepaalt hoe de inzending in de inbox wordt ingedeeld.
• submitLabel — string — Tekst op de knop.
• successMessage — string — Vervangt het formulier na een geslaagde inzending.
• eventLabel — string, max 100 tekens — Label in de inbox en in analytics.
• marksAsQualified — boolean — Markeert de bezoeker als gekwalificeerde lead. Standaard false.
• layout — "stacked" (standaard) of "inline". Bij inline staat de knop op dezelfde regel als het laatste veld; de koppeling gaat op positie.
• hideLabels — boolean — Labels alleen voor schermlezers; ze worden als placeholder getoond.
• onSubmit — (data) => boolean | void | Promise — Hook vóór het versturen. Geef false terug om te annuleren.
• onSuccess — (data) => void — Nadat de server de inzending heeft geaccepteerd.
• onError — (error) => void — Validatie- of netwerkfout.
• labels — submitError, required, invalidEmail, invalidPhone, invalidNumber en selectPlaceholder.

Validatie van formulieren

Validatie gebeurt in twee lagen. Eerst een lichte controle in de browser op basis van je velddefinitie: verplichte velden, de vorm van een e-mailadres, toegestane tekens in een telefoonnummer. Daarna de server, die het laatste woord heeft: strikte telefoonnummerparsing, controle of een gekozen optie echt bestaat, getalcontrole en zo verder.

Afkeuringen van de server worden automatisch als foutmelding onder het bijbehorende veld getoond. De koppeling loopt via name.

Velden die uit een gepubliceerd formulier komen, worden verstuurd onder hun gepubliceerde veld-ID, zodat ze in dezelfde formulierdefinitie landen als inzendingen uit de widget. Velden die je zelf declareert, worden verstuurd onder hun name.

Velden als children (React en Vue)

In plaats van de fields-array kun je de velden als children schrijven. Het zijn markeercomponenten die zelf niets renderen; ze worden gecompileerd naar dezelfde ComponentsFormField-array — identieke validatie, identiek wire-formaat, identieke serverfouten. Geef je beide, dan wint fields.

Werkt op LeadBotForm, LeadBotCallbackRequest en LeadBotEmailRequest. Er is één component per veldtype: TextField, EmailField, PhoneField, NumberField, TextAreaField, SelectField, CheckboxField, RadioListField en CheckListField. Elk neemt de props van ComponentsFormField op type na.

// zonder children: dezelfde velden als fields-array
mountForm(document.querySelector("#form"), {
  leadbotId: 18,
  id: "COMPONENT-ID",
  fields: [
    { name: "name",  label: "Naam",     type: "text",  required: true },
    { name: "phone", label: "Telefoon", type: "tel",   required: true },
    { name: "email", label: "E-mail",   type: "email" },
    { name: "topic", label: "Onderwerp", type: "select",
      options: [{ label: "Sales", value: "sales" }, { label: "Support", value: "support" }] },
  ],
});

import { LeadBotForm, TextField, PhoneField, EmailField, SelectField } from "@leadbot/react";

<LeadBotForm leadbotId={18} id="COMPONENT-ID">
  <TextField  name="name"  label="Naam"      required />
  <PhoneField name="phone" label="Telefoon"  required />
  <EmailField name="email" label="E-mail" />
  <SelectField
    name="topic" label="Onderwerp"
    options={[{ label: "Sales", value: "sales" }, { label: "Support", value: "support" }]}
  />
</LeadBotForm>

<script setup lang="ts">
import { LeadBotForm, TextField, PhoneField, EmailField, SelectField } from "@leadbot/vue";
</script>

<template>
  <LeadBotForm :leadbot-id="18" id="COMPONENT-ID">
    <TextField  name="name"  label="Naam"     required />
    <PhoneField name="phone" label="Telefoon" required />
    <EmailField name="email" label="E-mail" />
    <SelectField
      name="topic" label="Onderwerp"
      :options="[{ label: 'Sales', value: 'sales' }, { label: 'Support', value: 'support' }]"
    />
  </LeadBotForm>
</template>

Presets — LeadBotCallbackRequest en LeadBotEmailRequest

Twee varianten van LeadBotForm met een vast staptype en standaardvelden. Alle props van LeadBotForm gelden, behalve stepType (die ligt vast). Geef een fields-array mee — of laat de gepubliceerde stap de velden bepalen — om de standaardvelden te vervangen.

• LeadBotCallbackRequest / mountCallbackRequest — stepType "callback_request". Standaardvelden Naam (tekst, verplicht) en Telefoonnummer (tel, verplicht), knoptekst "Request Callback", succesbericht "Thank you! We will contact you soon."
• LeadBotEmailRequest / mountEmailRequest — stepType "email_request". Standaardvelden Naam (verplicht), E-mailadres (e-mail, verplicht) en Bericht (tekstvak), succesbericht "Thank you! Your email has been sent."

WhatsApp — LeadBotWhatsApp / mountWhatsApp

Een chatvormig blok dat het bericht eerst als lead vastlegt en daarna WhatsApp opent met dat bericht al ingevuld.

• leadbotId — number, verplicht — De component-LeadBot van dit component.
• id — string, verplicht — De UUID van de gepubliceerde WhatsApp-stap; levert het nummer, de contactnaam en de introductietekst.
• phoneNumber — string — Doelnummer, bijvoorbeeld "+31612345678". Laat weg om het nummer van de gepubliceerde stap te gebruiken.
• prefilledMessage — string — Beginwaarde van het invoerveld.
• eventLabel, marksAsQualified, onSubmit, onSuccess, onError — Zoals bij formulieren.
• labels — contactName (standaard "Support"), status, placeholder, messageLabel, submitError en redirectError.

Knoppen — LeadBotButton / LeadBotButtons / mountButtons

Rendert één knop of een groep. Zonder buttons-array komt de inhoud uit de gepubliceerde stap: een knopstap wordt één knop met de in het dashboard ingestelde actie, een stap met opties wordt een knop per optie. Een optie met een vervolgstap opent de widget op de pagina bij die stap en stuurt het label van de optie als eerste bericht van de bezoeker.

In Vue bestaat (nog) geen knopcomponent: koppel daar mountButtons uit @leadbot/components in een eigen wrapper-component. De gegenereerde Vue-snippet in het dashboard doet dat al voor je.

type ComponentsButtonAction =
  | { type: "open_widget"; stepUuid?: string; message?: string }
  | { type: "url"; href: string; target?: "_blank" };

interface ComponentsButton {
  label: string;              // identificeert de knop
  children?: unknown;         // optionele rijke inhoud in plaats van het label
  action?: ComponentsButtonAction;
}

mountButtons(document.querySelector("#buttons"), {
  leadbotId: 18,
  id: "COMPONENT-ID",
  buttons: [
    { label: "Praat met sales", action: { type: "open_widget", stepUuid: "CHAT-STAP-ID", message: "Praat met sales" } },
    { label: "Documentatie", action: { type: "url", href: "/docs", target: "_blank" } },
  ],
});

type ComponentsButtonAction =
  | { type: "open_widget"; stepUuid?: string; message?: string }
  | { type: "url"; href: string; target?: "_blank" };

interface ComponentsButton {
  label: string;              // identificeert de knop
  children?: unknown;         // optionele rijke inhoud in plaats van het label
  action?: ComponentsButtonAction;
}

<LeadBotButtons
  leadbotId={18}
  id="COMPONENT-ID"
  buttons={[
    { label: "Praat met sales", action: { type: "open_widget", stepUuid: "CHAT-STAP-ID", message: "Praat met sales" } },
    { label: "Documentatie", action: { type: "url", href: "/docs", target: "_blank" } },
  ]}
/>

type ComponentsButtonAction =
  | { type: "open_widget"; stepUuid?: string; message?: string }
  | { type: "url"; href: string; target?: "_blank" };

interface ComponentsButton {
  label: string;              // identificeert de knop
  children?: unknown;         // optionele rijke inhoud in plaats van het label
  action?: ComponentsButtonAction;
}

<!-- Vue heeft geen knopcomponent: koppel mountButtons in een eigen wrapper -->
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { mountButtons } from "@leadbot/components";

const el = ref<HTMLElement>();
let handle;

onMounted(() => {
  handle = mountButtons(el.value, {
    leadbotId: 18,
    id: "COMPONENT-ID",
    buttons: [
      { label: "Praat met sales", action: { type: "open_widget", stepUuid: "CHAT-STAP-ID", message: "Praat met sales" } },
      { label: "Documentatie", action: { type: "url", href: "/docs", target: "_blank" } },
    ],
  });
});
onUnmounted(() => handle?.destroy());
</script>

<template>
  <div ref="el" />
</template>

• leadbotId — number — De component-LeadBot van dit component. Optioneel als de provider of init() er al een levert.
• id — string — De UUID van de gepubliceerde stap. Optioneel bij een volledig expliciete buttons-lijst, maar zonder id worden klikken niet naar de collector gestuurd.
• buttons — ComponentsButton[] — Overschrijft de gepubliceerde inhoud. Anders dan gepubliceerde opties rendert een expliciete lijst ook als de bot niet gepubliceerd is. Een knop zonder eigen action erft de actie van de gepubliceerde knop op dezelfde positie.
• eventLabel — string — Label bij de klikgebeurtenis. Standaard het event label van de gepubliceerde stap.
• onSelect — (button) => void — Wordt aangeroepen vóór de actie van de knop.
• children (React) — Op LeadBotButton: de inhoud van de knop, tekst of willekeurige JSX zoals een icoon. Bij rijke inhoud zet je label apart, want het label identificeert de knop voor tracking en onSelect.

Let op bij knoplabels en links

Labels identificeren knoppen — ze zijn de sleutel, de payload van onSelect en het aanknopingspunt voor rijke inhoud. Twee knoppen met hetzelfde label botsen dus; de SDK schrijft in dat geval een waarschuwing naar de console.

Bij een url-actie worden alleen http:, https:, tel: en mailto: uitgevoerd. Andere schema's worden genegeerd. Met target "_blank" gaat de link in een nieuw venster open, met noopener en noreferrer.

Ingesloten flow — LeadBotFlow / mountFlow

Rendert een complete, gewone LeadBot-flow inline in je pagina, zonder widget-omhulsel. De LeadBot moet daarvoor in zijn instellingen op Headless staan.

De boot-fetch selecteert de bot op ID, telt de paginaweergave en respecteert de zichtbaarheidsregels van de bot: valt de pagina daarbuiten, dan rendert er niets. De basiskleur uit de publicatie wordt automatisch toegepast; baseColor overschrijft hem.

De gesprekstoestand wordt hersteld bij navigatie als de bot 'open houden bij navigatie' aan heeft staan (per LeadBot opgeslagen 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 mountFlow-aanroepen met verschillende leadbotId's kunnen naast elkaar bestaan, elk met een eigen gesprekstoestand. De gewone widget blijft ongemoeid.

• leadbotId — number — De LeadBot die op Headless staat. Valt terug op de leadbotId uit init().
• typingIndicator — boolean — Typstippen en de korte vertraging tussen stappen, zoals in de widget. Standaard true.
• layout — { maxWidth?, align? } — Schrijft --leadbot-flow-max-width en --leadbot-flow-align op de container. align accepteert flex-start, center, flex-end of stretch.
• Alle configuratiesleutels — baseColor, domainKey, apiHost, path, language en preview gelden hier ook.

De gewone widget aansturen

Als de scripttag van de gewone LeadBot op dezelfde pagina staat, kun je de widget vanuit je eigen code openen en sluiten. Alle drie de pakketten exporteren deze functies.

Ze zijn veilig aan te roepen als de widget er niet is — dan gebeurt er simpelweg niets — en het maakt niet uit welk script als eerste geladen is.

Geef je zowel stepUuid als message mee, dan navigeert de widget naar die stap en stuurt het bericht als eerste beurt van de bezoeker. Alles daaronder (geen parameters, of maar één van de twee) is een gewone open-actie.

Gespreksstarters vanuit je eigen knoppen of een eigen invoerveld? Zie De widget openen vanuit je eigen code .

import { openWidget, closeWidget, toggleWidget } from "@leadbot/components";

openWidget();
openWidget({ stepUuid: "CHAT-STAP-ID", message: "Praat met sales" });
closeWidget();
toggleWidget();

import { openWidget, closeWidget, toggleWidget } from "@leadbot/react";

openWidget();
openWidget({ stepUuid: "CHAT-STAP-ID", message: "Praat met sales" });
closeWidget();
toggleWidget();

import { openWidget, closeWidget, toggleWidget } from "@leadbot/vue";

openWidget();
openWidget({ stepUuid: "CHAT-STAP-ID", message: "Praat met sales" });
closeWidget();
toggleWidget();

clearFlowCache()

De opgehaalde configuratie wordt voor de levensduur van de pagina in het geheugen gehouden. clearFlowCache() gooit die weg, zodat de volgende mount — of een routewissel in een single-page app — hem opnieuw ophaalt. Handig in een editor of voorbeeldweergave die een wijziging moet oppikken zonder een volledige herlaadbeurt.

Wordt door alle drie de pakketten geëxporteerd.

Server-side rendering

De React- en Vue-wrappers renderen op de server een leeg host-element en koppelen het component pas na hydratie (useEffect respectievelijk onMounted). Je hebt in Next.js dus geen dynamic(..., { ssr: false }) nodig, en in Nuxt geen ClientOnly.

Gegevens en gebeurtenissen

Wat er onder water gebeurt bij elke interactie.

• Bezoekersidentiteit — Een UUID in localStorage onder de sleutel leadbot_visitor_id. Dezelfde sleutel als de widget gebruikt, zodat dezelfde persoon in beide kanalen één bezoeker is.
• Paginacontext — Elke inzending gaat vergezeld van page_url, referrer en user_agent.
• Event labels — Worden serverzijde genormaliseerd naar de vaste analytics-taxonomie van LeadBot (bijvoorbeeld "LeadBot - Callback request - <jouw label>"), zodat je rapportages in GA en GTM consistent blijven met verkeer uit de widget.
• marksAsQualified — Markeert de bezoeker in het dashboard als gekwalificeerde lead, identiek aan een kwalificerende stap in de widget.
• Paginaweergaven — De boot-fetch per component-LeadBot per pagina telt de paginaweergave. Twee verschillende leadbotId's op één pagina zijn twee paginaweergaven; een routewissel in een single-page app telt er opnieuw één.

TypeScript

Alle pakketten leveren types mee. De optie-interfaces zijn geëxporteerd vanuit @leadbot/components en worden opnieuw geëxporteerd door de wrappers: AgentChatOptions, AgentChatMessage, AgentChatLabels, FormOptions, FormPresetOptions, FormLabels, ComponentsFormField, ComponentsStepType, WhatsAppOptions, WhatsAppLabels, ButtonsOptions, ComponentsButton, ComponentsButtonAction, FlowOptions, FlowLayout, LeadbotComponentsConfig en MountHandle.

import type {
  AgentChatOptions,
  FormOptions,
  ComponentsFormField,
  LeadbotComponentsConfig,
  MountHandle,
} from "@leadbot/components";

import type {
  AgentChatOptions,
  FormOptions,
  ComponentsFormField,
  LeadbotComponentsConfig,
  MountHandle,
} from "@leadbot/react";

import type {
  AgentChatOptions,
  FormOptions,
  ComponentsFormField,
  LeadbotComponentsConfig,
  MountHandle,
} from "@leadbot/vue";

Foutmeldingen die je kunt tegenkomen

• Inzendingen geweigerd met 403 — Componenten staan niet aan voor het domein, of het abonnement is gesloten. Zet componenten aan in de domeininstellingen.
• De chat meldt dat de assistent niet gevonden kan worden — De gepubliceerde stap heeft geen agent, of de agent is niet uitgerold. Controleer de agent en publiceer opnieuw.
• Foutmelding onder een invoerveld na versturen — Servervalidatie heeft de waarde afgekeurd. De melding legt uit waarom.
• Er rendert niets — domainKey ontbreekt, de bot is niet gepubliceerd, of het container-element stond nog niet in de DOM op het moment van koppelen.
• Een fout bij het koppelen over apiHost — Zowel apiHost als apiBase ontbreken. Dat is expres een harde fout, zodat inzendingen nooit stilletjes naar je eigen origin gaan.