Personalización

El asistente en línea se puede adaptar a los requisitos individuales.

Introducción

La firma de la función de inicialización es la siguiente:

Lokalleads.init(licenceCode, options);

precaución

licenseCode y selector son obligatorios.

Configuración mínima - ejemplo

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

Configuración

Sin embargo, las options se pueden complementar con información adicional.

Nombre	Tipo	Descripción
selector	string	Elemento HTML en el que se va a cargar la calculadora. Como regla general, el atributo `id` debe usarse para esto.
customStyle	CustomStyle	Color primario (p. ej., para el botón "Siguiente")
cookiesAllowed	boolean	Desactiva las cookies completamente si es `false`. El valor predeterminado es `true`. Si las cookies están permitidas en general, se muestra al usuario un banner de cookies.

`CustomStyle`

Nombre	Tipo	Descripción
primaryColor	string	Color primario (p. ej., para el botón "Siguiente")
primaryFontColor	string	Color primario para la fuente
textColorLight	string	Textos que requieren menos presencia
linkColor	string	Color de fuente para enlaces
font	string	Tipo y tamaño de fuente
backgroundColor	string	Color de fondo (p. ej., "red" o "#C9372C")
elements	Elements	Personalización de los elementos del formulario
css	string	URL para su propio CSS. Los nombres de clase con el prefijo "cc_" son estables y pueden sobrescribirse (solo para clientes Enterprise). P. ej. https://offerio.meister1.com/custom-css/default.css
progressbar	Progressbar	Personalización de la barra de progreso
button	ProgressButton	Personalización de los botones "Siguiente" y "Atrás".
info	ElementInfo	Personalización de los botones "Siguiente" y "Atrás".
align	enum (center)	Permite alinear el contenido de forma central.
oneClickEnabled	boolean	El valor predeterminado es `false`. "OneClick" significa que básicamente tiene una pregunta por pantalla y cuando hace su selección se le redirige inmediatamente a la siguiente pregunta.

`Elements`

Nombre	Tipo	Descripción
imageSelect	ImageSelect	Personalización de los elementos de selección ilustrados.

`ImageSelect`

Nombre	Tipo	Descripción
shape	enum (square)	El valor predeterminado es `null`.
showDivider	boolean	El valor predeterminado es `true`.
fontFamily	string	Familia de fuentes (p. ej., "Times New Roman")
fontSize	string	Tamaño de fuente (p. ej., "12px")

`Progressbar`

Nombre	Tipo	Descripción
visualizeCompletedGroups	boolean	Marca los grupos de consulta completados en la barra de progreso en verde.
height	string	Permite ajustar la altura de la barra de progreso. Ejemplo: "3px"

`ProgressButton`

Nombre	Tipo	Descripción
shape	enum (circle)	El valor predeterminado es `null`.
width	string	Permite ajustar el ancho de los botones de progreso. Ejemplo: "60px"
showLabel	boolean	El valor predeterminado es `true`.
position	enum (top, bottom)	El valor predeterminado es `bottom`.

`ElementInfo`

Nombre	Tipo	Descripción
icon	enum (light)	El valor predeterminado es `null`.

Optimizar el salto de ancla

`scrollOffset`

Cuando el usuario cambia a la siguiente página en el asistente en línea, el asistente vuelve al principio. Sin embargo, algunos sitios web tienen un elemento de página global que se coloca sobre la página como una superposición. El scrollOffset se puede usar para ajustar el destino del salto para diferentes tamaños de dispositivo.

info

Puede contener valores positivos y negativos. Los valores negativos mueven el salto más hacia arriba.

Nombre	Tipo	Descripción
mobile	number	Desplazamiento para tamaño de pantalla mín. 0x550 píxeles
tablet	number	Desplazamiento para tamaño de pantalla mín. 551x991 píxeles
desktop	number	Desplazamiento para tamaño de pantalla mín. 992x1199 píxeles
wideScreen	number	Desplazamiento para tamaño de pantalla mín. 1200x10000 píxeles

Configuración avanzada - ejemplo

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

Introducción​

Configuración mínima - ejemplo​

Configuración​

CustomStyle​

Elements​

ImageSelect​

Progressbar​

ProgressButton​

ElementInfo​

Optimizar el salto de ancla​

scrollOffset​

Configuración avanzada - ejemplo​