> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Apprenez à créer des expériences alimentées par l'IA en quelques minutes en rédigeant des prompts en langage naturel.

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](https://kameleoon.navattic.com/dac08g2).

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

<Note>
  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](../prompt-based-experimentation-faq#can-i-use-the-graphic-editor-on-a-variant-created-with-ai).
</Note>

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/new-experiment.png)
</Frame>

4. Entrez les informations requises et cliquez sur **Create**.

<Tip>
  Si vous utilisez PBX sans le script Kameleoon installé, consultez la [FAQ PBX](../prompt-based-experimentation-faq#can-i-create-a-prompt-based-experiment-without-installing-the-kameleoon-script) pour obtenir des conseils.
</Tip>

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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/draw-sketch.png)
</Frame>

Lorsque vous téléchargez ou collez une image et soumettez un prompt, PBX vous demande comment l'utiliser :

* **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](./import-designs-from-figma).

<Tip>
  Pour les détails sur les limitations de prompt, consultez la [FAQ PBX](../prompt-based-experimentation-faq#can-i-create-any-type-of-variant-with-prompts).
</Tip>

#### 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 si votre prompt l'exige—par exemple, pour référencer un élément de design d'une page différente.

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

#### 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](./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.

#### Générer des idées d'optimisation

Pour obtenir des suggestions pour votre page :

1. Tapez un prompt tel que *« Suggest ideas to optimize this page. »*
2. Examinez la liste d'améliorations exploitables générée par l'IA.
3. Cliquez sur **Regenerate** pour de nouvelles idées ou **Cancel** pour utiliser un prompt différent.

<Tip>
  Pour des informations sur la raison pour laquelle le même prompt peut conduire à différents résultats lors de la régénération, consultez [cette entrée de la FAQ PBX](../prompt-based-experimentation-faq#why-can-the-same-prompt-lead-to-different-outputs-when-tried-multiple-times).
</Tip>

#### Construire des variants en parallèle

Construisez plusieurs variants simultanément. Pendant qu'un variant se génère, vous pouvez immédiatement en commencer un autre. Une icône de chargement indique la progression, et Kameleoon vous notifie lorsque chaque variant est prêt.

### 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 lorsque votre prompt l'exige—par exemple, pour référencer une fonctionnalité ou un élément de design d'une page différente. Vous pouvez le demander directement dans votre prompt.

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

<Frame>
  <img src="https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/variations.png" alt="Choisir une variation générée" width="50%" />
</Frame>

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.

#### 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](./how-to-write-effective-prompts-dos-and-donts) pour obtenir les meilleurs résultats.

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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/css-js.png)
</Frame>

Cliquez sur l'icône **Code** en haut à droite, ou cliquez sur les icônes de code **`[CSS]`** ou **`JS`** dans le panneau de génération. Cliquez sur **`CSS`** ou **`JS`** pour afficher et modifier le code pertinent. Cliquez sur **Edit code** pour apporter des modifications.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/code-editor.png)
</Frame>

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.

<Tip>
  Pour affiner un variant en utilisant des prompts au lieu de code, consultez la [FAQ](../prompt-based-experimentation-faq#my-first-prompt-didnt-generate-the-right-output-can-i-submit-additional-prompts-to-fix-whats-incorrect).
</Tip>

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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/views.png)
</Frame>

Cliquez sur **Simulate** pour tester l'expérience en direct sur votre site web avant de la lancer.

#### Partager votre expérience

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/prompt-based-experimentation/create-a-prompt-based-experiment/share.png)
</Frame>

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.
