Créer un template widget

Une bibliothèque de widgets est à votre disposition dans le cadre de vos expériences. Vous pouvez intégrer ces widgets dans le contenu de vos pages ou bien par-dessus celles-ci. Pour en savoir plus sur ces éléments pré-définis, consultez notre documentation sur le sujet .

Vous avez également la possibilité de coder votre propre widget afin qu’il corresponde parfaitement à vos attentes. Vous pourrez ensuite l’utiliser dans un test A/B ou une personnalisation. Cet article détaille la marche à suivre.

Note : Si vous n’êtes pas à l’aise avec le code, utilisez plutôt l’un de nos widgets prêts à l’emploi ou sollicitez votre développeur !

 

Lancer la création d’un nouveau template

Afin d’accéder à l’interface de création d’un template widget, vous devez tout d’abord être connecté au back-office Kameleoon.

Déroulez le menu « Configuration » et cliquez sur « Templates widget » :

En haut à droite de la page qui vient de s’ouvrir, un bouton « Nouveau template » vous permet d’accéder à la pop-in de création.

 

Compléter la pop-in de création

Cette pop-in vous permet de nommer votre template, de lui associer un site web et éventuellement de rédiger une description et d’ajouter des tags.

Cliquez ensuite sur « Créer » pour accéder à l’étape suivante.

 

L’éditeur de template

La page d’édition d’un template est composée de trois zones distinctes.

Panneau de gauche

Le titre de votre template se trouve en haut à gauche. Au passage de la souris, une icône d’édition apparaît. Vous pouvez cliquer dessus pour modifier le nom de votre template.

Ce panneau vous donne également accès aux deux étapes essentielles de la création de votre template :

D’un clic, vous pouvez passer de l’une à l’autre.

Zone de contenu

Cette zone au centre vous permet de coder votre template.

Panneau inférieur

En bas de la page, vous trouverez à gauche une zone de notification. Par défaut, elle indique la date et l’heure du dernier enregistrement de votre travail. À sa droite se trouvent deux boutons d’actions :

  • Le bouton « Enregistrer » qui enregistre l’édition du template et le sauvegarde en tant que brouillon. Vous restez sur l’éditeur.
  • Le bouton « Activer » qui valide l’édition du template et le rend actif. Vous quittez alors l’éditeur pour revenir vers la page de gestion des templates.

Note : Il n’est pas nécessaire d’enregistrer lorsque vous changez d’onglet.

Si vous éditez un template déjà créé et actif, ces deux boutons se transforment en « Modifier » (pour sauvegarder la modification du brouillon) et « Terminer » (pour activer le template modifié).

Note : Si vous quittez l’éditeur sans avoir enregistré vos modifications, une pop-in vous demande alors si vous souhaitez sauvegarder votre travail ou l’ignorer.

 

Coder le template

La zone de contenu centrale vous permet de coder votre template widget. Ce code sera utilisé sur la page de votre site web afin de générer le widget. Elle propose trois onglets :

  • JS (JavaScript)
  • HTML
  • CSS

Par défaut, elle est vide et l’onglet actif est celui du JavaScript. Intégrez votre code directement dans la zone blanche prévue à cet effet.

Pour valider votre template, vous devez avoir entré au moins 10 caractères dans l’onglet « JS ». Le JavaScript suffit à la création de votre template. Vous pouvez cependant y ajouter du HTML ou du CSS.

Une fois votre code à exécuter finalisé, cliquer sur « Interface utilisateur » dans le panneau de gauche pour accéder à l’étape de création de l’interface.

Cas particulier : la variable

Pour exécuter un widget dont le code doit utiliser un champ (une variable) indiqué par l'utilisateur lors de la configuration du widget :

  • Dans l'onglet « Interface utilisateur »

Ajoutez l'attribut templateDataName="XXX" dans le champ du formulaire correspondant et remplacez XXX par un nom.

Exemple :

<input id="message" type="text" templateDataName="messageContent" placeholder="Type your message">

  • Dans l'onglet « Code à exécuter »

Pour récupérer la variable correspondante, utilisez la syntaxe UserData.XXX, où XXX est le nom attribué dans l'interface utilisateur.

Exemple :

var userInput = userData.messageContent;

alert(userInput);

 

Créer l’interface utilisateur

Une fois sur l’onglet « Interface utilisateur », la zone de contenu change. Seuls le HTML et le CSS sont alors disponibles. Cliquez sur l’un ou sur l’autre et votre code correspondant.

Vous codez ainsi le formulaire de l’interface utilisateur, qui permettra à ce dernier de créer un widget utilisant ce template. Le formulaire apparaîtra lorsque le widget sera ajouté à une expérience lors de sa configuration.

Si aucune interface utilisateur n’est prévue pour votre widget, cette partie est optionnelle et peut donc rester vide.

 

Activer le template

Pour finaliser la création de votre template et le rendre actif, cliquez sur le bouton « Activer » en bas à droite de l’éditeur.

Note : Si le bouton est grisé, c’est que vous avez entré moins de 10 caractères dans la partie JavaScript de l’éditeur.

Un sticky footer vous indique que l’opération est un succès :

Ça y est, votre template peut être utilisé pour créer un widget dans une expérience !

Une carte à son nom se crée alors automatiquement dans l’interface de gestion des templates. Vous pourrez l’y retrouver et le modifier si besoin est.

 

Gérer les templates créés

Sur la page « Widget templates », lorsque vous avez créé au moins un template, celui-ci apparaît sous la forme d’une carte présentant :

  • Son nom
  • Le ou les site(s) associé(s)
  • Son type (« template personnalisé »)
  • Son statut (brouillon, actif ou inactif)
  • Des icônes d’actions (activer/désactiver, édition, duplication, suppression)

Vous pouvez également effectuer une recherche, filtrer ou trier vos différents templates afin de visualiser ceux qui vous intéressent.

  • Au passage de la souris sur une carte, plusieurs icônes apparaissent. Chacun correspond à une action :
  • Activer/Désactiver
  • Éditer
  • Dupliquer
  • Supprimer

 

  • Si le template est actif, l’icône permet de désactiver le template sans le supprimer de la bibliothèque des templates. Vous pourrez ainsi le réactiver plus tard si vous le souhaitez. Un template désactivé n’apparaîtra plus dans la liste des templates disponibles lors de la création d’une expérience.

Si le template n’est utilisé dans aucune expérience active

La désactivation a lieu immédiatement.

Si le template est utilisé dans une expérience active

Une pop-in d’alerte vous indique que la désactivation est impossible. Cliquez sur pour visualiser la liste des expériences actives qui utilisent ce template.

  • Si le template est inactif, l’icône permet de le réactiver. Il est à nouveau disponible lors de la création d’un widget dans le cadre d’une expérience.
  • L’icône vous permet d’éditer les paramètres et le code d’un template. Au clic, une pop-in s’ouvre, semblable à celle de création d’un nouveau template. Si votre template est utilisé dans le cadre d’une expérience, au moment de valider vos changements, une pop-in s’ouvre. Elle vous indique que la mise à jour ne peut s’appliquer qu’à vos personnalisations et pas à vos tests A/B, et vous demande de confirmer ou d’annuler votre choix. Dans le menu de paramétrage de votre personnalisation, un sticky footer vous informe également de la modification du template utilisé. Ainsi, vous ne pouvez pas rater l’information !
  • L’icône vous permet de dupliquer le template. Au clic, une pop-in s’ouvre, semblable à celle de création d’un nouveau template. Un bouton vous permet de le dupliquer.
  • Enfin, l’icône vous permet de supprimer complètement le template et les widgets qui l’utilisent. Cette action est irréversible.

Si le template n’est utilisé dans aucune expérience (aucun widget)

Une pop-in vous demande de confirmer votre choix ou de l’annuler.

Si le template est utilisé dans une ou des expérience(s) inactive(s)

Une pop-in vous informe que cette action n’est pas recommandée. Cliquez sur pour visualiser la liste des expériences inactives intégrant ce template.

Si le template est utilisé dans une ou des expérience(s) inactive(s)

Une pop-in vous informe que cette action n’est pas autorisée. Cliquez sur pour visualiser la liste des expériences actives intégrant ce template.

 

Utiliser le widget dans une expérience

Votre template est créé, codé et activé ? Vous pouvez désormais l’inclure dans un test A/B ou une personnalisation. 

Dans un test A/B

Ajouter un widget depuis l’éditeur

Une fois votre test A/B créé et ouvert dans l’éditeur, cliquez sur le nom de votre variante, puis sur « Nouvel élément ».

Dans la pop-in qui vient d’apparaître, cliquez sur « Widgets ».

Choisir un template widget

Dans la liste des widgets, cliquez sur « Widget personnalisé », sélectionnez dans le menu drop down le nom du template qui vous intéresse puis cliquez sur « Ajouter ».

Un drop down apparaît pour vous demander de choisir entre un affichage dans le contenu de la page ou par-dessus la page.

Configurer le template

Sélectionnez le ou les appareil(s) sur le(s)quel(s) vous souhaitez afficher votre widget.

Si vous avez paramétré une interface utilisateur lors de la création de votre template, un formulaire s’ouvre alors. Complétez les informations pour configurer le widget, puis cliquez sur « Enregistrer » en bas de page pour valider votre configuration.

Le widget est alors ajouté à votre test ! Poursuivez la configuration de votre expérience.

Dans une personnalisation

Sélectionner un type de personnalisation

Sur la page de paramétrage de votre personnalisation, choisissez un type de personnalisation : « Dans le contenu de vos pages » ou « Par-dessus vos pages ».

Choisir un template widget

Si un template de widget existe pour ce site, l’option « Templates personnalisés » apparaît.

Au clic, le menu se déroule à droite.

Sélectionnez un template personnalisé, puis validez en cliquant sur « Ajouter ».

Choisissez ensuite le ou les appareil(s) sur le(s)quel(s) vous souhaitez afficher votre widget.

Si vous n’avez pas paramétré d’interface utilisateur, l’ajout de votre widget s’achève ici. Poursuivez la configuration de votre personnalisation comme à votre habitude.

Configurer le template

Si vous avez paramétré une interface utilisateur lors de la création de votre template, un formulaire s’ouvre alors. Complétez les informations pour configurer le widget, puis cliquez sur « Enregistrer » en bas de page pour valider votre configuration.

Le widget est alors ajouté à votre personnalisation ! Poursuivez la configuration de votre expérience.

 

Vous avez d’autres questions ? Envoyer une demande
Réalisé par Zendesk