> ## 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.
# Ein Widget aus Code erstellen
> Erfahren Sie, wie Sie hochgradig anpassbare Widget-Vorlagen erstellen, indem Sie sie direkt in der Kameleoon-Plattform programmieren.
Erstellen Sie hochgradig anpassbare Widget-Vorlagen, indem Sie sie direkt in der Kameleoon-Plattform programmieren.
Verwenden Sie eines unserer gebrauchsfertigen Widgets oder bitten Sie Ihren Entwickler um Hilfe, wenn Sie sich mit dem Programmieren nicht wohlfühlen.
## Eine neue Vorlage erstellen
Befolgen Sie diese Schritte, um eine neue Widget-Vorlage mit Code zu erstellen:
1. Klicken Sie auf **Studio** > **Widgets** > **New widget**.
2. Wählen Sie **Using code** aus.
3. Benennen Sie Ihre Vorlage, verknüpfen Sie eine Website und schreiben Sie optional eine Beschreibung und fügen Sie Tags hinzu.
4. Klicken Sie auf **Create**.
## Der Vorlageneditor
Der Vorlageneditor enthält drei verschiedene Bereiche.
### Linkes Panel
In der oberen linken Ecke wird der Titel Ihrer Vorlage angezeigt. Bewegen Sie den Mauszeiger über den Titel und klicken Sie auf das Symbol **pencil icon**, um die Vorlage umzubenennen.
In diesem Panel können Sie auf zwei wesentliche Schritte zur Erstellung Ihrer Vorlage zugreifen:
* **Code to run**
* **Configuration form**
### Inhaltsbereich
Geben Sie in diesem Bereich den Code Ihrer Vorlage ein.
## Die Vorlage programmieren
Verwenden Sie den zentralen Inhaltsbereich, um Ihre Widget-Vorlage zu programmieren. Dieser Code generiert das Widget auf der Seite Ihrer Website. Der Editor bietet drei Registerkarten für verschiedene Codetypen:
* **JS** (JavaScript)
* **CSS**
* **HTML**
Standardmäßig ist die Registerkarte **JS** aktiv. Schreiben Sie Ihren Code in den leeren Bereich.
Um Ihre Vorlage zu validieren, geben Sie mindestens 10 Zeichen in die Registerkarte **JS** ein. JavaScript reicht aus, um Ihre Vorlage zu erstellen, aber Sie können auch HTML oder CSS hinzufügen.
Verwenden Sie dieses Standard-CSS, um Elemente wie Listen und Textfelder entsprechend dem Kameleoon-Stylesheet zu formatieren:
```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;
}
```
Klicken Sie nach dem Schreiben des Codes im linken Panel auf **Configuration form**, um zum Schritt der Benutzeroberfläche zu wechseln.
### Sonderfall: Variablen
Um ein vom Benutzer angegebenes Feld (eine Variable) in Ihrem Widget zu verwenden, fügen Sie dem entsprechenden Feld in der Registerkarte **User Interface** das Attribut `templateData` hinzu.
**Beispiel:**
`input id="message" type="text" templateData="messageContent" placeholder="Type your message"`
Um die Variable abzurufen, verwenden Sie `UserData` in der Registerkarte **Code to run**.
**Beispiel:**
`var userInput = UserData.messageContent;`
`alert(userInput);`
## Das Konfigurationsformular erstellen
Verwenden Sie die Registerkarte **Configuration form**, um die Benutzeroberfläche zu erstellen, die Teammitglieder zum Einrichten Ihres Widgets verwenden. In diesem Bereich sind nur die Registerkarten **HTML** und **CSS** verfügbar.
### HTML-Registerkarte
Geben Sie den HTML-Code für Ihr Konfigurationsformular in die Registerkarte **HTML** ein. Benutzer interagieren mit diesem Formular, um ihre Vorlage einzurichten und ein Widget zu erstellen.
Jedes Feld im Formular muss ein Attribut mit folgender Syntax enthalten: `templateData="[NameOfYourChoice]"`.
### CSS-Registerkarte
Stile, die Sie in der Registerkarte **CSS** hinzufügen, gelten für das Benutzeroberflächenformular. Dieser Schritt ist optional.
***
Um Ihre Vorlage abzuschließen, klicken Sie in der oberen rechten Ecke der Editorseite auf **Activate**.
Wenn Sie weniger als 10 Zeichen in das JavaScript-Feld eingeben, ist **Activate** nicht verfügbar.
## Erstellte Vorlagen verwalten
Nachdem Sie eine Vorlage erstellt haben, erscheint sie als Karte im **Widgets**-Dashboard.
## Das Widget in einem Experiment verwenden
So verknüpfen Sie ein Code-Widget mit einem Experiment:
1. Öffnen oder erstellen Sie ein Experiment mit dem **Graphic editor**.
2. Klicken Sie in der linken Seitenleiste neben **Elements** auf **Add**.
3. Klicken Sie in der sich öffnenden Seitenleiste **Add element** auf **Widgets**.
4. Wählen Sie Ihr benutzerdefiniertes Widget aus der Liste aus und konfigurieren Sie es.
