Vous souhaitez proposer une animation en plusieurs étapes sur votre site ? Vous pouvez au sein d'un seul élément Engage mettre en place un format qui contient plusieurs visuels et actions.

Ce type de format est intéressant pour guider vos nouveaux membres ou abonnés à travers un court parcours de découverte (format product tour ou mini onboarding).

Pour ce cas d'usage, il faudra suivre 3 paramétrages :

1. Intégrer le composant "champ caché" comme base de la logique globale, avec une variable associée
2. Créer le design de chaque étape au sein de rangées distinctes, et définir la valeur de la variable modifiée selon chacune des étapes
3. Configurer le passage d'une étape à l'autre, en changeant les valeurs des variables lors du clic sur le bouton

Retrouvez le détail pour chaque paramétrage dans la suite de cet article.

Mise en place du champ caché

Afin de contrôler le passage d'une étape à une autre, on utilise la fonctionnalité champ caché, disponible dans la sélection "champs de formulaires".

ur ce champ > Options de champ caché > Paramètres, nous attribuons un nom de variable, qui permettra de configurer le changement des états au sein de l'élément.

Dans notre exemple, nous définissons "etape" comme nom de variable et une valeur par défaut "1".

Cela signifie que pour le premier affichage (par défaut), l'élément Engage sera sur le bloc qui correspond à l'étape 1.

Configurer l'affichage des différentes étapes

Chaque écran correspond à un bloc de composants intégrés dans une rangée, sur laquelle nous appliquons nos paramètres d'affichage, en fonction de l'étape dans laquelle l'utilisateur se trouve.

Dans les options "Avancé" de chacune de ces rangées, cible "basé sur une variable", la valeur de la variable "etape" est définie : 1, 2, ou 3.

Le nom de la cible reprend le champ caché "field" , et le nom de la variable "etape" => "field:etape".

Rangée n°1 : paramétrage pour l'écran n°1 du carroussel

Rangée n°2 : paramétrage pour la fonctionnalité n°2 du carroussel

Rangée n°3 : paramétrage pour la fonctionnalité n°3 du carroussel

Définir la logique de passage d'une étape à l'autre

Cette première configuration étant remplie, il faut à présent définir comment l'utilisateur passe d'une étape à l'autre.

Dans notre cas, c'est le clic sur le bouton "Etape suivante" qui permet de changer d'écran. il faut donc paramétrer ce changement d'état dans le composant "bouton".

Ce paramétrage s'effectue dans les options du bouton. Dans l'onglet paramètre, vous allez définir :

• Texte du bouton
• Action = "changer la valeur d'un champ"
• Nom de variable du champ = nom de votre variable, ici "etape"
• Type de changement = Incrémenter
• Valeur du champ = 1. Techniquement, le bouton permet de changer la valeur "etape" = "etape" + 1
• Identifiant du bouton = identifiant de votre bouton d'action (utile pour le suivi analytics, afin d'isoler les interactions avec cet élément)

Ainsi l'affichage du bloc sera adapté automatiquement en fonction de la nouvelle valeur.

Une fois ces trois étapes remplies, définissez les conditions d'affichage habituelles et activez votre élément !

Suivi des performances

Retrouvez les performances de votre élément dans votre onglet statistiques : données impressions, vues et clics.

En revanche, le détail par écran et par action ne sera pas dissocié dans le Dashboard. Plus précisément, vous aurez les indicateurs suivants :

• Impressions : prend en compte le chargement de l'élément global.
• Vues : correspond à la visibilité de l'élément. Le détail par écran n'est pas disponible dans les statistiques Dashboard.
• Clics : représente l'ensemble des clics sur l'élément (hors bouton de fermeture). Le détail par boutons n'est pas disponibles dans les statistiques Poool.

Mis à jour le : 28/05/2026