Concevoir des onboardings

Warning

À partir du 1er octobre 2026, vous ne pourrez plus créer de nouveaux paywalls et onboardings dans le Paywall Builder et l’Onboarding Builder hérités, et leur support prend fin. Les paywalls et onboardings publiés continuent de fonctionner dans vos applications, et vous pouvez toujours les modifier. Créez-en de nouveaux dans Flow & Paywall Builder — consultez Dépréciation du Paywall Builder et de l’Onboarding Builder pour connaître les changements.

L’outil no-code de création d’onboardings pour applications mobiles est un outil puissant et personnalisable qui vous aidera à offrir à vos utilisateurs la meilleure expérience d’onboarding possible. Pas besoin d’être développeur ou designer pour obtenir un excellent résultat.

Écrans d’onboarding

L’onboarding est composé de plusieurs écrans que vous ajoutez et personnalisez.

Les utilisateurs appuient sur un bouton pour naviguer entre ces écrans.

Tip

Si certains de vos utilisateurs ont besoin d’un flow légèrement différent (par exemple, dans une application de fitness, vous pouvez afficher des images d’« objectif » différentes selon le genre de l’utilisateur), vous n’avez pas besoin de créer des onboardings séparés.

Il vous suffit de masquer certains écrans par défaut et de les afficher uniquement dans certains cas.

Éléments d’onboarding

Les éléments d’onboarding sont affichés à gauche dans l’ordre où ils apparaissent. Cliquez sur Add en haut à droite pour ajouter un nouvel élément.

Voici les groupes d’éléments disponibles :

Containers : Les conteneurs permettent de définir une mise en page flexible. Par exemple, pour ajouter un texte sur deux colonnes, ajoutez Columns puis faites glisser deux blocs de texte dans Columns dans le panneau de gauche. Ou, si vous ajoutez un carrousel, vous devrez ajouter des images aux éléments Media à l’intérieur.
Typography : Ajoutez des blocs de texte pré-formatés et configurez leur apparence selon vos besoins.
Media & Display : En plus des images et des vidéos, vous pouvez ajouter des graphiques animés qui mettent en valeur votre application et encouragent les utilisateurs.

Les formats vidéo pris en charge sont MP4 et WebM. La taille maximale des fichiers média est de 15 Mo.

Si vous souhaitez ajouter un élément animé non pris en charge (comme Lottie), vous pouvez le convertir en vidéo (par exemple avec cet outil) et l’intégrer en tant que vidéo.

Quiz : Créez de courts questionnaires avec des options de texte et d’image pour personnaliser l’expérience d’onboarding et mieux connaître vos utilisateurs.
Inputs : Collectez les données de vos utilisateurs.
Buttons : Les boutons permettent à vos utilisateurs de naviguer entre les écrans, de fermer l’onboarding ou d’accéder au paywall. Vous pouvez également ajouter des boutons brillants ou animés pour attirer l’attention de l’utilisateur et convertir son installation en achat.
Loaders : Les loaders animés maintiennent l’engagement des utilisateurs tout au long du processus.
User engagement : Ajoutez des témoignages, des listes d’e-mails d’utilisateurs et des comptes à rebours.

Note

Dans le groupe Media & Display, vous pouvez également ajouter du code HTML personnalisé si les options de personnalisation disponibles ne sont pas suffisantes.

Cependant, les éléments HTML personnalisés ne sont ni préchargés ni mis en cache, il est donc recommandé d’utiliser Raw HTML uniquement pour des éléments petits et légers.

ID d’élément et ID d’action

Si vous souhaitez utiliser un bouton pour des actions personnalisées, attribuez-lui un ID d’action, puis utilisez-le dans votre code source. Les ID d’action vous permettent de gérer différents boutons ayant le même ID d’action de la même façon.

Si vous souhaitez traiter la saisie utilisateur dans un champ spécifique (par exemple, enregistrer son âge ou son e-mail), assignez-lui un identifiant d’élément et utilisez-le dans votre code source pour associer les questions aux réponses. Les identifiants d’élément ne peuvent être utilisés qu’une seule fois dans votre onboarding.

Options de personnalisation

Dans le builder, vous disposez des options de personnalisation suivantes :

Onglet Styles : Ajustez l’apparence de l’élément.
Onglet Element : Définissez les attributs de l’élément, comme la visibilité, les actions lors de l’appui sur des boutons ou d’autres propriétés sans rapport avec l’apparence de l’élément.
Onglet Screen : Configurez les paramètres généraux de l’écran, comme un en-tête ou l’affichage d’un compteur d’écrans.

Copier des écrans et des éléments

Si vous avez créé un onboarding et souhaitez en réutiliser des parties, ou si vous voulez apporter de légères modifications et lancer des tests A/B, vous pouvez copier un ou plusieurs écrans d’un onboarding vers un autre.

Pour copier des écrans, ouvrez le générateur d’onboarding et, au choix :

Faites un clic droit sur un seul écran et sélectionnez Copy
Sélectionnez l’écran souhaité et appuyez sur Ctrl+C (Windows) ou ⌘+C (Mac)

Vous pouvez également copier des éléments individuels ou des blocs de texte, que ce soit au sein du même onboarding ou entre différents onboardings.

Copier des écrans depuis les funnels web-to-app

Si vous utilisez des funnels web-to-app créés dans FunnelFox et souhaitez réutiliser des écrans de ces funnels dans vos onboardings, vous pouvez le faire rapidement en copiant des écrans dans le générateur de funnels et en les collant dans le générateur d’onboardings :

Dans le constructeur de funnels FunnelFox, faites un clic droit sur un écran et sélectionnez Copy, ou sélectionnez l’écran et appuyez sur Ctrl+C/⌘+C.
Ouvrez le constructeur d’onboarding.
Faites un clic droit sur l’écran sous lequel vous souhaitez insérer l’écran copié et sélectionnez Paste, ou sélectionnez-le et appuyez sur Ctrl+V/⌘+V. L’écran copié sera inséré sous l’écran sélectionné.