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

# Ajouter un élément de sondage à votre widget

> Créez des sondages NPS, CSAT et de feedback dans le Widget Studio à l'aide d'éléments de sondage tels que des boutons, des échelles, des choix multiples et des champs de réponse courte ou longue.

Dans le Widget Studio, vous pouvez créer des sondages entièrement fonctionnels (par exemple, NPS, CSAT, formulaires de satisfaction, retour produit) à l'aide d'un ensemble d'**Survey elements** dédiés. Chaque élément offre sa propre personnalisation.

La suite d'éléments Survey vous permet de :

* Créer des widgets NPS et CSAT structurés et conformes à votre marque.
* Collecter des retours qualitatifs et quantitatifs.
* Appliquer des règles de validation détaillées.
* Exporter ou router les réponses de manière flexible.

Les données de sondage peuvent être collectées **dans Kameleoon** (exportables au format .csv) ou **envoyées à un service externe** via une requête HTTP.

## Éléments de sondage

Les éléments de sondage sont listés sous la section **Survey** dans le panneau **Add element**.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-11.13.58.png)
</Frame>

* **Button :** Requis pour déclencher la soumission du sondage.
* **Short answer :** Collecte une saisie textuelle courte des utilisateurs.
* **Long answer :** Idéal pour des retours ouverts plus longs.
* **Multiple choice :** Prend en charge les cases à cocher, la sélection unique ou multiple, le champ facultatif « Other » et la randomisation des réponses.
* **NPS :** Collecte des données Net Promoter Score avec des questions de suivi facultatives.
* **Scale :** Affiche une échelle utilisant des chiffres ou des emojis.

Chaque élément est configurable à l'aide de paramètres et d'options de style dédiés dans le Widget Studio.

## Paramètres

### Button

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-csat-nps-and-survey/add-a-survery-element-to-your-widget/button.png)
</Frame>

#### Paramètres généraux

* **Button text :**
  * Saisissez le texte de votre bouton dans le champ de texte.
  * Utilisez les boutons au-dessus du champ de texte pour :
    * Modifier votre texte avec l'IA.
    * Accéder aux options de style.
    * Modifier la police de votre texte.
    * Changer l'alignement de votre texte.
    * Modifier la couleur de votre texte.
    * Ajouter un emoji.
  * Cliquez sur le **three-dots menu** pour :
    * Supprimer le formatage.
    * Agrandir l'éditeur de texte.
* **Style :** Modifie le type et la couleur d'arrière-plan du bouton.
* **Animation :** Sélectionnez une animation d'entrée ou de sortie pour votre bouton.

#### Paramètres avancés

Dans **Advanced Settings**, vous pouvez définir :

* **Default state :** Si le bouton apparaîtra par défaut.

<Note>
  Si vous sélectionnez **Disabled** et avez précédemment activé **Make required** sur un sondage, le bouton deviendra automatiquement actif une fois que les utilisateurs auront répondu à tous les éléments obligatoires du même écran.
</Note>

* **Redirection URL :** L'URL vers laquelle les utilisateurs qui cliquent sur le bouton seront redirigés.
* **Open in new tab :** Activez ou désactivez l'ouverture de l'URL de redirection dans un nouvel onglet.

#### Design

Il y a deux onglets dans le menu **Design** : **General** et **Style**.

##### General

Dans l'onglet **General**, vous pouvez définir :

* **Alignment :** Modifie l'alignement du bouton.
* **Reposition and resize :** Vous pouvez positionner votre bouton sur les axes **X** et **Y** ou définir sa largeur et sa hauteur en pixels ou en pourcentage.
  * Cliquez sur **Activate translate settings** pour accéder aux options de translation. Vous pouvez translater votre bouton depuis sa position actuelle sur l'axe X ou Y d'une valeur définie en pixels ou en pourcentage.
* **Devices Synchronization :** Sélectionnez un appareil et définissez comment le bouton sera synchronisé avec les autres appareils.
  * **Fully synchronized :** Toutes les propriétés du bouton seront synchronisées avec l'appareil maître.
  * **Partially synchronized :** Toutes les propriétés du bouton seront synchronisées avec l'appareil maître, sauf si une propriété change sur un autre appareil.
  * **No synchronization :** Aucune des propriétés du bouton ne sera synchronisée avec l'appareil maître. Vous devez définir les propriétés du bouton séparément sur cet appareil.
  * **Hide :** Le bouton ne sera pas visible sur l'appareil.
* **Padding :** Ajoute un padding entre les bordures du bouton et son texte.
* **CSS And Classes :** Ajoutez du CSS et des classes pour styliser votre bouton.

##### Style

Dans l'onglet **Style**, vous pouvez définir :

* **State :** Peut être **Enabled**, **Hover** ou **Disabled**.
* **Text :** Déterminez la hauteur de ligne du texte et appliquez les transformations souhaitées.
* **Background :** Modifiez le type ou la couleur d'arrière-plan du bouton.
* **Border :** Ajoutez une bordure sur tous les côtés du bouton ou une bordure personnalisée.
* **Shadow :** Ajoutez une ombre et modifiez sa couleur ou sa position.

### Short Answer et Long Answer

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.24.42-1536x914.png)
</Frame>

#### Paramètres généraux

* **Label/Question :** La principale invite/question.
* **Placeholder (optional) :** Texte affiché avant la saisie de l'utilisateur ; disparaît dès que l'utilisateur commence à taper.
* **Pre-filled value (optional) :** Insère une réponse prédéfinie dans le champ.
* **Default state :** Détermine si le champ est activé ou désactivé au chargement.

#### Paramètres avancés

* **Label position :** Positionnez l'étiquette au-dessus ou en dessous du champ de saisie.
* **Character limit :** Nombre maximum de caractères autorisés.
* **Make required :** Oblige les utilisateurs à répondre à une certaine question avant la soumission. Un `*` est automatiquement ajouté au label. L'activation de **Make required** révèle la section **Validation rule**, vous permettant de définir des contraintes de saisie supplémentaires.
* **Validation rule :**

| Type de règle    | Description                                                                  |
| ---------------- | ---------------------------------------------------------------------------- |
| **Not empty**    | La saisie ne doit pas être vide.                                             |
| **Alphanumeric** | N'accepte que des lettres et des chiffres.                                   |
| **Length**       | Définissez un nombre min/max de caractères.                                  |
| **Regex**        | Appliquez une expression régulière personnalisée pour le contrôle du format. |

* **Error message :** Message personnalisé affiché en cas d'échec de la validation. Le style du message d'erreur peut être configuré dans **Design** > **Answers** en sélectionnant l'état **Invalid**.

### Multiple Choice

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.24.42-1536x914.png)
</Frame>

#### Paramètres généraux

* **Question :** Le texte de la question affiché au-dessus des réponses.
* **Answers :** Ajoutez, supprimez ou réorganisez les choix de réponse. Cliquez sur **Add an answer** pour créer plus d'options.

#### Paramètres avancés

* **Multiple selection :** Permet aux utilisateurs de sélectionner plusieurs réponses. S'il est désactivé, une seule réponse peut être cochée.
* **Add "Other" :** Ajoute une saisie de texte libre intitulée « Other » afin que les utilisateurs puissent écrire une réponse personnalisée.
* **Randomize answers :** Mélange aléatoirement l'ordre des réponses listées pour chaque utilisateur afin de réduire le biais de sélection.
* **Make required :** S'il est activé, les utilisateurs doivent sélectionner au moins une réponse pour soumettre le sondage. Un `*` est automatiquement ajouté après le label de la question (même style que **Question** dans l'onglet **Design**).

### Scale

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.44.30-1-1536x916.png)
</Frame>

#### Paramètres généraux

* **Scale type :** Emojis, Stars, Hearts ou Numbers.
* **Scale item count :** Nombre de valeurs sur l'échelle (par exemple, 1-5).
* **Question :** L'invite principale.

#### Étiquettes de l'échelle

* **Label position :** Choisissez d'afficher les étiquettes au-dessus, en dessous ou de ne pas les afficher.
* Vous pouvez personnaliser les étiquettes pour chaque élément de l'échelle.

#### Paramètres avancés

**Make required :** Réponse obligatoire avant la soumission.

### NPS

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/add-a-survey-element-to-your-widget/Capture-decran-2025-05-19-a-15.44.01-1-1536x915.png)
</Frame>

#### Structure de la question

* La formulation de la question NPS est partiellement fixée en raison de la standardisation. Seules certaines parties de la question peuvent être modifiées. Pour changer la langue, accédez à l'onglet **Translation** et définissez une langue par défaut.

#### Champs

* **How likely are you to recommend (X) to (Y)?**
  * Vous pouvez modifier les champs produit/service et cible.
* **Follow-up question (optional) :**
  * Peut être affichée à **All users** ou uniquement à :
    * Promoters (score 9-10)
    * Passives (score 7-8)
    * Detractors (score 0-6)
  * Permet un contenu de suivi conditionnel.
* **Make required :** Seul le **score NPS initial** peut être marqué comme obligatoire. La question de suivi est toujours facultative.
