---
title: "Visibilité conditionnelle"
description: "Afficher ou masquer des éléments selon des conditions."
---

<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/3w3YSOmI3tQ?si=vPhoQGt44SI285Ru"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>

Vous pouvez contrôler l'affichage d'un élément en lui ajoutant une condition. Un élément conditionnel n'est visible que pour les utilisateurs qui satisfont aux critères définis.

:::important
Si vous affichez ou masquez un élément via l'[action](onboarding-actions) **Show** ou **Hide**, celle-ci remplace la condition de **Visibility** définie sur cet élément.

Utilisez les conditions de **Visibility** pour les éléments dont l'affichage doit toujours dépendre d'un critère fixe. Utilisez les actions lorsque la visibilité doit changer en fonction d'une interaction de l'utilisateur — par exemple, afficher un bouton une fois qu'il a répondu à une question de quiz.
:::

Pour ajouter une condition à un élément :

1. Sélectionnez l'élément dans le canevas ou le panneau des calques.
2. Dans la section **Visibility** du panneau de droite, sélectionnez **Conditional**.

3. Configurez la condition en choisissant un type de propriété parmi trois onglets :
   - **Custom** : variables que vous créez et gérez ; leurs valeurs peuvent être mises à jour via les interactions de l'utilisateur. Voir [Variables](onboarding-variables) pour plus de détails.
   - **Products** : propriétés des produits de votre flow, comme le prix ou le nom.
   - **Elements** : états des autres éléments du flow, par exemple si un bouton de période d'essai est actif.
4. Saisissez la **Value** à faire correspondre.
5. Cliquez sur l'opérateur pour le modifier si nécessaire.
6. (Facultatif) Cliquez sur **Add condition** pour ajouter d'autres conditions. Utilisez le sélecteur pour exiger que toutes les conditions soient remplies, ou au moins l'une d'elles.