Créer une expérience basée sur un prompt

Vous pouvez 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.

4. Entrez les informations requises et cliquez sur Create.

​

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

​

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.

​

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.

​

Navigation IA

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

​

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.

​

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.

​

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

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.