Passer au contenu principal
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 : 
@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

Interface du 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.
Ajouter un widget