Personalizacja

Asystent online można dostosować do indywidualnych wymagań.

Wprowadzenie

Sygnatura funkcji inicjalizacyjnej jest następująca:

Lokalleads.init(licenceCode, options);

uwaga

licenseCode i selector są obowiązkowe.

Minimalna konfiguracja - przykład

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

Konfiguracja

Jednak options można uzupełnić o dalsze informacje.

Nazwa	Typ	Opis
selector	string	Element HTML, do którego ma być załadowany kalkulator. Zasadniczo do tego celu należy używać atrybutu `id`.
customStyle	CustomStyle	Kolor podstawowy (np. dla przycisku „Dalej")
cookiesAllowed	boolean	Całkowicie wyłącza pliki cookie, jeśli ustawiono `false`. Domyślnie `true`. Jeśli pliki cookie są ogólnie dozwolone, użytkownikowi wyświetlany jest baner cookie.

`CustomStyle`

Nazwa	Typ	Opis
primaryColor	string	Kolor podstawowy (np. dla przycisku „Dalej")
primaryFontColor	string	Podstawowy kolor czcionki
textColorLight	string	Teksty wymagające mniejszej obecności
linkColor	string	Kolor czcionki dla linków
font	string	Rodzaj i rozmiar czcionki
backgroundColor	string	Kolor tła (np. „red" lub „#C9372C")
elements	Elements	Personalizacja elementów formularza
css	string	URL do własnego CSS. Nazwy klas z prefiksem „cc_" są stabilne i mogą być nadpisane (tylko dla klientów Enterprise). Np. https://offerio.meister1.com/custom-css/default.css
progressbar	Progressbar	Personalizacja paska postępu
button	ProgressButton	Personalizacja przycisków „Dalej" i „Wstecz".
info	ElementInfo	Personalizacja przycisków „Dalej" i „Wstecz".
align	enum (center)	Umożliwia wyśrodkowanie zawartości.
oneClickEnabled	boolean	Domyślnie `false`. „OneClick" oznacza, że masz zasadniczo jedno pytanie na ekranie i po dokonaniu wyboru jesteś natychmiast przekierowywany do następnego pytania.

`Elements`

Nazwa	Typ	Opis
imageSelect	ImageSelect	Personalizacja elementów wyboru z ilustracjami.

`ImageSelect`

Nazwa	Typ	Opis
shape	enum (square)	Domyślnie `null`.
showDivider	boolean	Domyślnie `true`.
fontFamily	string	Rodzina czcionek (np. „Times New Roman")
fontSize	string	Rozmiar czcionki (np. „12px")

`Progressbar`

Nazwa	Typ	Opis
visualizeCompletedGroups	boolean	Oznacza ukończone grupy zapytań na pasku postępu na zielono.
height	string	Umożliwia dostosowanie wysokości paska postępu. Przykład: „3px"

`ProgressButton`

Nazwa	Typ	Opis
shape	enum (circle)	Domyślnie `null`.
width	string	Umożliwia dostosowanie szerokości przycisków postępu. Przykład: „60px"
showLabel	boolean	Domyślnie `true`.
position	enum (top, bottom)	Domyślnie `bottom`.

`ElementInfo`

Nazwa	Typ	Opis
icon	enum (light)	Domyślnie `null`.

Optymalizacja skoku do kotwicy

`scrollOffset`

Gdy użytkownik przełącza się na następną stronę w kreatorze online, kreator wraca na górę. Jednak niektóre strony internetowe mają globalny element strony umieszczony nad stroną jako nakładka. scrollOffset można użyć do dostosowania celu skoku dla różnych rozmiarów urządzeń.

informacja

Może zawierać wartości dodatnie i ujemne. Wartości ujemne przesuwają skok wyżej.

Nazwa	Typ	Opis
mobile	number	Przesunięcie dla rozmiaru ekranu min. 0x550 pikseli
tablet	number	Przesunięcie dla rozmiaru ekranu min. 551x991 pikseli
desktop	number	Przesunięcie dla rozmiaru ekranu min. 992x1199 pikseli
wideScreen	number	Przesunięcie dla rozmiaru ekranu min. 1200x10000 pikseli

Zaawansowana konfiguracja - przykład

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

Wprowadzenie​

Minimalna konfiguracja - przykład​

Konfiguracja​

CustomStyle​

Elements​

ImageSelect​

Progressbar​

ProgressButton​

ElementInfo​

Optymalizacja skoku do kotwicy​

scrollOffset​

Zaawansowana konfiguracja - przykład​