Aanpassing

De online assistent kan worden aangepast aan individuele vereisten.

Introductie

De handtekening van de initialisatiefunctie is als volgt:

Lokalleads.init(licenceCode, options);

pas op

licenseCode en selector zijn verplicht.

Minimale configuratie - voorbeeld

<script type="text/javascript">
    const licenceCode = "LL-XYZ123456789";
    const options = {
        selector: "#meister1"
    }
    Lokalleads.init(licenceCode, options);
</script>

Configuratie

De options kunnen echter worden aangevuld met verdere informatie.

Naam	Type	Beschrijving
selector	string	HTML-element waarin de calculator moet worden geladen. Als vuistregel moet hiervoor het id-attribuut worden gebruikt.
customStyle	CustomStyle	Primaire kleur (bijv. voor de knop "Volgende")
cookiesAllowed	boolean	Schakelt cookies volledig uit als false. Standaard is true. Als cookies in het algemeen zijn toegestaan, wordt aan de gebruiker een cookiebanner getoond.

CustomStyle

Naam	Type	Beschrijving
primaryColor	string	Primaire kleur (bijv. voor de knop "Volgende")
primaryFontColor	string	Primaire kleur voor lettertype
textColorLight	string	Teksten die minder aanwezigheid vereisen
linkColor	string	Lettertypekleur voor koppelingen
font	string	Lettertype en -grootte
backgroundColor	string	Achtergrondkleur (bijv. "red" of "#C9372C")
elements	Elements	Aanpassing van de formulierelementen
css	string	URL voor uw eigen CSS. Klassenamen met het voorvoegsel "cc_" zijn stabiel en kunnen worden overschreven (alleen voor Enterprise-klanten). Bijv. https://offerio.meister1.com/custom-css/default.css
progressbar	Progressbar	Aanpassing van de voortgangsbalk
button	ProgressButton	Aanpassing van de knoppen "Volgende" en "Terug".
info	ElementInfo	Aanpassing van de knoppen "Volgende" en "Terug".
align	enum (center)	Maakt het mogelijk de inhoud centraal uit te lijnen.
oneClickEnabled	boolean	Standaard is false. "OneClick" betekent dat u in principe één vraag per scherm heeft en wanneer u uw selectie maakt, wordt u onmiddellijk doorgestuurd naar de volgende vraag.

Elements

Naam	Type	Beschrijving
imageSelect	ImageSelect	Aanpassing van de geïllustreerde selectie-elementen.

ImageSelect

Naam	Type	Beschrijving
shape	enum (square)	Standaard is null.
showDivider	boolean	Standaard is true.
fontFamily	string	Lettertyepfamilie (bijv. "Times New Roman")
fontSize	string	Lettergrootte (bijv. "12px")

Progressbar

Naam	Type	Beschrijving
visualizeCompletedGroups	boolean	Markeert de voltooide querygroepen in de voortgangsbalk in groen.
height	string	Maakt het mogelijk de hoogte van de voortgangsbalk aan te passen. Voorbeeld: "3px"

ProgressButton

Naam	Type	Beschrijving
shape	enum (circle)	Standaard is null.
width	string	Maakt het mogelijk de breedte van de voortgangsknoppen aan te passen. Voorbeeld: "60px"
showLabel	boolean	Standaard is true.
position	enum (top, bottom)	Standaard is bottom.

ElementInfo

Naam	Type	Beschrijving
icon	enum (light)	Standaard is null.

Ankersprongoptimalisatie

scrollOffset

Wanneer de gebruiker naar de volgende pagina in de online wizard gaat, springt de wizard terug naar boven. Sommige websites hebben echter een globaal pagina-element dat als overlay over de pagina wordt geplaatst. De scrollOffset kan worden gebruikt om het doel van de sprong aan te passen voor verschillende apparaatformaten.

info

Kan positieve en negatieve waarden bevatten. Negatieve waarden verplaatsen de sprong verder omhoog.

Naam	Type	Beschrijving
mobile	number	Verschuiving voor schermformaat min. 0x550 pixels
tablet	number	Verschuiving voor schermformaat min. 551x991 pixels
desktop	number	Verschuiving voor schermformaat min. 992x1199 pixels
wideScreen	number	Verschuiving voor schermformaat min. 1200x10000 pixels

Geavanceerde configuratie - voorbeeld

const options = {
  selector: "#meister1",
  customStyle: {
    primaryColor: "#271f84",
    primaryFontColor: "#e87918",
    textColorLight: "green",
    linkColor: "red",
    font: "14px Arial",
    progressbar: {
      visualizeCompletedGroups: true,
    },
  },
  scrollOffset: {
    mobile: 0,
    tablet: 0,
    desktop: 0,
    wideScreen: 0,
  },
};