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);

Es gibt nur 2 Pflichtangaben: licenceCode und selector

Minimale Konfig - 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.

Erweiterte Konfig - Beispiel

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

Layout / Style

customStyle

AttributBeschreibung
primaryColorPrimärfarbe (z.B. für den "Weiter"-Button)
primaryFontColorPrimärfarbe für Schrift
textColorLightTexte die weniger präsenz erfordern
linkColorSchriftfarbe für Links
fontSchriftart und -größe

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.

AttributBeschreibung
mobileOffset für Bildschirmgröße mind. 0x550 Pixel
tabletOffset für Bildschirmgröße mind. 551x991 Pixel
desktopOffset für Bildschirmgröße mind. 992x1199 Pixel
wideScreenOffset für Bildschirmgröße mind. 1200x10000 Pixel

Vollständige Konfiguration - Beispiel

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