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

# Éditeur de code personnalisé du Widget Studio

> Écrivez du CSS et du JavaScript personnalisés dans l'éditeur de code du Widget Studio pour appliquer des styles aux éléments du widget et exécuter des scripts à la demande.

Vous pouvez créer du code CSS ou JS personnalisé dans le Widget Studio et appliquer vos styles personnalisés à n'importe quel élément du widget ou exécuter vos scripts à la demande.

Dans cet article, vous apprendrez à :

* Ajouter du CSS personnalisé
* Appliquer votre code CSS aux éléments du widget
* Ajouter du code JS
* Modifier l'affichage du code

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

## Exemple de cas d'utilisation

Un cas d'utilisation courant du code personnalisé consiste à appliquer le même style aux éléments du widget plusieurs fois, plutôt que de configurer manuellement les propriétés de style sur chaque élément. Si vous n'êtes pas un utilisateur technique, demandez à l'un de vos développeurs de créer des classes CSS prédéfinies pour vous.

## Ajouter du code CSS personnalisé

1. Cliquez sur **Code personnalisé** dans le menu de gauche. La page s'ouvre avec l'option **CSS personnalisé** sélectionnée.
2. Ajoutez votre code CSS dans l'éditeur de code.

## Appliquer le code CSS aux éléments du widget

1. Ouvrez la section **Design**.
2. Sélectionnez un élément. Cet élément sera stylé selon l'une des classes que vous avez créées dans l'éditeur de code.
3. Faites défiler vers le bas et déployez la section **Css et classes**.
4. Ajoutez le nom de votre classe dans le champ **Element ClassName** ou dans **Container ClassName** si vous souhaitez appliquer cette classe à l'élément parent.

<Note>
  Votre élément sélectionné stylé selon votre code personnalisé n'apparaîtra pas dans la zone d'aperçu à droite. Vous devez cliquer sur l'**icône de caméra** pour voir vos modifications.
</Note>

## Ajouter du code JS

L'ajout de code JS vous permet d'exécuter un script personnalisé à la demande dans votre widget.

1. Cliquez sur **Code personnalisé** dans la barre latérale gauche.
2. Cliquez sur **JS personnalisé**.
3. Ajoutez votre code JS dans l'éditeur de code.

<Note>
  Pour vérifier l'exécution de votre script, cliquez sur l'**icône de caméra**.
</Note>

## Modifier l'affichage du code

Si vous travaillez avec à la fois du code CSS et JS, vous voudrez peut-être lire les deux codes en même temps. Pour ajouter plusieurs éditeurs de code :

1. Cliquez sur l'icône **Ajouter un panneau** dans le coin supérieur droit au-dessus de l'éditeur de code.
2. Redimensionnez manuellement chaque panneau selon vos besoins.

Pour fermer un panneau, cliquez sur le **X** à droite du signet de code (JS ou CSS).