Créer un flow d'onboarding personnalisé

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 en fonction des saisies utilisateur collectées sur un écran précédent. Ce tutoriel couvre l’ensemble du processus — création des écrans, construction de leur contenu, câblage de la navigation et ajout de branchements conditionnels — en prenant comme exemple un flow d’onboarding de quatre écrans.

L’exemple utilise :

• Un champ de saisie du nom qui expose le nom de l’utilisateur sous forme de 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 un contenu adapté à chaque segment d’audience.
• Un paywall comme écran final.

Ce même schéma s’applique à tout flow qui personnalise le contenu en fonction des saisies de l’utilisateur.

Vous préférez le format vidéo ? Ce tutoriel de démarrage rapide couvre l’intégralité du processus, de bout en bout :

Avant de commencer

• Créez des produits dans Adapty Dashboard. L’exemple de flow utilise deux produits — un abonnement Annuel et un Mensuel.
• Connectez Adapty à l’App Store et Google Play.

1. Configurer des styles réutilisables

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 Clair et une variante Sombre, de sorte que le flow prend automatiquement en charge les deux thèmes.

Pour des instructions complètes, consultez Styles et apparence — Styles réutilisables.

Pour configurer les styles :

1. Dans le panneau gauche, ouvrez le panneau Styles .
2. Dans l’onglet Colors, cliquez sur Create style et ajoutez les couleurs que vous réutiliserez. Pour chaque couleur, choisissez une valeur Light, passez à l’onglet Dark et choisissez une valeur Dark.

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

2. Créer les écrans

Un flow est une séquence d’écrans. Configurez le premier écran avec la base commune — disposition, arrière-plan et zone de sécurité — puis dupliquez-le pour les suivants. Ainsi, chaque écran partage la même fondation et vous n’avez à la configurer qu’une seule fois.

Pour en savoir plus sur la gestion des écrans, consultez Écrans et calques — Gérer les écrans.

Pour configurer les écrans :

1. Cliquez sur une zone vide du canevas sur le premier écran pour ouvrir les paramètres de l’écran.
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 qui s’affiche derrière chaque écran du flow.
4. Sous Layout, définissez la direction sur Vertical et choisissez une distribution adaptée à votre design.

5. Dans la section Screens du panneau gauche, cliquez sur le menu trois points sur le premier écran et choisissez Duplicate. Répétez 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

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

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

1. Ajoutez l’image principale. Cliquez sur + > Media > Image, importez votre image et ajustez les marges si nécessaire.

2. Ajoutez un titre : cliquez sur + > Text, choisissez un style de titre dans vos styles de texte enregistrés, puis 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. Son action sera configurée lors de l’étape de navigation.

4. Créer l’écran de saisie et de quiz

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

Pour en savoir plus sur les saisies et les quiz, consultez Saisies et formulaires et Sondages et quiz.

Cliquez sur l’écran Quiz dans le panneau Screens, puis ajoutez les éléments. Chaque groupe à l’écran — intro, question + saisie, question + quiz — est dans son propre Conteneur Vertical afin que les éléments associés restent regroupés visuellement.

1. Ajoutez le titre et le corps du texte d’introduction. Cliquez sur + > Text > H1 pour le titre et + > Text > Body pour le texte d’accompagnement.
2. Regroupez l’introduction. Cliquez sur + > Layout > Vertical Container, faites glisser le nouveau conteneur en haut de l’arborescence des calques, puis faites-y glisser le H1 et le corps de texte.

3. Ajoutez la première question et le champ de saisie. Cliquez sur + > Text pour le libellé de la question, puis sur + > Inputs > Text pour le champ.
4. Définissez l’Element ID du champ dans l’onglet Design — dans notre exemple, name. Cela expose la valeur comme variable accessible par les autres écrans.

5. Regroupez la légende et le champ de saisie dans un Vertical Container, de la même façon que pour l’intro.
6. Ajoutez la deuxième question et le quiz. Cliquez sur + > Text pour la légende, puis sur + > Quiz et choisissez un preset de mise en page comme Icon Options. Configurez les options — dans notre exemple, Rock et Hip hop.
7. Regroupez la légende et le quiz dans un Vertical Container de la même façon.
8. Définissez les identifiants des options. Sélectionnez chaque option du quiz, ouvrez l’onglet Interactions et renseignez son Element ID. Ces identifiants seront utilisés dans la navigation conditionnelle plus loin.

9. Passez le quiz en mode choix unique : cliquez sur une zone vide du canvas pour ouvrir les Screen settings, faites défiler jusqu’à Selectable Groups, cliquez sur le nom du groupe du quiz, puis 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. Créer le premier chemin de branchement

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

Pour en savoir plus sur les variables, consultez Variables.

Pour créer 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 , puis ouvrez l’onglet Elements. Sélectionnez l’écran contenant le champ de saisie — dans notre exemple, Quiz — puis sélectionnez la variable de valeur du champ. 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 corps du texte sous forme d’éléments 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

Les écrans de chemin partagent généralement la même mise en page — seul le contenu 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 au bon endroit dans la liste des écrans, de façon à ce qu’elle soit placée à côté de l’écran dont elle est issue.

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

7. Construire le paywall

Le dernier écran est le paywall — celui où l’utilisateur peut s’abonner. Pour une présentation complète des mécanismes de paywall, consultez Créer un écran de paywall basique. La version ci-dessous condense cette présentation.

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

1. Ajoutez un Horizontal Container en haut et insérez-y un bouton Close. 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 parcours), et un sous-titre comme texte d’accompagnement.

3. Ajoutez les produits : cliquez sur + > Products et choisissez Vertical List. Assignez un produit à chaque carte via 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 preset. Dans l’onglet Interactions, cliquez sur Add trigger > On tap > Add action et définissez Action sur Purchase avec Product défini sur products.selectedProduct.

6. Ajoutez le modèle 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, puis définissez la cible de l’action Open URL.

8. Relier la navigation entre les écrans

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

Pour en savoir plus sur la navigation et les actions conditionnelles, consultez Navigation et interaction et Actions — Actions conditionnelles.

Pour relier 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 Next, et ajoutez un déclencheur On tap avec une Conditional action. Configurez la règle IF/ELSE :
   • Dans le sélecteur de variables, ouvrez l’onglet Elements, choisissez l’écran Quiz et sélectionnez quiz.selectedOptionId.
   • Utilisez l’opérateur Equals et comparez avec l’ID de l’une des options — dans notre exemple, l’option Rock.
   • IF la comparaison correspond, déclenchez Navigate to et choisissez le premier écran de parcours.
   • ELSE, déclenchez Navigate to et choisissez le second écran de parcours.

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.

Étapes suivantes

• Enregistrer et publier votre flow.
• Ajouter le flow à un placement pour commencer à le montrer aux utilisateurs.
• Pour des flows spécifiques à une audience (plutôt que des branchements dans le flow), créez des segments d’audience et assignez différents flows sur la page Placement.