Skip to main content
PBX Build est l’éditeur d’expériences alimenté par l’IA de Kameleoon. Vous pouvez l’utiliser pour créer des expériences alimentées par l’IA en quelques minutes en rédigeant un prompt simple—aucun codage nécessaire. Pour une visite guidée de la prompt-based experimentation dans Kameleoon, cliquez ici.

​
Accéder au flux de création

  1. Dans l’application Kameleoon, allez dans Experiences > A/B Test > New experiment.
  2. Si vous utilisez le plan Starter ou Trial, l’interface basée sur des prompts s’ouvre automatiquement.
  3. Si vous utilisez le plan Enterprise, une pop-up apparaît. Sélectionnez By Prompt.
Vous ne pouvez pas utiliser l’éditeur graphique pour modifier une variante générée par PBX. Pour plus d’informations, consultez la FAQ.
  1. Entrez les informations requises et cliquez sur Create.
Si vous utilisez PBX sans le script Kameleoon installé, consultez la FAQ PBX pour obtenir des conseils.

​
Configurer votre expérience

​
1. Définir votre prompt

Dans le champ prompt, décrivez la modification que vous souhaitez apporter en langage naturel. Vous pouvez redimensionner la zone de prompt en cliquant et en faisant glisser le coin. Exemples :
  • « Update the product listing grid to display 2 products per row instead of 4. »
  • « Change the default sorting option to ‘Price, low to high’. »
En analysant votre site web et vos ressources visuelles existantes, Kameleoon détecte et mappe automatiquement l’identité de votre marque, y compris votre ton de voix, vos polices, vos images et votre palette de couleurs.

​
Utiliser des images et des designs

Pour fournir un contexte visuel ou ajouter des assets spécifiques (comme des bannières ou des pop-ups), cliquez sur + > Add an image ou collez une image depuis votre presse-papiers. Vous pouvez joindre jusqu’à 10 images dans un seul prompt pour un contexte visuel complet.
Ajouter une image ou dessiner un croquis dans la zone de prompt
PBX détecte automatiquement comment utiliser chaque image—aucun étiquetage manuel n’est requis :
  • Asset : PBX insère le fichier image directement dans la variation.
  • Mockup : PBX utilise l’image comme référence pour recréer le design avec du code.
Pour prévisualiser une image téléchargée, cliquez dessus dans la zone de prompt. Vous pouvez également cliquer sur Copy reference pour copier le lien de l’image. Vous pouvez également importer des designs Figma directement. Pour plus d’informations, consultez Importer des designs depuis Figma.
Pour les détails sur les limitations de prompt, consultez la FAQ PBX.

​
Utiliser la saisie vocale

Dictez votre prompt au lieu de le taper. Cliquez sur l’icône du microphone dans la barre d’outils de prompt, énoncez votre prompt, puis cliquez sur la coche pour le transcrire dans le champ de prompt.
La barre d'outils de prompt avec l'icône de microphone mise en évidence en bleu

​
Sélectionner des éléments

Aidez l’IA à identifier les éléments à modifier des manières suivantes :
  • Description textuelle : Décrivez l’élément dans votre prompt (par exemple, « Move the product grid below the banner »).
  • Boîte de sélection : Cliquez sur + > Draw sketch et entourez l’élément cible sur la page. Utilisez la boîte à outils pour dessiner, effacer ou supprimer votre sélection.
PBX peut également naviguer vers d’autres pages de votre site ou vers des sites externes si votre prompt l’exige—par exemple, pour référencer un élément de design d’une page différente ou pour utiliser un autre site web comme source d’inspiration.
Vous ne pouvez pas faire défiler ou dessiner en dehors de votre vue actuelle lorsque vous utilisez l’outil de dessin. Utilisez des descriptions textuelles pour les éléments situés plus bas sur la page.

​
Configurer les AI Settings

Personnalisez la façon dont l’IA génère des variantes et interagit avec votre site web. Cliquez sur l’icône + et sélectionnez AI Settings. Dans la barre latérale Projects, sélectionnez le projet que vous souhaitez modifier. Le menu AI Settings inclut deux onglets :
  • Master Prompt : Définissez des instructions générales et un contexte pour l’IA. Pour plus d’informations, consultez l’article Master Prompts.
  • Technical Settings : Configurez les préférences techniques pour votre projet. Vous pouvez ajuster les options suivantes :
    • Website adapts automatically to different screen sizes : Activez cette option pour les sites web responsives. Désactivez-la si votre version mobile utilise une URL distincte ou ne se met pas à jour lors du redimensionnement.
    • Enable support for dynamic websites (SPA, PWA…) : Activez cette option pour détecter les changements d’URL virtuelles et garantir que le ciblage d’URL et la collecte de données fonctionnent correctement.
    • Custom attribute : Définissez un attribut personnalisé pour permettre à Kameleoon de suivre chaque changement d’URL virtuelle, d’activer le ciblage d’URL et de collecter des données, telles que le nombre de pages vues.
    • Avoid dynamic IDs selectors : Spécifiez les sélecteurs à éviter.
Cliquez sur Save pour conserver vos modifications, ou cliquez sur Back to the editor pour revenir à l’interface de l’éditeur et ignorer les modifications.

​
2. Workflow IA

Lorsque vous soumettez un prompt, PBX travaille sur la modification en temps réel. Chaque action de l’IA apparaît au moment où elle se produit, accompagnée de son raisonnement en langage clair, afin que vous puissiez suivre ce que fait PBX à chaque étape.

​
Suivi et raisonnement en temps réel

Au fur et à mesure que PBX génère votre variation, vous pouvez voir chaque étape qu’il réalise et la logique qui la sous-tend. PBX met en surbrillance les éléments sur la page au fur et à mesure qu’il traite votre prompt, vous montrant exactement ce que l’IA cible. PBX peut naviguer vers d’autres pages de votre site ou vers des sites externes lorsque votre prompt l’exige. Vous pouvez référencer une fonctionnalité ou un élément de design d’une page différente, ou indiquer à l’IA un autre site à utiliser comme source d’inspiration. Vous pouvez le demander directement dans votre prompt—par exemple : « Reproduis la mise en page des filtres de recherche de ce site de réservation de voyages : www.example.com/search. »

​
Outils d’interaction

À des étapes clés du processus de génération, PBX s’arrête et présente l’un des outils d’interaction suivants avant de continuer :
  • Validation des éléments en surbrillance : PBX met en surbrillance l’élément qu’il a l’intention de modifier. Confirmez la sélection ou redirigez PBX vers un autre élément.
  • Sélecteur d’options : PBX présente deux options de design ou plus parmi lesquelles choisir. Sélectionnez l’option qui correspond le mieux à votre intention.
  • Confirmation : PBX résume l’action qu’il est sur le point d’effectuer et vous demande de confirmer avant de valider.
Cette boucle voir-comprendre-orienter détecte les erreurs de direction tôt, réduisant les retouches et les générations sans issue.

​
Choisir entre les variations

Après la génération, PBX présente plusieurs options de variation à comparer. Sélectionnez celle qui correspond le mieux à votre intention et cliquez sur Appliquer la version. Si aucune des options ne convient, continuez à prompter pour affiner le résultat ou fournir des détails supplémentaires.
Choisir une variation générée
L’IA peut également poser des questions de clarification (par exemple, sur les préférences d’image ou les types de contenu) pour s’assurer que le résultat correspond à ce que vous aviez en tête.

​
Copier une variation vers Figma

Une fois la variation prête, vous pouvez la copier dans le presse-papiers sous forme de calques Figma modifiables, puis la coller directement dans un fichier Figma, sans reconstruire le design à partir de zéro.
  1. Sur la carte Your version is ready, ouvrez le menu à trois points et cliquez sur Copy to Figma.
  2. Attendez que PBX prépare la variation. La progression s’affiche à chaque étape.
  3. Cliquez sur Copy to clipboard.
  4. Ouvrez Figma et collez avec ⌘ + V (macOS) ou Ctrl + V (Windows).
Copie d'une variation PBX vers Figma depuis le menu à trois points de la carte de variation
Le contenu collé apparaît sous forme de calques Figma natifs.
Les calques copiés fonctionnent mieux sur des variations simples et principalement statiques—les variations comportant de nombreux éléments interactifs peuvent ne pas se transférer correctement. PBX ne capture que le composant que vous avez créé, pas la page environnante complète.
Vous pouvez également démarrer ce flux depuis la carte de l’expérience dans le dashboard Experiments.

​
Annuler un prompt

La sortie de chaque prompt inclut un bouton Annuler. Cliquez dessus pour rétablir votre variation dans l’état où elle se trouvait lorsque ce prompt s’est terminé, en ignorant toutes les modifications apportées par les prompts suivants. Utilisez cette option lorsqu’un prompt de suivi fait évoluer la variation dans la mauvaise direction. Plutôt que de recommencer depuis le début, cliquez sur Annuler sur le prompt auquel vous souhaitez revenir et essayez une approche différente à partir de ce point.

​
Créer à partir de croquis

Concevez des composants comme des pop-ups ou des superpositions en les dessinant directement sur la page :
  1. Cliquez sur + > Draw sketch.
  2. Dessinez votre design.
  3. Demandez à l’IA de le construire (par exemple, « Build the popup based on my sketch »).
Suivez les bonnes pratiques pour rédiger des prompts pour obtenir les meilleurs résultats.

​
3. Examiner et ajuster le code généré

Cliquez sur le bouton Code dans l’en-tête pour ouvrir le panneau de code. Cliquez sur CSS ou JS pour afficher et modifier le code pertinent. Cliquez sur Edit code pour apporter des modifications.
Si vous lancez plusieurs prompts et générez plusieurs versions pour un variant donné, vous pouvez basculer entre ces variants à l’aide du menu déroulant en haut à gauche du panneau de code. Une fois que l’IA a généré du contenu pour votre expérience, vous pouvez affiner sa sortie en modifiant le code sous-jacent. Lorsque vous enregistrez vos modifications, Kameleoon génère automatiquement une nouvelle version de votre variant.
Pour affiner un variant en utilisant des prompts au lieu de code, consultez la FAQ.

​
4. Comparer et simuler

Utilisez les boutons d’en-tête pour basculer entre les vues :
  • Website display : Prévisualisez l’apparence du variant.
  • Code : Affichez l’implémentation technique.
  • Compare : Comparez différentes variations côte à côte.
Comparer et simuler les vues dans PBX

​
Aperçu sur différents appareils

Pour voir comment votre variante s’affiche sur différentes tailles d’écran, cliquez sur les icônes mobile, tablette ou bureau en haut de la page. Le changement de prévisualisation d’appareil n’affecte pas le code généré. Cliquez sur Simulate pour tester l’expérience en direct sur votre site web avant de la lancer.

​
Partager votre expérience

Partager votre expérience PBX
Cliquez sur l’icône de partage en haut à droite pour :
  • Copy link : Partagez un lien direct vers l’expérience.
  • Share on LinkedIn : Publiez votre expérience directement sur votre fil.

​
Finaliser l’expérience

Une fois votre variation terminée :
  1. Cliquez sur Finalize.
  2. Définissez vos objectifs, votre ciblage d’audience et votre allocation de trafic.
  3. Lancez votre expérience.
Vous êtes maintenant prêt à expérimenter plus rapidement que jamais, sans code et sans délai.

​
FAQ

Non, vous ne pouvez pas utiliser l’éditeur graphique sur les variants générés par IA. Bien que certains cas limites puissent en bénéficier, PBX gère tous les scénarios couverts par l’éditeur graphique. Pour éviter les conflits, Kameleoon désactive l’outil visuel pour les expériences générées par IA.
Oui, vous pouvez prompter des changements sur plusieurs pages. Naviguez vers les pages choisies et appliquez les prompts directement. Kameleoon combine automatiquement le code en une seule variation.Cependant, testez l’expérience complète à l’aide du mode Simulation pour vous assurer que le code des différentes pages n’entre pas en conflit.
Après avoir créé une variation sur la première page produit, naviguez vers la page produit suivante. Cette action exécute à nouveau le code généré par IA.Alternativement, utilisez le mode Simulation pour tester l’expérience sur toutes les pages pertinentes et garantir un comportement cohérent.
Oui, vous pouvez utiliser un design ou une maquette. Cliquez sur l’icône + > Add an image pour télécharger votre fichier. Cependant, une maquette seule est généralement insuffisante. Pour de meilleurs résultats, utilisez votre design avec des instructions claires et détaillées.Traitez PBX comme un développeur : fournissez des détails spécifiques pour le meilleur résultat.Exemple d’un bon prompt avec une maquette :
  • Joignez votre maquette ou fichier de design.
  • Décrivez les éléments à modifier.
  • Spécifiez les dimensions, les couleurs et l’espacement.
  • Expliquez les comportements interactifs.
  • Notez les exigences techniques.
PBX adopte les paramètres single-page application (SPA) de votre projet. Si vous avez configuré ces paramètres (voir Configurer une expérience sur une single-page app), PBX utilise automatiquement :
  • Vos attributs personnalisés.
  • Vos règles d’exclusion.
  • Toute autre configuration spécifique aux SPA.
Non. Vous devez attendre que PBX ait terminé de générer un variant avant de commencer à travailler sur un autre.
Ce problème se produit sur les pages sécurisées, telles que les zones connectées, qui bloquent le chargement dans une iframe. L’éditeur PBX utilise une iframe pour modifier en toute sécurité les pages web. Les paramètres de sécurité de votre site peuvent bloquer le contenu de l’iframe, entraînant un écran blanc.Comment le réparer : Demandez à votre équipe de développement de modifier la logique « frame-busting ». Le code doit vérifier si le nom du frame est kameleoon-pbx-preview. S’il correspond, la logique devrait permettre le chargement de la page.Exemple de code :
PBX génère un code propre, sécurisé, responsive et accessible. Il crée souvent des solutions plus robustes que le codage manuel, en particulier pour les sites web modernes et les single-page applications (SPA). PBX suit les bonnes pratiques QA, telles que les tests cross-navigateurs et les vérifications visuelles.Le code généré respecte également les configurations de votre projet :
  • PBX applique automatiquement les paramètres SPA et les attributs personnalisés.
  • Il respecte les règles d’exclusion.
Ces considérations garantissent que le code généré s’intègre en douceur à votre configuration et adhère aux règles des expériences codées manuellement.