Zum Hauptinhalt springen

Individualisierung

Der Online-Assistenten kann individuellen Bedürfnissen anpassen werden.

Einleitung

Die Signatur der Initialisierungs-Funktion sieht wie folgt aus:

Lokalleads.init(licenceCode, options);
caution

licenceCode und selector sind Pflichtangaben.

Minimale Konfiguration - Beispiel

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

Konfiguration

Die options können jedoch durch weiteren Angaben ergänzt werden.

NameTypBeschreibung
selectorstringHTML-Element in das der Rechner geladen werden soll. In der Regel sollte dafür das id Attribut verwendet weden.
customStyleCustomStylePrimärfarbe (z.B. für den "Weiter"-Button)
cookiesAllowedbooleanSchaltet Cookies komplett aus. Default ist true. Wenn Cookies grundsätzlich erlaubt sind, wird dem Benutzer ein Cookie-Banner angezeigt.

CustomStyle

NameTypBeschreibung
primaryColorstringPrimärfarbe (z.B. für den "Weiter"-Button)
primaryFontColorstringPrimärfarbe für Schrift
textColorLightstringTexte die weniger präsenz erfordern
linkColorstringSchriftfarbe für Links
fontstringSchriftart und -größe
backgroundColorstringHintergrundfarbe (z.B. "red" oder "#C9372C")
elementsElementsAnpassung der Formular-Elemente
cssstringURL für eigenes CSS. Klassen-Name mit dem Präfix „cc_“ sind stabil und können überschrieben werden (nur für Enterprise Kunden). Z.B. https://offerio.meister1.com/custom-css/default.css
progressbarProgressbarAnpassung der Progressbar
buttonProgressButtonAnpassung der "Weiter" und "Zurück" Schaltflächen.
infoElementInfoAnpassung der "Weiter" und "Zurück" Schaltflächen.
alignenum (center)Ermöglicht die zentrale Ausrichtung des Inhalts.
oneClickEnabledbooleanDefault ist false. "OneClick" bedeutet, dass man grundsätzlich nur eine Frage pro Screen hat und mit der Auswahl sofort zur nächsten Frage weitergeleitet wird.

Elements

NameTypBeschreibung
imageSelectImageSelectAnpassung der bebilderten Auswahlelemente.

ImageSelect

NameTypBeschreibung
shapeenum (square)Default ist null.
showDividerbooleanDefault ist true.
fontFamilystringFont family (z.B. "Times New Roman")
fontSizestringFont size (z.B. "12px")

Progressbar

NameTypBeschreibung
visualizeCompletedGroupsbooleanMarkiert die bisher fertig beantworteten Abfragegruppen in der Progressbar grün. Example
heightstringErlaubt die Anpassung der Höhe der Progressbar. Beispiel: "3px"

ProgressButton

NameTypBeschreibung
shapeenum (circle)Default ist null.
widthstringErlaubt die Anpassung der Breite der Progressbuttons. Beispiel: "60px"
showLabelbooleanDefault ist true.
positionenum (top, bottom)Default ist bottom.

ElementInfo

NameTypBeschreibung
iconenum (light)Default ist null.

Ankersprung optimieren

scrollOffset

Wenn der Benutzer im Online-Assistenten auf die nächste Seite wechselt, dann springt der Assistent wieder nach oben. Manche Webseiten haben jedoch ein globales Seiten-Element, welches sich als Overlay über die Seite legt. Mit dem scrollOffset kann das Ziel des Sprungs für verschiedene Gerätegrößen angepasst werden.

info

Kann positive und negative Werte enthalten. Negative Werte verschieben den Sprung weiter nach oben.

NameTypBeschreibung
mobilenumberOffset für Bildschirmgröße mind. 0x550 Pixel
tabletnumberOffset für Bildschirmgröße mind. 551x991 Pixel
desktopnumberOffset für Bildschirmgröße mind. 992x1199 Pixel
wideScreennumberOffset für Bildschirmgröße mind. 1200x10000 Pixel

Erweiterte Konfiguration - Beispiel

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,
},
};