Skip to main content

Create a widget from code

Create highly customizable widget templates by coding them directly in the Kameleoon platform.

note

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.

note

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