---
title: "Créer un onboarding personnalisé"
description: "Parcourez le processus complet de création d'un onboarding multi-écrans — écrans, contenu, navigation et branchements conditionnels — à travers un exemple concret."
---

Un flow multi-écrans dans le Flow Builder est une séquence d'écrans reliés par des actions de navigation. Le flow peut rester linéaire ou se ramifier selon les réponses de l'utilisateur collectées sur un écran précédent. Ce tutoriel couvre le processus de bout en bout — création des écrans, construction du contenu, câblage de la navigation et ajout de branchements conditionnels — en prenant comme exemple un onboarding en quatre écrans.

L'exemple utilise :

- Une **saisie de prénom** qui expose le prénom de l'utilisateur comme variable pour la personnalisation.
- Un **quiz à choix unique** dont la réponse détermine quel écran l'utilisateur voit ensuite.
- **Deux chemins de branchement** avec des textes adaptés à chaque segment d'audience.
- Un **paywall** comme écran final.

Ce même schéma s'applique à tout flow qui personnalise le contenu selon les saisies de l'utilisateur.

Vous préférez la vidéo ? Ce tutoriel de démarrage rapide couvre le même processus de bout en bout :

<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/aa-m459VIuY?si=zN_Co6B6qB88UPZP"
        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>

## Avant de commencer \{#before-you-start\}

- [Créez des produits](create-product) dans l'Adapty Dashboard. L'exemple de flow en utilise deux — un abonnement Annuel et un Mensuel.
- [Connectez Adapty à l'App Store et Google Play](integrate-payments).

## 1. Configurer les styles réutilisables \{#1-set-up-reusable-styles\}

Les styles réutilisables vous permettent d'appliquer une typographie et des couleurs cohérentes sur tous les écrans en un seul clic. Les styles de couleur comportent une variante Claire et une variante Sombre, de sorte que le flow prend automatiquement en charge les deux thèmes.

Pour les instructions complètes, consultez [Styles et apparence — Styles réutilisables](builder-styling#reusable-styles).

Pour configurer les styles :

1. Dans le panneau gauche, ouvrez le panneau **Styles** Styles.
2. Dans l'onglet **Colors**, cliquez sur **Plus Create style** et ajoutez les couleurs que vous souhaitez réutiliser. Pour chaque couleur, choisissez une valeur Claire, passez à l'onglet Dark et choisissez une valeur Sombre.

3. Dans l'onglet **Text**, cliquez sur un style existant pour modifier sa police, sa graisse et sa taille, ou cliquez sur **Plus Create style** pour ajouter des préréglages personnalisés.

## 2. Créer les écrans \{#2-create-the-screens\}

Un flow est une séquence d'écrans. Configurez le premier écran avec la base commune — mise en page, arrière-plan et zone de sécurité — puis dupliquez-le pour les autres. Ainsi, tous les écrans partagent la même fondation et vous ne la configurez qu'une seule fois.

Pour en savoir plus sur la gestion des écrans, consultez [Écrans et calques — Gérer les écrans](paywall-layout-and-products#manage-screens).

Pour configurer les écrans :

1. Cliquez sur une zone vide du canevas du premier écran pour ouvrir ses paramètres.
2. Sous **System UI**, désactivez **Safe area** pour que les arrière-plans et les éléments alignés sur les bords puissent s'étendre jusqu'aux bords de l'écran.
3. Sous **Fill**, choisissez un type d'arrière-plan et configurez-le — par exemple, une **Image** Image qui s'affiche derrière chaque écran du flow.
4. Sous **Layout**, définissez la direction sur **Vertical** Vertical et choisissez une distribution adaptée à votre design.

5. Dans la section **Screens** du panneau gauche, cliquez sur le menu à trois points Context menu du premier écran et choisissez **Duplicate**. Répétez l'opération jusqu'à avoir quatre écrans au total — le deuxième chemin de branchement sera ajouté plus tard en dupliquant le premier.
6. Renommez chaque écran selon son rôle — dans notre exemple : `Welcome`, `Quiz`, `Rock path` et `Paywall`.

## 3. Construire l'écran d'introduction \{#3-build-the-introduction-screen\}

Le premier écran donne généralement le ton — un titre, une liste de fonctionnalités et un appel à l'action qui ouvre la suite du flow. Dans notre exemple, il s'agit de l'écran Welcome.

Cliquez sur l'écran **Welcome** dans le panneau **Screens**, puis ajoutez les éléments :

1. Ajoutez l'image principale. Cliquez sur **+** > **Media** > **Image**, téléversez votre image et ajustez les marges si nécessaire.

2. Ajoutez un titre : cliquez sur **+** > **Text**, choisissez un style de titre parmi vos styles de texte enregistrés et modifiez le champ **Content**.

3. Ajoutez la liste de fonctionnalités. Cliquez sur **+** > **List** > **Icon Cards**, puis modifiez l'icône et le libellé de chaque carte.

4. Ajoutez un bouton de navigation principal en bas. Il recevra une action lors de l'étape de navigation.

## 4. Construire l'écran de saisie et de quiz \{#4-build-the-input-and-quiz-screen\}

Le deuxième écran collecte des informations auprès de l'utilisateur. Dans notre exemple, il demande un prénom et une réponse à choix unique qui détermine quel chemin l'utilisateur verra ensuite.

Pour en savoir plus sur les saisies et les quiz, consultez [Saisies et formulaires](builder-inputs-and-forms) et [Sondages et quiz](onboarding-quizzes).

Cliquez sur l'écran **Quiz** dans le panneau **Screens**, puis ajoutez les éléments. Chaque groupe sur l'écran — intro, question + saisie, question + quiz — est placé dans son propre Conteneur Vertical pour que les éléments associés restent groupés visuellement.

1. Ajoutez le titre et le corps de l'intro. Cliquez sur **+** > **Text** > **H1** pour le titre et **+** > **Text** > **Body** pour le texte d'accompagnement.
2. Groupez l'intro. Cliquez sur **+** > **Layout** > **Vertical Container**, faites glisser le nouveau conteneur en haut de l'arborescence des calques, puis faites glisser le H1 et le corps à l'intérieur.

3. Ajoutez la première question et la saisie. Cliquez sur **+** > **Text** pour la légende de la question, puis cliquez sur **+** > **Inputs** > **Text** pour le champ.
4. Définissez l'**Element ID** de la saisie dans l'onglet **Design** — dans notre exemple, `name`. Cela expose la valeur comme variable référençable par les autres écrans.

5. Groupez la légende et la saisie dans un Conteneur Vertical de la même façon que l'intro.
6. Ajoutez la deuxième question et le quiz. Cliquez sur **+** > **Text** pour la légende, puis cliquez sur **+** > **Quiz** et choisissez un préréglage de mise en page comme Icon Options. Configurez les options — dans notre exemple, `Rock` et `Hip hop`.
7. Groupez la légende et le quiz dans un Conteneur Vertical de la même façon.
8. Définissez les ID des options. Sélectionnez chaque option du quiz, ouvrez l'onglet **Interactions** et définissez son **Element ID**. Ces ID sont référencés dans la navigation conditionnelle plus tard.

9. Passez le quiz en choix unique : cliquez sur une zone vide du canevas pour ouvrir les **Screen settings**, faites défiler jusqu'à **Selectable Groups**, cliquez sur le nom du groupe du quiz et définissez le type sur **Single choice**.

10. Ajoutez un bouton principal en bas — c'est le bouton Suivant qui déclenche le branchement.

## 5. Construire le premier chemin de branchement \{#5-build-the-first-branching-path\}

Chaque écran de chemin adapte le contenu à un segment d'audience. Dans notre exemple, le chemin Rock propose du contenu axé rock — playlists, artistes et recommandations.

Pour en savoir plus sur les variables, consultez [Variables](onboarding-variables).

Pour construire l'écran :

1. Dans le panneau **Screens**, cliquez sur l'écran **Rock path**.
2. Ajoutez un titre. Placez le curseur dans le champ **Content** à l'endroit où la personnalisation doit apparaître, cliquez sur l'icône de variable Variable icon et ouvrez l'onglet **Elements**. Choisissez l'écran où se trouve la saisie — dans notre exemple, **Quiz** — puis sélectionnez la variable de valeur de la saisie. Le sélecteur la résout sous la forme `<elementId>.value` — dans notre exemple, `name.value`. Au moment de l'exécution, le titre se met à jour avec ce que l'utilisateur a saisi.

3. Ajoutez le texte du corps comme éléments de texte supplémentaires, adaptés au segment d'audience de ce chemin.
4. Ajoutez un bouton principal en bas.

## 6. Construire le deuxième chemin de branchement \{#6-build-the-second-branching-path\}

Les écrans de chemin partagent généralement une mise en page — seul le texte change. Dupliquez le premier écran de chemin et mettez le contenu à jour.

Pour dupliquer et mettre à jour :

1. Dans le panneau **Screens**, sélectionnez le premier écran de chemin et appuyez sur ⌘D / Ctrl+D pour le dupliquer. La copie apparaît à la fin de la liste des écrans.
2. Renommez la copie — dans notre exemple, `Hip hop path` — et faites-la glisser à la bonne position dans la liste des écrans, de sorte qu'elle soit à côté de l'écran dont elle a été dupliquée.

3. Mettez à jour le texte du corps pour l'autre segment d'audience. Le titre personnalisé continue de fonctionner — la variable est conservée.

## 7. Construire le paywall \{#7-build-the-paywall\}

Le dernier écran est le paywall — là où l'utilisateur peut s'abonner. Pour un guide plus complet des mécaniques de paywall, consultez [Créer un écran de paywall basique](basic-paywall-screen). La version ci-dessous condense ce guide.

Cliquez sur l'écran **Paywall** dans le panneau **Screens**, puis ajoutez les éléments :

1. Ajoutez un **Horizontal Container** en haut et insérez un bouton **Close** à l'intérieur. Le préréglage Close est préconfiguré.
2. Ajoutez l'image principale, le titre (avec la même variable de personnalisation que sur les écrans de chemin) et un sous-titre comme texte d'accompagnement.

3. Ajoutez les produits : cliquez sur **+** > **Products** et choisissez **Vertical List**. Assignez à chaque carte un produit depuis le menu déroulant dans l'onglet **Design**.
4. Cliquez sur la carte du produit par défaut et activez **Set as default product** pour qu'il soit présélectionné au chargement de l'écran.

5. Ajoutez le bouton d'achat. Cliquez sur **+** > **Buttons** et choisissez un préréglage. Dans l'onglet **Interactions**, cliquez sur **Add trigger** > **On tap** > **Add action** et définissez **Action** sur **Purchase** avec **Product** comme `products.selectedProduct`.

6. Ajoutez le template **Button** > **Links** à l'écran. Il comprend trois liens de pied de page : Restore Purchases, Terms of Use et Privacy Policy.

    Le lien Restore est préconfiguré. Pour configurer les autres liens, sélectionnez l'élément bouton, ouvrez l'onglet **Interactions** et définissez la cible pour l'action **Open URL**.

## 8. Câbler la navigation entre les écrans \{#8-wire-navigation-between-the-screens\}

Les écrans ne se connectent pas automatiquement les uns aux autres. Utilisez des déclencheurs **On tap** et des actions **Navigate to** pour relier le bouton principal de chaque écran à l'écran suivant. Un écran qui se branche selon les saisies de l'utilisateur utilise une **Conditional action** à la place.

Pour en savoir plus sur la navigation et les actions conditionnelles, consultez [Navigation et interaction](onboarding-navigation-branching) et [Actions — Actions conditionnelles](onboarding-actions#conditional-actions).

Pour câbler la navigation dans l'exemple de flow :

1. **Navigation statique depuis l'écran d'introduction.** Ouvrez l'écran Welcome, sélectionnez le bouton principal et passez à l'onglet **Interactions**. Cliquez sur **Add trigger** > **On tap** > **Add action**, définissez **Action** sur **Navigate to** et choisissez l'écran suivant — dans notre exemple, l'écran Quiz.

2. **Navigation conditionnelle depuis le quiz.** Ouvrez l'écran Quiz, sélectionnez le bouton Suivant et ajoutez un déclencheur **On tap** avec une **Conditional action**. Configurez la règle IF/ELSE :
   - Dans le sélecteur de variable, ouvrez l'onglet **Elements**, choisissez l'écran **Quiz** et sélectionnez `quiz.selectedOptionId`.
   - Utilisez l'opérateur **Equals** et comparez avec l'ID d'une des options — dans notre exemple, l'option Rock.
   - **IF** la comparaison correspond, déclenchez **Navigate to** et choisissez le premier écran de chemin.
   - **ELSE**, déclenchez **Navigate to** et choisissez le deuxième écran de chemin.

3. **Navigation statique depuis chaque chemin de branchement vers le paywall.** Répétez le schéma de l'étape 1 sur chaque écran de chemin, avec le paywall comme destination.

## Prochaines étapes \{#next-steps\}

- [Enregistrez et publiez votre flow](builder-save-publish).
- [Ajoutez le flow à un placement](create-placement) pour commencer à le montrer aux utilisateurs.
- Pour des flows spécifiques à une audience (au lieu de branchements dans le flow), créez des segments d'audience et assignez différents flows sur la page Placement.

:::link
Vous souhaitez en savoir plus sur la création de flows ? Regardez les tutoriels vidéo étape par étape dans notre [playlist YouTube](https://www.youtube.com/playlist?list=PLMksWqaZiWtM).
:::