LeadBot Support

Support / Headless

Componenten stylen zoals jij wil

Componenten worden in je eigen pagina getekend, niet in een afgeschermd paneel. Je eigen CSS komt er dus gewoon bij. Van één kleur aanpassen tot alles zelf opbouwen — hieronder alle niveaus, met onderaan de technische details voor developers.

Drie manieren om te stylen

Je kiest zelf hoe ver je gaat. Elke stap bouwt op de vorige voort.

  • 1. Tokens aanpassen — Overschrijf een handjevol CSS-variabelen — kleur, lettertype, afronding — en de componenten volgen. Dit is voor de meeste sites genoeg.
  • 2. Je eigen CSS-regels — Alles wat een token niet dekt, stel je in met een gewone CSS-regel op de klassenaam. Zonder !important.
  • 3. Helemaal zelf opbouwen — Importeer de meegeleverde stylesheet niet. Je krijgt dan kale HTML met vaste klassenamen die je volledig zelf vormgeeft.

De basiskleur instellen

De snelste ingreep zit in het dashboard zelf. Op het tabblad Instellingen van je component-LeadBot stel je onder Vormgeving de basiskleur in. Die kleur wordt opgenomen in de codesnippet en gebruikt als accentkleur van de ingesloten componenten: knoppen, focusranden, de chatbellen van de bezoeker en andere accenten.

In de code herken je hem als baseColor. Je kunt hem daar ook per component overschrijven als één plek een andere kleur nodig heeft.

Het tabblad Instellingen van een component-LeadBot met de basiskleurkiezer
De basiskleur wordt automatisch in de codesnippet meegegeven.

Design tokens

Alles wat vaak aangepast wordt, is een CSS-variabele. Je zet ze op je eigen sectie, op body, of op :root — de componenten erven de waarde. Dit zijn de tokens waar je het meest aan hebt: 

.mijn-sectie {
  --leadbot-primary: #059669;              /* knoppen, accenten, focusrand */
  --leadbot-font-family: "Inter", sans-serif;
  --leadbot-font-size: 15px;
  --leadbot-radius-card: 4px;              /* afronding van het paneel */
  --leadbot-radius-md: 8px;                /* afronding van knoppen */
  --leadbot-spacing-card: 20px;            /* binnenmarge van het paneel */
  --leadbot-available-height: 480px;       /* maximale hoogte van chat en formulier */
  --leadbot-form-max-width: none;          /* formulier op volle breedte */
}
  • Kleuren — --leadbot-primary voor je accentkleur, --leadbot-color-text en de -strong / -body / -muted / -subtle varianten voor tekst, --leadbot-color-surface en -surface-alt / -sunken voor achtergronden, --leadbot-color-border voor lijnen.
  • Typografie — --leadbot-font-family is bewust niet ingevuld, zodat het lettertype van je pagina er standaard doorheen komt. --leadbot-font-size en de -sm / -xs / -lg varianten stellen de groottes in.
  • Vorm en ruimte — --leadbot-radius-card, -sm, -md en -pill voor afronding; --leadbot-spacing-card voor de binnenmarge van panelen; --leadbot-shadow-sm, -md en -lg voor schaduw.
  • Afmetingen — --leadbot-available-height, --leadbot-form-max-width en --leadbot-form-max-height. Zet een breedte of hoogte op none om de begrenzing weg te halen.
  • Feedback — --leadbot-color-error, --leadbot-color-success en de bijbehorende achtergrond- en randkleuren voor foutmeldingen en bevestigingen.
  • WhatsApp — Een eigen set voor het WhatsApp-blok: --leadbot-whatsapp-green, -wallpaper, -bubble en verwanten, zodat je die look kunt aanpassen zonder de rest te raken.
  • Beweging — --leadbot-duration-fast, -normal en -slow plus de bijbehorende easing-curves.

Donkere modus

Er zit een complete donkere set tokens in. Zet data-leadbot-theme="dark" op html, body of op een willekeurige sectie: elk component daarbinnen schakelt om — achtergronden, tekst, randen, foutkleuren en de achtergrond van het WhatsApp-blok. De layout en de merkkleuren blijven zoals ze waren.

Wil je de voorkeur van het besturingssysteem volgen, gebruik dan data-leadbot-theme="auto".

Omdat het alleen tokens zijn, blijven je eigen overschrijvingen in beide gevallen winnen. 

<html data-leadbot-theme="dark">   <!-- of "auto" -->

<!-- of alleen voor één sectie -->
<section data-leadbot-theme="dark">...</section>

Layout: het paneel weghalen

De standaardvormgeving is die van de widget: een kaart met een rand, een schaduw, een maximale breedte en een aparte balk onderaan voor de knop. Op een landingspagina wil je dat vaak niet.

Zet daarvoor chrome op false. Dan verdwijnen de kaart, de maximumafmetingen, het scrollgebied en de knoppenbalk; wat overblijft is functionele styling — velden onder elkaar, focusranden, fout- en succesmeldingen. Het formulier voegt zich dan naar jouw pagina.

Wil je de kaart houden maar de begrenzing kwijt, zet dan --leadbot-form-max-width of --leadbot-form-max-height op none. 

mountForm(el, { leadbotId: 18, id: "COMPONENT-ID", chrome: false });
<LeadBotForm leadbotId={18} id="COMPONENT-ID" chrome={false} />
<LeadBotForm :leadbot-id="18" id="COMPONENT-ID" :chrome="false" />

Layout: alles op één regel

Voor een korte opt-in-rij — e-mailadres plus knop — zet je layout op "inline". De verstuurknop komt dan op dezelfde regel als het laatste veld; alle eerdere velden nemen de volle breedte.

Met hideLabels blijven de labels wel bestaan voor schermlezers, maar worden ze als placeholder getoond in plaats van erboven. Dat scheelt hoogte in een compacte rij.

De koppeling knop-aan-laatste-veld gaat op volgorde: verplaats je de velden in het dashboard, dan verschuift de knop mee. 

mountForm(el, {
  leadbotId: 18,
  id: "COMPONENT-ID",
  chrome: false,
  layout: "inline",
  hideLabels: true,
});
<LeadBotForm
  leadbotId={18}
  id="COMPONENT-ID"
  chrome={false}
  layout="inline"
  hideLabels
/>
<LeadBotForm
  :leadbot-id="18"
  id="COMPONENT-ID"
  :chrome="false"
  layout="inline"
  hide-labels
/>

Layout van een ingesloten flow

Een headless flow (LeadBotFlow / mountFlow) heeft zijn eigen layout-variabelen, los van de tokens hierboven. Je vindt ze in Headless: je hele LeadBot-flow in je pagina ; de rest van dit artikel geldt gewoon ook voor de flow.

Technisch: hoe de CSS-laag werkt

Vanaf hier wordt het technisch. Deze blokken zijn bedoeld voor de developer die de componenten in de huisstijl trekt.

De hele meegeleverde stylesheet staat in @layer leadbot. Cascade layers verliezen altijd van CSS zonder laag, ongeacht specificiteit. Concreet: elke gewone regel die jij schrijft wint van de standaardstyling, ook een enkele klasse-selector, en je hebt nooit !important nodig.

De token-defaults staan bewust op :root binnen die laag, niet op de mount-container. Daardoor is een waarde die jij op een willekeurige voorouder zet gewoon erfelijk en komt hij eroverheen; had de container ze zelf gedeclareerd, dan zou dat de overerving blokkeren.

Elke mount-container krijgt de klasse leadbot-components. Alle regels uit de stylesheet zijn daaraan opgehangen, dus dat is de wortel om vanaf te selecteren. Zet je chrome op false, dan komt daar leadbot-bare bij.

De componenten renderen in de light DOM — geen shadow DOM, geen iframe. Preact zit intern in het pakket en is onzichtbaar voor je eigen build. 

/* wint van de standaardstyling zonder !important */
.leadbot-components .leadbot-chatbot-message-bot {
  background: #111;
  color: #fff;
}

Technisch: de klassenamen

De klassenamen zijn stabiel en semantisch, en horen bij de publieke API van het pakket. Een test in de repository slaat aan zodra een component een klasse rendert die de stylesheet niet kent, dus ze lopen niet ongemerkt uit de pas.

  • Wortel — leadbot-components op elke mount-container, plus leadbot-bare als chrome uit staat.
  • Formulieren — leadbot-form, leadbot-callback-form, leadbot-email-request-form, leadbot-form-shell, leadbot-form-scroll, leadbot-form-title, leadbot-form-fields, leadbot-form-actions, leadbot-form-error, leadbot-form-complete, leadbot-success-message, leadbot-submit-btn (met leadbot-loading tijdens het versturen).
  • Formuliervelden — leadbot-field, leadbot-field-checkbox, leadbot-field-error, leadbot-field-error-text, leadbot-field-list, leadbot-field-list-label, leadbot-field-options, leadbot-field-option, leadbot-required-asterisk.
  • AI-chat — leadbot-chatbot-interface, leadbot-chatbot-header, leadbot-chatbot-header-info, leadbot-chatbot-title, leadbot-chatbot-status, leadbot-chatbot-online-dot, leadbot-chatbot-menu-btn, leadbot-chatbot-menu, leadbot-chatbot-menu-item, leadbot-chatbot-menu-item-icon, leadbot-chatbot-messages, leadbot-chatbot-message, leadbot-chatbot-message-bot, leadbot-chatbot-message-user, leadbot-chatbot-message-typing, leadbot-chatbot-message-content, leadbot-chatbot-thinking, leadbot-chatbot-thinking-text, leadbot-chatbot-typing-dots, leadbot-chatbot-citations, leadbot-chatbot-citation-item, leadbot-chatbot-citation-number, leadbot-chatbot-citation-url, leadbot-chatbot-starters, leadbot-chatbot-starter-btn, leadbot-chatbot-input, leadbot-chatbot-input-field, leadbot-chatbot-message-input, leadbot-chatbot-send-btn (de verstuurknop krijgt leadbot-chatbot-send-btn--active zodra er tekst staat).
  • WhatsApp — leadbot-whatsapp-interface, leadbot-whatsapp-header, leadbot-whatsapp-contact-info, leadbot-whatsapp-contact-details, leadbot-whatsapp-name, leadbot-whatsapp-status, leadbot-whatsapp-chat, leadbot-whatsapp-message, leadbot-whatsapp-message-content, leadbot-whatsapp-input-container, leadbot-whatsapp-input-bar, leadbot-whatsapp-message-field, leadbot-whatsapp-send-btn, leadbot-whatsapp-send-disabled.
  • Knoppen — leadbot-buttons op de groep, leadbot-buttons-btn op elke knop.
  • Ingesloten flow — leadbot-flow, leadbot-steps-container, leadbot-step-wrapper, leadbot-step-current, leadbot-step-buttons, leadbot-step-typing, leadbot-step-typing-dots, leadbot-card, leadbot-card__content, leadbot-message-row. Gebruik hier bij voorkeur de flow-tokens hierboven — die zijn stabieler dan de interne klassenamen.

Technisch: de DOM-structuur van een formulier

De klassenamen alleen zeggen niet welk element wat draagt. Dit is de boom die een formulier rendert. Deze nesting hoort bij de publieke API: hij verandert alleen bij een major-versie, en display: contents op een wrapper die als structureel gemarkeerd staat is een ondersteunde manier om een niveau plat te slaan. 

div.leadbot-components               je eigen container (ook .leadbot-bare)
└─ div.leadbot-form                  het oppervlak: achtergrond, rand, schaduw,
   │                                 afronding en maximumafmetingen
   │                                 (of .leadbot-callback-form /
   │                                 .leadbot-email-request-form)
   └─ form.leadbot-form-shell        (structureel) flex-kolom
      ├─ div.leadbot-form-scroll     (structureel) binnenmarge + scrollgebied
      │  ├─ div.leadbot-form-title
      │  ├─ div.leadbot-form-error
      │  └─ fieldset.leadbot-form-fields          (structureel)
      │     └─ div.leadbot-field[data-field][data-field-type] × N
      │        ├─ label
      │        ├─ input | select | textarea       (+ .leadbot-field-error)
      │        └─ div.leadbot-field-error-text
      └─ div.leadbot-form-actions    eigen achtergrond + bovenrand
         └─ button.leadbot-submit-btn

/* na een geslaagde inzending wordt de hele boom vervangen door: */
div.leadbot-form.leadbot-form-complete
└─ div.leadbot-success-message

Technisch: selecteren op veld in plaats van op positie

Elk veld draagt data-field met de veldnaam en data-field-type met het genormaliseerde veldtype. Gebruik die in plaats van :nth-child: de volgorde van de velden komt uit het dashboard, dus een positiegebonden selector verspringt stilletjes zodra iemand daar een veld verplaatst. 

/* twee derde / een derde, op veldnaam in plaats van op positie */
.leadbot-components .leadbot-form-shell { grid-template-columns: 2fr 1fr; }
.leadbot-components [data-field="email"] { grid-column: 1; }

/* alle telefoonvelden, ongeacht hun naam */
.leadbot-components [data-field-type="tel"] input { letter-spacing: .02em; }

Technisch: recepten

Twee patronen die vaak terugkomen: een formulier op volle breedte zonder kaart, en pill-vormige velden. 

/* Formulier op volle breedte, zonder kaart — combineer met chrome: false */
.leadbot-components .leadbot-field input {
  border-radius: 999px;
  padding: 14px 18px;
}
.leadbot-components .leadbot-submit-btn {
  border-radius: 999px;
  width: auto;
  padding: 14px 28px;
}

/* Chatpaneel volledig in je eigen stijl */
.leadbot-components .leadbot-chatbot-interface { border: 0; box-shadow: none; }
.leadbot-components .leadbot-chatbot-messages { padding-inline: 0; }

Technisch: wat je zelf moet regelen

Twee dingen die bewust niet in het pakket zitten.

De spacing-schaal, ronde radii, vaste afmetingen (avatars, iconen, de verstuurknop) en een paar eenmalige schaduwen zijn expres géén token. Wil je die aanpassen, schrijf dan een gewone regel op de klasse; dat is niveau 2 hierboven.

En: het componentenpakket levert geen regels voor focus-visible, prefers-reduced-motion of responsive breakpoints — dat zijn widget-only onderdelen. Vervang je styles.css helemaal door je eigen stylesheet, dan zijn die toestanden dus aan jou.

Kom je er niet uit?

Geen ticketnummer — je spreekt altijd een mens. We denken graag met je mee, van installatie tot optimalisatie.

info@leadbot.nl 085 0600816 WhatsApp Neem contact op →
Het LeadBot-team aan het werk op kantoor