Create a widget template

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 08/12/2018

5 min


Was this content useful?

We offer a library of widgets to use into experiments. You can integrate these widgets inside your pages or above them. For more information on these predefined elements, read our documentation.

You can also create your own widget templates by coding them and use them in experiments and personalizations. This way you can make sure that the widgets perfectly fit your needs, as you create and customize them yourself. This expands experimentation and personalization possibilities.

Note: If you’re not comfortable with coding, use one of our ready-to-use widgets or ask your developer!

How to start the creation of a new template

To access the widget template interface, you must first be connected to your Kameleoon App.

Pull down the “Configuration” menu and click on “Widget templates”:

At the top right of the page that has just opened, the “New template” gives access to the creation pop-in.

How to complete the creation pop-in

In the pop-in you can to name your template, associate a website and optionally write a description and add tags.

Then click on “Create” to go to the next step.

The template editor

The template editor is made up of three distinct areas.

Left panel

The title of your template is displayed at the top left. On hover, an edit icon appears. You can click on it to rename your template.

This panel also gives you access to the two essential steps of creating your template:

  • The code to be run
  • The user interface

With one click, you can switch from one to the other.

Content zone

In this area in the center you enter your template’s code.

Bottom panel

On the bottom left of the page, you will find a notification area. By default, it indicates the date and time of the last save. To its right are two action buttons:

  • The “Save” button that saves template edit as a draft. You stay in the editor.
  • The button “Activate” which validates the edition and actives the template. You leave the editor to return to the template management page.

NB : You don’t have to save when you switch tabs.

If you edit an existing and activated template, these two buttons become “Edit” (to save the modification of the draft) and “Finish” (to activate the modified template).

NB : If you leave the editor without saving your changes, a pop-in will ask you if you want to save your work.

How to code the template

The central content area is where you code your widget template. This code will be used on your website’s page to generate the widget. There are three tabs for three different kinds of code:

  • JS (JavaScript)
  • HTML
  • CSS

By default, it is empty and the active tab is the JavaScript one. Write your code directly into the blank area.

To validate your template, you must have entered at least 10 characters in the “JS” tab. JavaScript is sufficient to create your template. However, you can add HTML and/or CSS.

You can also use this default CSS which will allow you to format lists, text fields… according to Kameleoon App stylesheet:

@import url(';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;

Once your code is written, click on “User Interface” in the left panel to access the user interface step.

Special case: the variable

To run a widget whose code must use a field (a variable) specified by the user when configuring the widget:

  • In the “User Interface” tab

Add the templateData in the corresponding form field.


<input id=”message” type=”text” templateData=”messageContent” placeholder=”Type your message”>

  • In the “Code to run” tab

To retrieve the corresponding variable, use the UserData.

Example :

var userInput = UserData.messageContent;


How to create the user interface

In the “User Interface” tab, the content area changes: only HTML and CSS are available. Click on one or the other and add your code.

By doing so, you code the form for the user interface, which users need to fill in to create a widget via this template. The form is displayed when the widget is added to an experiment.

If no user interface is provided for your widget, this part is optional and the fields can remain empty.

How to activate the template

To finalize the creation of your template and activate it, click on the “Activate” button at the bottom right of the editor page.

NB : If you have entered less than 10 characters in the JavaScript part of the editor, the button is grayed out and you can’t activate your template.

How to manage created templates

When you have created a template, it appears as a card on the “Widget templates” page, with the following information:

  • Name
  • Associated website(s)
  • Type (“personalized template”)
  • Status (draft, active or disabled)
  • Action icons (activate/deactivate, edit, duplicate, delete) on hover

You can also search, filter or sort your different templates.

When hovering over a card, several action icons appear:

  • Activate/Deactivate
  • Edit
  • Duplicate
  • Delete

If the template is active, a click on the icon disables the template without deleting it from the library. You will be able to reactivate it later. A deactivated template will no longer appear in the list of available templates when creating an experiment.

If the template is not used in any active experiment

Deactivation takes place immediately.

If the template is used in an active experiment

A pop-in alert indicates that deactivation is impossible. Click on the icon to view the list of active experiments using this template.

  • If the template is disabled, you can click on the icon to reactivate it. It is then available again into experiments.
  • The icon enables you to edit the template’s parameters and code. A click opens a pop-in, similar to the new template creation one. If your template is used in an experiment, a pop-in opens upon validation of your changes informing you that the update can only apply to your personalizations and not your experiments, and asking you to confirm or cancel your choice. In the configuration menu of your personalization, a sticky footer also informs you on the template’s modification.
  • The icon enables you to duplicate the template. A click opens a pop-in similar to the new template creation one. Click on the button to duplicate.
  • Finally, with . click on the icon, you can remove the template, including all widgets using it. This action is irreversible.

If the template is not used in an experiment (no widget)

A pop-in asks you to confirm your choice or cancel it.

If the template is used in a disabled experiment

A pop-in informs you that this action is not recommended.

If the template is used in an active experiment

A pop-in informs you that this action is not possible.

How to use the widget in an experiment

Your template is created and activated? You can now use it in an experiment or a personalization.

In an experiment

Add a widget from the editor

Once your experiment is created and opened in the editor, click on the name of your variation, then on “New Element”.

In the pop-in that opens, click on “Widgets”.

Select a widget template

In the list of widgets, click on “Personalized Widget”, select the name of the template you need in the drop down menu, then click on “Add”.

A drop down menu appears asking you to choose between a display in the page or above it.

Configure the template

Select the device(s) on which you want to display your widget.

If you have set up a user interface when creating your template, a form opens. Complete it to configure the widget, then click on “Save” at the bottom left to validate your configuration.

The widget is now added to your experiment! You can continue setting up your campaign.

In a personalization

Select a type of personalization

On your personalization setup page, choose a personalization type: “In the content of your pages” or “Above your pages”.

Select a widget template

Click on “Personalized Templates”: the menu unfolds.

Select a personalized template by clicking on “Add”.

Then choose the device (s) on which you want to display your widget.

If you haven’t set a user interface, you’re done with the widget part. Continue tour personalization setup as usual.

Configure the template

If you have set up a user interface when creating your template, a form opens. Complete the information to configure the widget, then click on “Save” at the bottom left to validate your configuration.

The widget is now added to your personalization! Continue setting up your campaign.

  • In this article :