Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt

Use this file to discover all available pages before exploring further.

Create highly customizable widget templates by coding them directly in the Kameleoon platform.
Use one of our ready-to-use widgets or ask your developer for help if you are not comfortable coding.

​
Create a new template

Follow these steps to create a new widget template with code:
  1. Click Studio > Widgets > New widget.
  2. Select Using code.
  3. Name your template, associate a website, and optionally write a description and add tags.
  4. Click Create.

​
The template editor

The template editor contains three distinct areas.

​
Left panel

The top-left corner displays your template’s title. Hover over the title and click the pencil icon to rename the template. Access two essential steps for creating your template in this panel:
  • Code to run
  • Configuration form

​
Content zone

Enter your template’s code in this area.

​
Code the template

Use the central content area to code your widget template. This code generates the widget on your website’s page. The editor provides three tabs for different code types:
  • JS (JavaScript)
  • CSS
  • HTML
By default, the JS tab is active. Write your code in the blank area. To validate your template, enter at least 10 characters in the JS tab. JavaScript is sufficient to create your template, but you can also add HTML or CSS. Use this default CSS to format elements, such as lists and text fields, according to the Kameleoon stylesheet: 
@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;
}
After writing the code, click Configuration form in the left panel to move to the user interface step.

​
Special case: variables

To use a field (a variable) specified by the user in your widget, add the templateData attribute to the corresponding field in the User Interface tab. Example: input id="message" type="text" templateData="messageContent" placeholder="Type your message" To retrieve the variable, use UserData in the Code to run tab. Example: var userInput = UserData.messageContent; alert(userInput);

​
Create the configuration form

Configuration form interface
Use the Configuration form tab to build the user interface that team members use to set up your widget. Only the HTML and CSS tabs are available in this section.

​
HTML tab

Enter the HTML code for your configuration form in the HTML tab. Users interact with this form to set up their template and create a widget. Every field in the form must include an attribute with the following syntax: templateData="[NameOfYourChoice]".

​
CSS tab

Styles that you add in the CSS tab apply to the user interface form. This step is optional.
To finalize your template, click Activate in the top-right corner of the editor page.
If you enter fewer than 10 characters in the JavaScript field, Activate is unavailable.

​
Manage created templates

After you create a template, it appears as a card on the Widgets dashboard.

​
Use the widget in an experiment

To associate a code widget with an experiment:
  1. Open or create an experiment using the Graphic editor.
  2. In the left sidebar, click Add next to Elements.
  3. In the Add element sidebar that opens, click Widgets.
  4. Select your custom widget from the list and configure it.
Add widget