Personnalisation

L'assistant en ligne peut être adapté aux exigences individuelles.

Introduction

La signature de la fonction d'initialisation est la suivante :

Lokalleads.init(licenceCode, options);

attention

licenseCode et selector sont obligatoires.

Configuration minimale - exemple

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

Configuration

Cependant, les options peuvent être complétées par des informations supplémentaires.

Nom	Type	Description
selector	string	Élément HTML dans lequel le calculateur doit être chargé. En règle générale, l'attribut id doit être utilisé à cet effet.
customStyle	CustomStyle	Couleur principale (ex. pour le bouton "Suivant")
cookiesAllowed	boolean	Désactive complètement les cookies si false. La valeur par défaut est true. Si les cookies sont généralement autorisés, une bannière de cookies est affichée à l'utilisateur.

CustomStyle

Nom	Type	Description
primaryColor	string	Couleur principale (ex. pour le bouton "Suivant")
primaryFontColor	string	Couleur principale pour la police
textColorLight	string	Textes qui nécessitent moins de présence
linkColor	string	Couleur de police pour les liens
font	string	Type et taille de police
backgroundColor	string	Couleur d'arrière-plan (ex. "red" ou "#C9372C")
elements	Elements	Personnalisation des éléments de formulaire
css	string	URL pour votre propre CSS. Les noms de classe avec le préfixe "cc_" sont stables et peuvent être remplacés (pour les clients Enterprise uniquement). Ex. https://offerio.meister1.com/custom-css/default.css
progressbar	Progressbar	Personnalisation de la barre de progression
button	ProgressButton	Personnalisation des boutons "Suivant" et "Retour".
info	ElementInfo	Personnalisation des boutons "Suivant" et "Retour".
align	enum (center)	Permet d'aligner le contenu au centre.
oneClickEnabled	boolean	La valeur par défaut est false. "OneClick" signifie que vous avez essentiellement une question par écran et lorsque vous faites votre sélection, vous êtes immédiatement redirigé vers la question suivante.

Elements

Nom	Type	Description
imageSelect	ImageSelect	Personnalisation des éléments de sélection illustrés.

ImageSelect

Nom	Type	Description
shape	enum (square)	La valeur par défaut est null.
showDivider	boolean	La valeur par défaut est true.
fontFamily	string	Famille de polices (ex. "Times New Roman")
fontSize	string	Taille de police (ex. "12px")

Progressbar

Nom	Type	Description
visualizeCompletedGroups	boolean	Marque les groupes de requêtes complétés en vert dans la barre de progression.
height	string	Permet d'ajuster la hauteur de la barre de progression. Exemple : "3px"

ProgressButton

Nom	Type	Description
shape	enum (circle)	La valeur par défaut est null.
width	string	Permet d'ajuster la largeur des boutons de progression. Exemple : "60px"
showLabel	boolean	La valeur par défaut est true.
position	enum (top, bottom)	La valeur par défaut est bottom.

ElementInfo

Nom	Type	Description
icon	enum (light)	La valeur par défaut est null.

Optimiser le saut d'ancre

scrollOffset

Lorsque l'utilisateur passe à la page suivante dans l'assistant en ligne, l'assistant revient au début. Cependant, certains sites web ont un élément de page global qui est placé au-dessus de la page comme une superposition. Le scrollOffset peut être utilisé pour ajuster la cible du saut pour différentes tailles d'écran.

info

Peut contenir des valeurs positives et négatives. Les valeurs négatives déplacent le saut plus haut.

Nom	Type	Description
mobile	number	Décalage pour taille d'écran min. 0x550 pixels
tablet	number	Décalage pour taille d'écran min. 551x991 pixels
desktop	number	Décalage pour taille d'écran min. 992x1199 pixels
wideScreen	number	Décalage pour taille d'écran min. 1200x10000 pixels

Configuration avancée - exemple

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