Zum Hauptinhalt springen
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: 
@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

Oberfläche des Konfigurationsformulars
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.
Widget hinzufügen