Ajouter un élément de sondage ou de formulaire

Les éléments de sondage et de formulaire collectent les réponses des visiteurs. Les éléments de sondage, comme Short answer et NPS, recueillent des retours pour des sondages. Les éléments de formulaire, comme Dropdown et Checkbox, recueillent des saisies pour des formulaires, notamment des dates, des heures et des bascules. Un même formulaire peut combiner des éléments des deux groupes, et un élément Button envoie les réponses. Les réponses comptent, car vous agissez en conséquence. Une inscription à une newsletter a besoin d’une adresse valide, et un sondage a besoin de réponses que vous pouvez comparer. Le Widget Studio vous permet de vérifier chaque réponse selon une règle, et il peut afficher ou masquer d’autres éléments en fonction de la réponse.

​

Éléments de sondage

Les éléments de sondage apparaissent dans la section Survey du panneau Add element.

• Button : Envoie le sondage lorsqu’un visiteur clique dessus. Choisissez A button is clicked sous When is the survey submitted? pour l’utiliser comme déclencheur.
• Short answer : Recueille une saisie textuelle courte auprès des visiteurs.
• Long answer : Recueille des retours plus longs et ouverts.
• Multiple choice : Prend en charge les cases à cocher, la sélection unique ou multiple, un champ facultatif « Other » et la randomisation des réponses.
• NPS : Recueille les données du Net Promoter Score, avec des questions de suivi facultatives.
• Scale : Affiche une échelle à l’aide d’emojis, d’étoiles, de cœurs ou de chiffres.
• Hidden input : Un champ de formulaire invisible qui stocke des métadonnées envoyées avec le formulaire, sans les afficher au visiteur.

Chaque élément se configure à l’aide de paramètres et d’options de style dédiés dans le Widget Studio.

​

Éléments de formulaire

La section Form contient ces éléments :

• Input : Champ de saisie entièrement personnalisable qui peut recueillir des données de type chaîne de caractères auprès des visiteurs.
• Date : Champ qui demande une date au visiteur. Le visiteur clique dessus pour ouvrir un panneau de sélection de date.
• Time : Champ qui demande une heure au visiteur. Le visiteur clique dessus pour ouvrir un panneau de sélection d’heure.
• Toggle : Bascule à deux états possibles, par exemple ON et OFF.
• Checkbox : Case à cocher à laquelle vous pouvez ajouter un élément Text.
• Radio button : Bouton radio auquel vous pouvez ajouter un élément Text.
• Dropdown : Menu déroulant entièrement personnalisable dans lequel vous pouvez ajouter des options sélectionnables.
• Text area : Zone de texte entièrement personnalisable avec un texte indicatif (placeholder).
• Range input : Curseur entièrement modifiable qui permet au visiteur de sélectionner une valeur dans une plage.
• Error message : Champ de texte qui affiche un message précis lorsque le formulaire contient une erreur.
• Multi step form

Utilisez des éléments de formulaire lorsque votre formulaire a besoin d’une date, d’une heure ou d’une bascule. La section Survey ne contient aucun élément pour ces champs.

​

Configurer les éléments de sondage

Sélectionnez un élément de sondage sur le canevas pour ouvrir ses paramètres.

​

Button

​

General settings

• Button text :
  • Saisissez le texte de votre bouton dans le champ de texte.
  • Utilisez les boutons situés devant le champ de texte pour :
    • Modifier votre texte avec l’IA.
    • Accéder aux options de style.
    • Modifier la police de votre texte.
    • Modifier l’alignement de votre texte.
    • Modifier la couleur de votre texte.
    • Ajouter un emoji.
  • Cliquez sur le three-dots menu pour :
    • Supprimer la mise en forme.
    • Agrandir l’éditeur de texte.
• Style : Modifiez 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.

​

Advanced settings

Dans Advanced Settings, vous pouvez définir :

• Default state : Indique si le bouton apparaît par défaut.

• Redirection URL : L’URL vers laquelle le bouton redirige les visiteurs.
• Open in new tab : Active ou désactive l’ouverture de l’URL de redirection dans un nouvel onglet.

​

Design

Deux onglets apparaissent dans le menu Design : General et Style.

General

Dans l’onglet General, vous pouvez définir :

• Alignment : Modifiez 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 décaler 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 choisissez comment le bouton se synchronise avec les autres appareils.
  • Fully synchronized : Le bouton synchronise toutes ses propriétés avec l’appareil maître.
  • Partially synchronized : Le bouton synchronise toutes ses propriétés avec l’appareil maître, sauf si vous modifiez une propriété sur un autre appareil.
  • No synchronization : Le bouton ne synchronise aucune propriété avec l’appareil maître. Définissez les propriétés du bouton sur cet appareil séparément.
  • Hide : Le bouton n’apparaît pas sur l’appareil.
• Padding : Ajoutez une marge intérieure 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 : Les options sont enabled, hover ou off.
• Text : Définissez 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 and long answer

​

General settings

• Label/Question : L’invite ou la question principale.
• Placeholder (optional) : Texte affiché avant la saisie du visiteur, qui disparaît dès qu’il 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.

​

Advanced settings

• Label position : Positionne le libellé devant ou derrière le champ de saisie.
• Character limit : Nombre maximal de caractères autorisés.
• Make required : Oblige les visiteurs à répondre à la question avant l’envoi. Un * est ajouté automatiquement au libellé. L’activation de Make required affiche la section Validation rule, qui permet de définir des contraintes de saisie supplémentaires.
• Validation rule: Vérifie la saisie selon une règle, par exemple Not empty ou Length. Pour découvrir chaque option et son fonctionnement, consultez Valider la saisie Short answer.
• Error message : Message personnalisé affiché lorsque la validation échoue. Configurez le style du message d’erreur dans Design > Answers en sélectionnant Invalid state.

​

Multiple choice

​

General settings

• Question : Le texte de la question affiché devant les réponses.
• Answers : Ajoutez, supprimez ou réorganisez les choix de réponse. Cliquez sur Add an answer pour créer d’autres options.

​

Advanced settings

• Multiple selection : Permet aux visiteurs de sélectionner plusieurs réponses. Si l’option est désactivée, les visiteurs ne peuvent sélectionner qu’une seule réponse.
• Add “Other” : Ajoute un champ de texte libre intitulé « Other » pour que les visiteurs puissent saisir une réponse personnalisée.
• Randomize answers : Mélange aléatoirement l’ordre des réponses proposées pour chaque visiteur afin de réduire le biais de sélection.
• Make required : Si l’option est activée, les visiteurs doivent sélectionner au moins une réponse pour envoyer le sondage. Un * est ajouté automatiquement après le libellé de la question (même style que Question dans l’onglet Design).

​

Scale

​

General settings

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

​

Scale labels

• Label position : Affiche les libellés devant les éléments de l’échelle, derrière eux, ou masque les libellés.
• Vous pouvez personnaliser les libellés de chaque élément de l’échelle.

​

Advanced settings

• Make required : Oblige les visiteurs à répondre avant l’envoi.

​

NPS

​

Question structure

• La formulation de la question NPS est en partie fixe, afin de garantir l’uniformité. Vous ne pouvez modifier que certaines parties de la question. Pour changer la langue, accédez à l’onglet Translation et définissez une langue par défaut.

​

Fields

• How likely are you to recommend (X) to (Y)?
  • Vous pouvez modifier les champs produit/service et cible.
• Follow-up question (optional) :
  • Afficher pour All users ou uniquement pour :
    • Promoters (score 9-10)
    • Passives (score 7-8)
    • Detractors (score 0-6)
  • Permet d’afficher un contenu de suivi conditionnel.
• Make required : Marquez comme obligatoire uniquement le initial NPS score. La question de suivi est toujours facultative.

​

Configurer les éléments de formulaire

Sélectionnez un élément de formulaire sur le canevas pour ouvrir ses paramètres. Les éléments de formulaire comportent deux onglets : General et States. L’onglet General contient les paramètres de l’élément. Pour un Dropdown, il comprend Initial state, Required et Placeholder. L’onglet States définit les styles de chaque état de l’élément, comme l’état par défaut. Pour un Dropdown, il comprend les styles de police, de couleur d’arrière-plan, de bordure, d’ombre et d’accessibilité.

​

Collecter les données du sondage

Vous pouvez collecter les données du sondage dans Kameleoon, où vous pouvez les exporter au format .csv, ou les envoyer à un service externe par une requête HTTP. Définissez ce paramètre dans l’onglet Survey Settings.

1. Ouvrez l’onglet Survey Settings dans le panneau Content.
2. Activez Collect survey data.
3. Sous When is the survey submitted?, sélectionnez le moment où les réponses sont envoyées. Sélectionnez A button is clicked et choisissez l’élément bouton, ou sélectionnez The widget is closed ou An answer is clicked.
4. Sous How are responses collected?, sélectionnez Kameleoon pour stocker les réponses dans Kameleoon, ou sélectionnez Externally (HTTP Request) pour les envoyer à une URL.
5. Si vous avez sélectionné Externally (HTTP Request), saisissez un Request name, sélectionnez une Method (GET ou POST), saisissez l’Action URL et, si vous le souhaitez, cliquez sur Add header request pour ajouter un en-tête.
6. Cliquez sur Save.

Pour exporter les réponses depuis Kameleoon, consultez Exportation de données d’enquête. Pour envoyer les réponses vers une feuille de calcul, consultez Envoyer les réponses au sondage vers Google Sheets.

​

Créer un formulaire d’inscription à une newsletter

Le Widget Studio inclut des modèles Newsletter à partir desquels vous pouvez commencer. Pour créer un formulaire d’inscription à une newsletter à partir de zéro, ajoutez ses éléments dans l’ordre suivant.

1. Cliquez sur Add element et sélectionnez Short answer dans la section Survey. Utilisez cet élément pour l’adresse e-mail.
2. Cliquez sur Add element et sélectionnez Dropdown dans la section Form.
3. Dans les paramètres de Dropdown, cliquez sur +Add option et saisissez Latest products.

4. Cliquez sur Add element et sélectionnez un second Dropdown. Dans la barre latérale gauche, masquez ce second menu déroulant jusqu’à ce qu’un visiteur sélectionne Latest products. Pour configurer l’événement qui l’affiche, consultez Ajouter une logique conditionnelle.

5. Cliquez sur Add element et sélectionnez Checkbox dans la section Form. Utilisez cet élément pour les conditions générales.
6. Cliquez sur Add element et sélectionnez Button dans la section Survey pour envoyer le formulaire.

Ensuite, définissez les règles qui vérifient les réponses. Consultez Valider la saisie Short answer.