---
title: "Concevoir des onboardings"
description: "Créez des onboardings efficaces."
---

Le builder d'onboarding no-code pour applications mobiles est un outil puissant et personnalisable qui vous aide à offrir la meilleure expérience d'onboarding à vos utilisateurs. Inutile d'être développeur ou designer pour obtenir un excellent résultat.

## Écrans d'onboarding \{#onboarding-screens\}

Le flow d'onboarding est composé de plusieurs écrans que vous ajoutez et concevez.

Les utilisateurs appuient sur le bouton pour naviguer entre eux.

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

À la place, vous pouvez masquer certains écrans par défaut et les afficher uniquement dans certains cas.
:::

## Éléments d'onboarding \{#onboarding-elements\}

Les éléments d'onboarding s'affichent à 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 vous permettent de configurer une mise en page flexible. Par exemple, si vous souhaitez 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 démontrent la valeur de votre application et encouragent les utilisateurs.

  Les **formats vidéo pris en charge** sont MP4 et WebM. La **taille maximale des fichiers médias** 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](https://www.lottielab.com/lottie/lottie-to-video)) et l'intégrer en tant que vidéo.
- **Quiz** : Créez de courts questionnaires avec des options texte et 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 des utilisateurs et convertir leur installation en achat.
- **Loaders** : Des loaders animés maintiennent l'engagement des utilisateurs pendant le 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.
:::

  
  <img src="/assets/shared/img/design-onboarding4.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

### ID d'élément et ID d'action \{#element-id-and-action-id\}

Si vous souhaitez utiliser un bouton pour des actions personnalisées, attribuez-lui un **action ID** puis utilisez-le dans votre code source. Les action IDs vous permettent de gérer différents boutons avec le même action ID de la même manière.

  
  <img src="/assets/shared/img/ios-events-1.webp"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

Si vous souhaitez traiter la saisie d'un utilisateur dans un champ spécifique (par exemple, enregistrer son âge ou son e-mail), attribuez-lui un **element ID** puis utilisez-le dans votre code source pour associer les questions aux réponses. Les element IDs ne peuvent être utilisés qu'une seule fois dans votre onboarding.

  
  <img src="/assets/shared/img/design-onboarding5.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

## Options de personnalisation \{#customization-options\}

Vous disposez des options de personnalisation suivantes dans le builder :
- Onglet **Styles** : Ajustez l'apparence de l'élément.
  
  <img src="/assets/shared/img/design-onboarding1.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  
- Onglet **Element** : Définissez les attributs de l'élément, tels que la visibilité, les actions associées aux boutons ou d'autres propriétés sans rapport avec l'apparence de l'élément.
  
  <img src="/assets/shared/img/design-onboarding2.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  
- 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.
  
  <img src="/assets/shared/img/design-onboarding3.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

## Copier des écrans et des éléments \{#copy-screens-and-elements\}

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 builder d'onboarding et procédez de l'une des façons suivantes :
- Faites un clic droit sur un é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 dans le même onboarding ou entre différents onboardings.

## Copier des écrans depuis des funnels web-to-app \{#copy-screens-from-web-to-app-funnels\}

Si vous utilisez des funnels web-to-app créés dans [FunnelFox](https://funnelfox.com/) et souhaitez utiliser des écrans de ces funnels dans vos onboardings, vous pouvez le faire rapidement en copiant des écrans dans le funnel builder et en les collant dans le builder d'onboarding :

1. Dans le funnel builder FunnelFox, faites un clic droit sur un écran et sélectionnez **Copy**, ou sélectionnez l'écran et appuyez sur `Ctrl+C`/`⌘+C`.
2. Ouvrez le builder d'onboarding.
3. 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é.

  
  <img src="/assets/shared/img/funnel-to-onboarding.gif"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />