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

# Widget Studio-Struktur

> Erkunden Sie die Widget Studio-Oberfläche, einschließlich der Kopfzeilen-Steuerelemente, Seitenleisten-Bereiche, Bildschirmverwaltung und Geräte-Vorschauoptionen.

Das Kameleoon Widget Studio besteht aus einer Kopfzeile, einer Seitenleiste mit fünf Registerkarten und einem zentralen Bereich, in dem Sie die Anpassung Ihres Widgets vorab anzeigen können.

## Bildschirm-Dropdown

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-2-1-1920x1164.png)
</Frame>

### Einen Bildschirm hinzufügen

Sie können so viele Bildschirme hinzufügen, wie Sie benötigen.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2022-06-15-a-07.51.36.png)
</Frame>

Beispiel:

* Bildschirm 1: Newsletter-Pop-in
* Bildschirm 2: Dankeschön-Pop-in

### Einen Bildschirm standardmäßig festlegen

Wenn Sie mehrere Bildschirme erstellt haben, wird der zuerst erstellte Bildschirm (oben in der Dropdown-Liste) automatisch als **Standardbildschirm** festgelegt. Der Standardbildschirm ist das, was ein Besucher zuerst sieht, wenn er Ihrem Widget ausgesetzt wird.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2022-07-27-a-23.54.34.png)
</Frame>

Sie können den Standardbildschirm ändern, indem Sie auf das **Drei-Punkte-Menü** klicken und **Als Standardbildschirm festlegen** aktivieren.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2022-07-27-a-23.56.54.png)
</Frame>

### Einen Bildschirm löschen

Um einen Bildschirm zu löschen, klicken Sie auf das **Drei-Punkte-Menü** > **Bildschirm löschen**.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2022-07-27-a-23.56.54-1.png)
</Frame>

### Einen Bildschirm duplizieren

Um einen Bildschirm zu duplizieren, klicken Sie auf das Duplizier-Symbol.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2022-06-15-a-07.51.55.png)
</Frame>

Das Design, die Animationen und die zugehörigen Ereignisse werden ebenfalls dupliziert.

## Zoom

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-3-1920x1164.png)
</Frame>

Vergrößern oder verkleinern Sie den Widget-Inhalt.

## Geräteauswahl

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-4-1920x1164.png)
</Frame>

Wählen Sie die Geräte aus, auf denen Ihr Widget angezeigt wird.

## Rückgängig/Wiederherstellen

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-5-1920x1164.png)
</Frame>

Machen Sie (Pfeil nach links) die letzte Aktion rückgängig oder stellen Sie sie wieder her (Pfeil nach rechts), die Sie am Widget ausgeführt haben.

## Simulieren

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-7-1920x1164.png)
</Frame>

Simuliert das Widget unter realen Bedingungen (nützlich, wenn Ereignisse hinzugefügt wurden).

## Speichern

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-8-1920x1164.png)
</Frame>

Speichern Sie das Widget, ohne es zu aktivieren. Das Widget erscheint im Dashboard **Widgets** mit dem Status **Deaktiviert** und kann nicht in einer Kampagne verwendet werden.

## Aktivieren

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-9-1920x1164.png)
</Frame>

Aktivieren Sie das Widget, um es in einer Kampagne zu verwenden. Das Widget erscheint im Dashboard **Widgets** mit dem Status **Aktiviert**.

## Seitenleiste

Die linke Leiste hat fünf verschiedene Bereiche:

* Element hinzufügen
* Inhalt (standardmäßig angezeigt)
* Übersetzungen
* Animationen
* Ereignisse und Aktionen
* Benutzerdefinierter Code

### Element hinzufügen

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.45.16-1920x1167.png)
</Frame>

Hier können Sie Ihrem Widget ein Element hinzufügen.

Um zu erfahren, wie Sie einem Widget ein Element hinzufügen, [lesen Sie diesen Artikel](./edit-your-widgets).

### Inhalt

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.36.18-copie-12-1920x1164.png)
</Frame>

Hier können Sie den Inhalt Ihres Widgets bearbeiten.

Um zu erfahren, wie Sie den Inhalt eines Widgets bearbeiten, [lesen Sie diesen Artikel](./edit-your-widgets).

### Übersetzungen

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2024-01-30-a-17.00.24-1920x1068.png)
</Frame>

Hier können Sie das Widget in mehreren Sprachen konfigurieren.

### Animationen

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.48.56-1920x1170.png)
</Frame>

Hier können Sie Eingangs- und/oder Ausgangsanimationen zu Ihrem Widget hinzufügen.

Um zu erfahren, wie Sie Ihrem Widget eine Animation hinzufügen, [lesen Sie diesen Artikel](./animate-your-widget).

### Ereignisse und Aktionen

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.45.53-1-1920x1166.png)
</Frame>

Hier können Sie Ereignisse und Aktionen mit Ihrem Widget verknüpfen.

Um zu erfahren, wie Sie Ereignisse und Aktionen mit Ihrem Widget verknüpfen, [lesen Sie diesen Artikel](./associate-events-and-actions-with-your-widget).

### Benutzerdefinierter Code

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/widget-studio-structure/Capture-decran-2023-03-05-a-22.43.43-1920x1162.png)
</Frame>

Hier können Sie benutzerdefinierten CSS- oder JS-Code im Widget Studio erstellen, benutzerdefinierte Stile auf jedes Widget-Element anwenden und Ihre benutzerdefinierten Skripte auf Anforderung ausführen.