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

# Creating a widget from code

> Learn how to build highly customizable widget templates by coding them directly in the Kameleoon platform.

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.
</Note>

## 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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-from-code/creating-a-widget-from-code/code-area.png)
</Frame>

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:

```css theme={null}
@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

<Frame>
  ![Configuration form interface](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-from-code/creating-a-widget-from-code/configuration-form.png)
</Frame>

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.
</Note>

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

<Frame>
  ![Add widget](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-from-code/creating-a-widget-from-code/add-widget.png)
</Frame>