> ## 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 benutzerdefinierter Code-Editor

> Schreiben Sie benutzerdefiniertes CSS und JavaScript im Widget Studio Code-Editor, um Stile auf Widget-Elemente anzuwenden und Skripte auf Anforderung auszuführen.

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

In diesem Artikel erfahren Sie, wie Sie:

* Benutzerdefiniertes CSS hinzufügen
* Ihren CSS-Code auf Widget-Elemente anwenden
* JS-Code hinzufügen
* Code-Ansicht ändern

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/insert-html-code-in-your-widget/widget-studio-custom-code-editor/0.png)
</Frame>

## Beispielanwendungsfall

Ein häufiger Anwendungsfall für benutzerdefinierten Code besteht darin, mehrmals denselben Stil auf Widget-Elemente anzuwenden, anstatt Stileigenschaften manuell auf jedem Element einzurichten. Wenn Sie ein nicht-technischer Benutzer sind, bitten Sie einen Ihrer Entwickler, vordefinierte CSS-Klassen für Sie zu erstellen.

## Benutzerdefinierten CSS-Code hinzufügen

1. Klicken Sie im linken Menü auf **Benutzerdefinierter Code**. Die Seite öffnet sich mit ausgewählter Option **Benutzerdefiniertes CSS**.
2. Fügen Sie Ihren CSS-Code im Code-Editor hinzu.

## CSS-Code auf Widget-Elemente anwenden

1. Öffnen Sie den Bereich **Design**.
2. Wählen Sie ein Element aus. Dieses Element wird gemäß einer der Klassen gestaltet, die Sie im Code-Editor erstellt haben.
3. Scrollen Sie nach unten und klappen Sie den Abschnitt **Css und Klassen** aus.
4. Fügen Sie den Namen Ihrer Klasse im Feld **Element ClassName** hinzu oder in **Container ClassName**, wenn Sie diese Klasse auf das übergeordnete Element anwenden möchten.

<Note>
  Ihr ausgewähltes Element, das gemäß Ihrem benutzerdefinierten Code gestaltet ist, erscheint nicht im rechten Vorschaubereich. Sie müssen auf das **Kamera-Symbol** klicken, um Ihre Änderungen zu sehen.
</Note>

## JS-Code hinzufügen

Durch das Hinzufügen von JS-Code können Sie ein benutzerdefiniertes Skript auf Anforderung in Ihrem Widget ausführen.

1. Klicken Sie in der linken Seitenleiste auf **Benutzerdefinierter Code**.
2. Klicken Sie auf **Benutzerdefiniertes JS**.
3. Fügen Sie Ihren JS-Code im Code-Editor hinzu.

<Note>
  Um die Ausführung Ihres Skripts zu überprüfen, klicken Sie auf das **Kamera-Symbol**.
</Note>

## Code-Ansicht ändern

Wenn Sie sowohl mit CSS- als auch mit JS-Code arbeiten, möchten Sie möglicherweise beide Codes gleichzeitig lesen. So fügen Sie mehrere Code-Editoren hinzu:

1. Klicken Sie auf das Symbol **Panel hinzufügen** in der oberen rechten Ecke über dem Code-Editor.
2. Skalieren Sie jedes Panel manuell nach Ihren Bedürfnissen.

Um ein Panel zu schließen, klicken Sie auf das **X** rechts neben dem Code-Lesezeichen (JS oder CSS).