Personalizzazione

L'assistente online può essere adattato alle esigenze individuali.

Introduzione

La firma della funzione di inizializzazione è la seguente:

Lokalleads.init(licenceCode, options);

attenzione

licenseCode e selector sono obbligatori.

Configurazione minima - esempio

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

Configurazione

Le options possono tuttavia essere integrate con ulteriori informazioni.

Nome	Tipo	Descrizione
selector	string	Elemento HTML nel quale deve essere caricato il calcolatore. Di norma si dovrebbe usare l'attributo id.
customStyle	CustomStyle	Colore primario (ad es. per il pulsante "Avanti")
cookiesAllowed	boolean	Disattiva completamente i cookie se false. Il valore predefinito è true. Se i cookie sono generalmente consentiti, viene mostrato all'utente un banner cookie.

CustomStyle

Nome	Tipo	Descrizione
primaryColor	string	Colore primario (ad es. per il pulsante "Avanti")
primaryFontColor	string	Colore primario per il testo
textColorLight	string	Testi che richiedono meno presenza visiva
linkColor	string	Colore del testo per i link
font	string	Tipo e dimensione del carattere
backgroundColor	string	Colore di sfondo (ad es. "red" o "#C9372C")
elements	Elements	Personalizzazione degli elementi del modulo
css	string	URL per il proprio CSS. I nomi delle classi con il prefisso "cc_" sono stabili e possono essere sovrascritti (solo per clienti Enterprise). Ad es. https://offerio.meister1.com/custom-css/default.css
progressbar	Progressbar	Personalizzazione della barra di avanzamento
button	ProgressButton	Personalizzazione dei pulsanti "Avanti" e "Indietro".
info	ElementInfo	Personalizzazione dei pulsanti "Avanti" e "Indietro".
align	enum (center)	Permette di allineare il contenuto al centro.
oneClickEnabled	boolean	Il valore predefinito è false. "OneClick" significa che si ha fondamentalmente una domanda per schermata e con la selezione si viene immediatamente inoltrati alla domanda successiva.

Elements

Nome	Tipo	Descrizione
imageSelect	ImageSelect	Personalizzazione degli elementi di selezione illustrati.

ImageSelect

Nome	Tipo	Descrizione
shape	enum (square)	Il valore predefinito è null.
showDivider	boolean	Il valore predefinito è true.
fontFamily	string	Famiglia di caratteri (ad es. "Times New Roman")
fontSize	string	Dimensione del carattere (ad es. "12px")

Progressbar

Nome	Tipo	Descrizione
visualizeCompletedGroups	boolean	Contrassegna in verde i gruppi di domande completati nella barra di avanzamento.
height	string	Permette di regolare l'altezza della barra di avanzamento. Esempio: "3px"

ProgressButton

Nome	Tipo	Descrizione
shape	enum (circle)	Il valore predefinito è null.
width	string	Permette di regolare la larghezza dei pulsanti di avanzamento. Esempio: "60px"
showLabel	boolean	Il valore predefinito è true.
position	enum (top, bottom)	Il valore predefinito è bottom.

ElementInfo

Nome	Tipo	Descrizione
icon	enum (light)	Il valore predefinito è null.

Ottimizzare il salto all'ancora

scrollOffset

Quando l'utente passa alla pagina successiva nel wizard online, il wizard torna in cima. Tuttavia, alcuni siti web hanno un elemento di pagina globale posizionato come overlay sulla pagina. Il scrollOffset può essere utilizzato per regolare la destinazione del salto per diverse dimensioni del dispositivo.

informazioni

Può contenere valori positivi e negativi. I valori negativi spostano il salto ulteriormente verso l'alto.

Nome	Tipo	Descrizione
mobile	number	Offset per dimensione schermo min. 0x550 pixel
tablet	number	Offset per dimensione schermo min. 551x991 pixel
desktop	number	Offset per dimensione schermo min. 992x1199 pixel
wideScreen	number	Offset per dimensione schermo min. 1200x10000 pixel

Configurazione avanzata - esempio

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