Saltar al contenido principal
Cree plantillas de widget altamente personalizables codificándolas directamente en la plataforma Kameleoon.
Utilice uno de nuestros widgets listos para usar o pida ayuda a su desarrollador si no se siente cómodo programando.

​
Crear una nueva plantilla

Siga estos pasos para crear una nueva plantilla de widget con código:
  1. Haga clic en Studio > Widgets > Nuevo widget.
  2. Seleccione Usando código.
  3. Asigne un nombre a su plantilla, asocie un sitio web y, opcionalmente, escriba una descripción y añada etiquetas.
  4. Haga clic en Crear.

​
El editor de plantillas

El editor de plantillas contiene tres áreas distintas.

​
Panel izquierdo

La esquina superior izquierda muestra el título de su plantilla. Pase el cursor sobre el título y haga clic en el icono del lápiz para renombrar la plantilla. Acceda en este panel a dos pasos esenciales para crear su plantilla:
  • Código a ejecutar
  • Formulario de configuración

​
Zona de contenido

Introduzca el código de su plantilla en esta área.

​
Codificar la plantilla

Utilice el área central de contenido para codificar su plantilla de widget. Este código genera el widget en la página de su sitio web. El editor proporciona tres pestañas para distintos tipos de código:
  • JS (JavaScript)
  • CSS
  • HTML
De forma predeterminada, la pestaña JS está activa. Escriba su código en el área en blanco. Para validar su plantilla, introduzca al menos 10 caracteres en la pestaña JS. JavaScript es suficiente para crear su plantilla, pero también puede añadir HTML o CSS. Utilice este CSS predeterminado para dar formato a elementos, como listas y campos de texto, según la hoja de estilos de Kameleoon: 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

body * {
     font-family: "Montserrat";
     font-size: 12px;
}

fieldset {
     border: none;
     border-bottom: 1px solid #dedede;
}

label {
     display: block;
     font-size: 12px;
     margin-bottom: 5px;
}

input, select, textarea {
     display: block;
     padding: 8px 12px;
     width: 100%;
     border-radius: 4px;
     border: 1px solid #eeeeee;
     outline: none;
     font: 400 12px "Roboto", sans-serif;
     color: #333333;
     background: white;
     -webkit-transition: border-color 0.25s ease;
     -o-transition: border-color 0.25s ease;
     transition: border-color 0.25s ease;
}

input:hover, select:hover, textarea:hover,
input:focus, select:focus, textarea:focus {
     border-color: #c6c6c6;
}

textarea {
     resize: vertical;
}

input[type="checkbox"] {
     display: inline-block;
     width: auto;
     position: relative;
     top: 1px;
}

input[type="checkbox"] + label {
     display: inline-block;
}
Después de escribir el código, haga clic en Formulario de configuración en el panel izquierdo para pasar al paso de la interfaz de usuario.

​
Caso especial: variables

Para utilizar un campo (una variable) especificado por el usuario en su widget, añada el atributo templateData al campo correspondiente en la pestaña Interfaz de usuario. Ejemplo: input id="message" type="text" templateData="messageContent" placeholder="Type your message" Para recuperar la variable, utilice UserData en la pestaña Código a ejecutar. Ejemplo: var userInput = UserData.messageContent; alert(userInput);

​
Crear el formulario de configuración

Interfaz del formulario de configuración
Utilice la pestaña Formulario de configuración para crear la interfaz de usuario que los miembros del equipo utilizan para configurar su widget. En esta sección solo están disponibles las pestañas HTML y CSS.

​
Pestaña HTML

Introduzca el código HTML de su formulario de configuración en la pestaña HTML. Los usuarios interactúan con este formulario para configurar su plantilla y crear un widget. Cada campo del formulario debe incluir un atributo con la siguiente sintaxis: templateData="[NameOfYourChoice]".

​
Pestaña CSS

Los estilos que añade en la pestaña CSS se aplican al formulario de la interfaz de usuario. Este paso es opcional.
Para finalizar su plantilla, haga clic en Activar en la esquina superior derecha de la página del editor.
Si introduce menos de 10 caracteres en el campo de JavaScript, Activar no estará disponible.

​
Gestionar plantillas creadas

Después de crear una plantilla, aparece como una tarjeta en el panel de Widgets.

​
Utilizar el widget en un experimento

Para asociar un widget de código a un experimento:
  1. Abra o cree un experimento utilizando el Editor gráfico.
  2. En la barra lateral izquierda, haga clic en Añadir junto a Elementos.
  3. En la barra lateral Añadir elemento que se abre, haga clic en Widgets.
  4. Seleccione su widget personalizado de la lista y configúrelo.
Añadir widget