Skip to main content

Creating a widget from code

You can create widget templates by coding them. Coding widgets allows them to be highly customizable.

note

Use one of our ready-to-use widgets or ask your developer if you're not comfortable coding.

How to create a new template​

To create a new widget template using code:

  1. Click Studio > Widgets > New widget
  2. Select Using code > Start.
  3. Name your template, associate a website and optionally write a description and add tags.
  4. Click Create.

The template editor​

The template editor is composed of three distinct areas.

Left panel​

Your template's title is displayed in the top left. Hover to make the pencil icon appear. Click the icon to rename your template.

You can also access two essential steps of creating your template in this panel:

  • The code to be run
  • The user interface

Content zone​

Enter your template's code in this area.

Bottom panel​

You will find a notification area in the page's bottom left. By default, it indicates the date and time of the last save. To its right, there two action buttons:

  • The Save button, which saves template edits as a draft.
  • The Activate button, which validates the edits and activates the template.
note

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).

note

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 is 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, the active tab is JavaScript. Write your code in 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 lets format elements like 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'](https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap%27));

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 User Interface in the left panel to access the user interface step.

Special case: variables​

To run a widget whose code must use a field (a variable) specified by the user, add the templateData in the corresponding field in the User Interface tab.

Example:

input id="message" type="text" templateData="messageContent" placeholder="Type your message"

To retrieve the corresponding variable, use the UserData in the Code to run tab.

Example :

var userInput = UserData.messageContent;

alert(userInput);

Creating the user interface​

Only HTML and CSS are available in the User interface tab. Click on either and add your code. Adding code will create the user interface.

How to activate a template​

To finalize the creation of your template, click Activate in the bottom right of the editor page.

note

If you have entered less than 10 characters in the JavaScript field, Activate is grayed out—you can't activate your template.

How to manage created templates​

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

How to use the widget in a campaign​

Once your widget is created and active, you can use it in an experiment or a personalization.