Skip to main content
Code templates let you write a widget’s JavaScript, CSS, and HTML yourself. Team members then fill in a configuration form that you design for each widget.
Use a ready-to-use widget, or ask your developer for help if you aren’t 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 has a left panel and a content zone.

​
Left panel

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

​
Content zone

Content zone of the template editor where you enter the template's code
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:
After writing the code, click Configuration form in the left panel to move to the configuration step.

​
Special case: variables

To use a field (a variable) that the team member fills in, add the templateData attribute to the corresponding field in the Configuration form step. Example:
To retrieve the variable, use UserData in the Code to run step. Example:

​
Create the configuration form

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

​
HTML tab

Enter the HTML code for your configuration form in the HTML tab. Team members use this form to set up their template and create a widget. Each 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 configuration form. This step is optional.

​
Activate the template

To finalize your template, click Activate in the top-right corner of the editor page.
If you enter fewer than 10 characters in the JS tab, 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

​
Preview your widget

Code-based widget templates don’t have a direct Simulate action. The Widgets dashboard’s three-dots menu offers only Rename, Manage tags, Duplicate, Activate, and Delete for a code-based widget, and the template editor’s header offers only Activate.
Three-dots menu for a code-based widget, showing no Simulate option
To preview a code-based widget, add it to a draft experiment using the Graphic editor: click Add next to Elements in the left sidebar, click Widgets, and select your widget from the list. Then click Simulate in the Graphic editor to test the campaign, including your widget, in a production-like environment before publishing it live. For details on the simulation panel, see Simulate a campaign.