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 : 
Create a centered modal popup widget.

- Layout: Two columns with an image placeholder on the left and a subscription form on the right.
- Content:
  - Title: Join an Exclusive Community
  - Description: Subscribe for exclusive discounts and get 15% off your next purchase.
  - Form: Email input field with placeholder "Enter your email address"
  - CTA button: Subscribe now
  - Secondary link: No thanks
- Style:
  - Modern ecommerce design
  - Rounded UI elements
  - Light beige background
  - Dark CTA button
- Behavior:
  - Display after 5 seconds
  - Close button in top right corner
  - Close popup when clicking "No thanks"
- Tracking: Track a goal called "Newsletter Signup" when the CTA button is clicked.
- Image: Use the following image in the image placeholder on the left: [https://www.whereyourimagelives.com](https://www.whereyourimagelives.com)

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

​
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 : 
Add a system to send widget form data to a Google Sheet using an HTTP request.

- Submission trigger: Use the button named "SubmitButton"
- Request configuration:
  - Request name: SendToGoogleSheets
  - Method: POST
  - Action URL: https://script.google.com/macros/s/AKfycbxxxxxxx/exec
- Data to send: Send the values of the following elements as parameters:
  - email
  - rating
  - comment
- Payload rules:
  - Each parameter key must exactly match the element name
  - Keys must also match the column headers in the Google Sheet
- Behavior:
  - Trigger the request when the SubmitButton is clicked
  - After successful submission, display a confirmation message: "Thank you for your response"
  - Optionally handle errors if the request fails

​
É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 : 
- Widget type
- Layout
- Content
- Style
- Behavior
Exemple : 
Create a modal popup widget.

- Layout: Two columns with an image on the left and a form on the right.
- Content:
  - Title: Join our community
  - Description: Get 15% off your first order
  - Email field
  - CTA button: Subscribe now
- Style:
  - Modern ecommerce design
  - Rounded buttons
  - Dark beige background
- Behavior:
  - Display after 5 seconds
  - Close button in top right corner
- Image: Use the following image in the image placeholder on the left: https://www.whereyourimagelives.com

​
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 : 
Add:
- Email input field
- Large CTA button
- Small legal disclaimer text
- "No thanks" link below the button

​
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