> ## 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.
# Créer un widget à partir de code
> Apprenez à créer des modèles de widgets hautement personnalisables en les codant directement dans la plateforme Kameleoon.
Créez des modèles de widgets hautement personnalisables en les codant directement dans la plateforme Kameleoon.
Utilisez l'un de nos widgets prêts à l'emploi ou demandez l'aide de votre développeur si vous n'êtes pas à l'aise avec le code.
## Créer un nouveau modèle
Suivez ces étapes pour créer un nouveau modèle de widget avec du code :
1. Cliquez sur **Studio** > **Widgets** > **New widget**.
2. Sélectionnez **Using code**.
3. Nommez votre modèle, associez un site Web et, éventuellement, rédigez une description et ajoutez des tags.
4. Cliquez sur **Create**.
## L'éditeur de modèle
L'éditeur de modèle contient trois zones distinctes.
### Panneau de gauche
Le coin supérieur gauche affiche le titre de votre modèle. Passez la souris sur le titre et cliquez sur l'icône **pencil icon** pour renommer le modèle.
Accédez à deux étapes essentielles pour créer votre modèle dans ce panneau :
* **Code to run**
* **Configuration form**
### Zone de contenu
Saisissez le code de votre modèle dans cette zone.
## Coder le modèle
Utilisez la zone de contenu centrale pour coder votre modèle de widget. Ce code génère le widget sur la page de votre site Web. L'éditeur propose trois onglets pour différents types de code :
* **JS** (JavaScript)
* **CSS**
* **HTML**
Par défaut, l'onglet **JS** est actif. Écrivez votre code dans la zone vide.
Pour valider votre modèle, saisissez au moins 10 caractères dans l'onglet **JS**. JavaScript suffit pour créer votre modèle, mais vous pouvez également ajouter du HTML ou du CSS.
Utilisez ce CSS par défaut pour formater les éléments tels que les listes et les champs de texte conformément à la feuille de style Kameleoon :
```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;
}
```
Après avoir écrit le code, cliquez sur **Configuration form** dans le panneau de gauche pour passer à l'étape de l'interface utilisateur.
### Cas particulier : variables
Pour utiliser un champ (une variable) spécifié par l'utilisateur dans votre widget, ajoutez l'attribut `templateData` au champ correspondant dans l'onglet **User Interface**.
**Exemple :**
`input id="message" type="text" templateData="messageContent" placeholder="Type your message"`
Pour récupérer la variable, utilisez `UserData` dans l'onglet **Code to run**.
**Exemple :**
`var userInput = UserData.messageContent;`
`alert(userInput);`
## Créer le formulaire de configuration
Utilisez l'onglet **Configuration form** pour créer l'interface utilisateur que les membres de l'équipe utilisent pour configurer votre widget. Seuls les onglets **HTML** et **CSS** sont disponibles dans cette section.
### Onglet HTML
Saisissez le code HTML de votre formulaire de configuration dans l'onglet **HTML**. Les utilisateurs interagissent avec ce formulaire pour configurer leur modèle et créer un widget.
Chaque champ du formulaire doit inclure un attribut avec la syntaxe suivante : `templateData="[NameOfYourChoice]"`.
### Onglet CSS
Les styles que vous ajoutez dans l'onglet **CSS** s'appliquent au formulaire d'interface utilisateur. Cette étape est facultative.
***
Pour finaliser votre modèle, cliquez sur **Activate** dans le coin supérieur droit de la page de l'éditeur.
Si vous saisissez moins de 10 caractères dans le champ JavaScript, **Activate** est indisponible.
## Gérer les modèles créés
Après avoir créé un modèle, il apparaît sous forme de carte sur le tableau de bord **Widgets**.
## Utiliser le widget dans une expérience
Pour associer un widget de code à une expérience :
1. Ouvrez ou créez une expérience à l'aide du **Graphic editor**.
2. Dans la barre latérale gauche, cliquez sur **Add** à côté de **Elements**.
3. Dans la barre latérale **Add element** qui s'ouvre, cliquez sur **Widgets**.
4. Sélectionnez votre widget personnalisé dans la liste et configurez-le.
