Skip to main content

​
Créer un widget avec PBX

PBX Widgets est un générateur d’interface alimenté par l’IA qui vous aide à créer des widgets pour vos expériences et personnalisations créées dans le nouveau personalization builder. Au lieu d’écrire manuellement du HTML, CSS et JavaScript, vous décrivez le widget en langage naturel, et PBX génère automatiquement le composant. Cette approche permet aux marketers, chefs de produit et spécialistes CRO de créer rapidement des composants d’interface sans expertise technique. Les widgets typiques créés avec PBX comprennent :
  • Pop-ups d’abonnement à la newsletter
  • Bannières promotionnelles
  • Offres d’exit-intent
  • Formulaires de capture de leads
  • Panneaux de recommandation de produits
  • Modales d’enquête ou de feedback
Les widgets PBX ne sont pas compatibles avec l’ancienne personnalisation. Vous pouvez demander à votre CSM d’obtenir un accès à la nouvelle personnalisation si nécessaire.

​
Créer un widget

Suivez ces étapes pour générer et affiner un widget à l’aide de PBX.

​
1. Ouvrir PBX

Pour commencer à générer un widget dans l’interface Kameleoon :
  1. Allez dans Studio > Widgets.
  2. Cliquez sur Nouveau widget.
  3. Sélectionnez À l’aide d’un prompt.
  4. Saisissez les informations requises dans le menu pop-in.
  5. Cliquez sur Créer.

​
2. Écrire un prompt

Décrivez le widget que vous souhaitez créer dans le champ de prompt. PBX utilise cette description pour générer automatiquement l’interface du widget. Exemple de prompt :

​
3. Prévisualiser et itérer

Le moyen le plus rapide d’obtenir le résultat souhaité est d’utiliser un workflow d’itération de prompt. Examinez le widget généré et affinez-le en écrivant des prompts de suivi, tels que :
  • “Make the CTA button larger”
  • “Change the background color to a darker beige”
  • “Make the popup appear after 3 seconds”

​
4. Modifier le code du widget

Modifiez directement le code JS ou CSS d’un widget généré, plutôt que de l’affiner à l’aide de prompts.
  1. Cliquez sur l’icône code dans l’en-tête pour ouvrir l’onglet View code.
  2. Cliquez sur Edit code.
  3. Modifiez le code JS ou CSS du widget.
Si vous générez plusieurs versions du widget, sélectionnez celle que vous souhaitez modifier dans le menu déroulant Selected version. Vous ne pouvez modifier que la dernière version. Pour les versions précédentes, vous pouvez consulter et copier le code, mais pas le modifier.

​
5. Ajouter des objectifs

Suivez les interactions des utilisateurs—telles que les soumissions d’e-mail, les clics sur les boutons, les complétions de formulaires ou les affichages de widget—en ajoutant des objectifs à votre prompt.
Vous devez configurer les objectifs dans Paramètres avant de pouvoir les suivre dans un widget PBX.
Exemples de prompts pour les objectifs :
  • Inscription à la newsletter : Track a goal called "Newsletter Signup" when the user clicks the Subscribe button.
  • Clic sur CTA : Track a goal when the CTA button is clicked. Goal name: Promo CTA Click
  • Engagement avec le widget : Track a goal when the popup is displayed. Goal name: Widget Viewed

​
Collecter les réponses du widget dans Kameleoon (facultatif)

Si votre widget pose une question aux visiteurs, comme un score NPS ou un commentaire de feedback, vous avez besoin d’un moyen de recueillir ces réponses sans configurer d’outil externe comme Google Sheets. PBX détecte quand un widget contient une question ou un champ de saisie et vous permet de collecter les réponses correspondantes directement dans Kameleoon (actuellement en bêta), puis de les exporter sous forme de fichier CSV.

​
1. Activer la collecte des réponses

Lorsque PBX génère un widget contenant une question ou un champ de saisie, il vous invite à choisir si vous souhaitez collecter les réponses.
  1. Dans l’invite Collect widget responses?, sélectionnez une option :
    • Yes, collect responses via Kameleoon : Kameleoon collecte chaque réponse et la rend disponible pour l’export CSV.
    • No, don’t collect responses : Kameleoon ne collecte pas les données de réponse du widget.
  2. Cliquez sur Apply.
Invite de collecte des réponses du widget avec les options Yes et No et un bouton Apply

​
2. Nommer les champs du widget

Kameleoon utilise les noms des champs du widget comme en-têtes de colonne dans le fichier CSV exporté. Donnez donc à chaque champ un nom clair et descriptif.
  1. Ouvrez le panneau Widget response settings.
  2. Vérifiez les noms de champs générés automatiquement, listés comme Field 1, Field 2, et ainsi de suite.
  3. Survolez un nom de champ et cliquez sur l’icône crayon pour le modifier.
  4. Saisissez un nom, puis cliquez sur la coche pour confirmer ou sur l’icône d’annulation pour annuler la modification.
  5. Cliquez sur Apply pour enregistrer vos modifications.
Panneau des paramètres de réponse du widget avec la liste des noms de champs et le bouton Apply
Apply reste désactivé tant que vous n’avez pas modifié au moins un nom de champ.

​
Contenu inclus dans l’export

Kameleoon exporte les réponses collectées via un widget PBX dans les mêmes conditions que les exports CSV des enquêtes. Le fichier exporté inclut :
  • Les horodatages des réponses
  • Le code visiteur
  • Les réponses par question
  • Les détails de la campagne et de la variation

​
Envoyer les réponses du widget à Google Sheets (facultatif)

Vous pouvez configurer un widget PBX pour envoyer les réponses aux enquêtes et formulaires directement à Google Sheets. Vous devez d’abord configurer votre Google Sheet comme décrit dans ce guide. Lorsque vous écrivez le prompt pour connecter votre widget à Google Sheets, suivez ces directives :
  1. Définissez un déclencheur de soumission clair : Spécifiez quel élément déclenche la requête. Le déclencheur est généralement le bouton CTA principal (par exemple, SubmitButton).
  2. Utilisez une requête HTTP POST externe : Définissez la méthode sur POST et incluez l’URL de votre application web Google Apps Script.
  3. Fournissez l’URL de l’application web explicitement : Incluez toujours l’URL complète (par exemple, https://script.google.com/macros/s/XXXXXXXX/exec). PBX ne peut pas l’inférer ou la générer automatiquement.
  4. Listez tous les éléments à envoyer : Nommez explicitement chaque champ (par exemple, email, rating, comment).
Ne vous fiez pas au comportement implicite. PBX nécessite des noms de champs exacts.
  1. Faites correspondre les noms de paramètres exactement : Assurez-vous que les noms correspondent exactement entre les noms d’éléments de votre widget, la charge utile de la requête et les en-têtes de colonne de Google Sheets.
Exemple de prompt pour l’intégration Google Sheets :

​
Écrire des prompts efficaces

Des prompts bien écrits améliorent considérablement la qualité du widget généré.

​
Utiliser une structure claire

Les meilleurs prompts suivent une structure logique :
Exemple :

​
Soyez précis

Des prompts précis produisent des mises en page et des styles plus exacts. Mauvais prompt : Create a popup for a newsletter Meilleur prompt : Create a centered modal popup for newsletter subscription with a modern ecommerce design. Include an email input field and a large CTA button offering 15% off.

​
Définir explicitement les éléments d’interface

Spécifiez toujours les éléments dont vous avez besoin, tels que les titres, boutons, champs de saisie, liens secondaires, icônes ou images. Exemple :

​
Décrire le comportement

PBX peut générer la logique du widget si vous la spécifiez. Exemples :
  • Show popup after 5 seconds
  • Close popup when clicking outside
  • Close popup when clicking "No thanks"

​
Itérer plutôt que réécrire

Plutôt que de réécrire tout le prompt, affinez votre widget étape par étape. Le prompting itératif améliore les résultats efficacement. Exemples :
  • Make the CTA button darker
  • Increase padding inside the popup
  • Add rounded corners to the input field