Skip to main content

Individualisierung

The online assistant can be adapted to individual requirements.

Introduction

The signature of the initialization function is as follows:

Lokalleads.init(licenceCode, options);
caution

licenseCode and selector are mandatory.

Minimum configuration - example

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

Configuration

However, the options can be supplemented with further information.

NameTypeDescription
selectorstringHTML element into which the calculator is to be loaded. As a rule, the id attribute should be used for this.
customStyleCustomStylePrimary color (e.g. for the "Next" button)
cookiesAllowedbooleanSwitches cookies off completely if false. Default is true. If cookies are generally allowed, a cookie banner is displayed to the user.

CustomStyle

NameTypeDescription
primaryColorstringPrimary color (e.g. for the "Next" button)
primaryFontColorstringPrimary color for font
textColorLightstringTexts that require less presence
linkColorstringFont color for links
fontstringFont type and size
backgroundColorstringBackground color (e.g. "red" or "#C9372C")
elementsElementsCustomization of the form elements
cssstringURL for your own CSS. Class-names with the prefix "cc_" are stable and can be overwritten (for Enterprise customers only). E.g. https://offerio.meister1.com/custom-css/default.css
progressbarProgressbarCustomization of the progress bar
buttonProgressButtonCustomization of the "Next" and "Back" buttons.
infoElementInfoCustomization of the "Next" and "Back" buttons.
alignenum (center)Allows to align the content central.
oneClickEnabledbooleanDefault is false. "OneClick" means that you basically have one question per screen and when you make your selection you are immediately forwarded to the next question.

Elements

NameTypeDescription
imageSelectImageSelectCustomization of the illustrated selection elements.

ImageSelect

NameTypeDescription
shapeenum (square)Default is null.
showDividerbooleanDefault is true.
fontFamilystringFont family (e.g. "Times New Roman")
fontSizestringFont size (e.g. "12px")

Progressbar

NameTypeDescription
visualizeCompletedGroupsbooleanMarks the completed query groups in the progress bar in green. Example
heightstringAllows the height of the progress bar to be adjusted. Example: "3px"

ProgressButton

NameTypeDescription
shapeenum (circle)Default is null.
widthstringAllows the width of the progress buttons to be adjusted. Example: "60px"
showLabelbooleanDefault is true.
positionenum (top, bottom)Default is bottom.

ElementInfo

NameTypeDescription
iconenum (light)Default is null.

Optimize anchor jump

scrollOffset

If the user switches to the next page in the online wizard, the wizard jumps back to the top. However, some websites have a global page element which is placed over the page as an overlay. The scrollOffset can be used to adjust the target of the jump for different device sizes.

info

Can contain positive and negative values. Negative values move the jump further upwards.

NameTypDescription
mobilenumberOffset for screen size min. 0x550 pixels
tabletnumberOffset for screen size min. 551x991 pixels
desktopnumberOffset for screen size min. 992x1199 pixels
wideScreennumberOffset for screen size min. 1200x10000 pixels

Advanced configuration - example

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