Créer un 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 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 :

Avant de commencer

• Créez des produits 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.

1. Configurer les 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 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.

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 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 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 — 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.

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 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 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

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

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 et Sondages et quiz.

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

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.

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 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

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

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. 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

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 et Actions — Actions conditionnelles.

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

• Enregistrez et publiez votre flow.
• Ajoutez le flow à un 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.