Éléments

Pour ouvrir la bibliothèque d’éléments et ajouter un nouvel élément à un écran, cliquez sur le bouton plus dans le panneau gauche ou au-dessus de l’aperçu de l’appareil.

Les éléments se répartissent dans les catégories suivantes :

• Bases (conteneurs de mise en page, texte, médias, listes, badges, coches)
• Formulaires et quiz (boutons, champs de saisie, quiz, onglets)
• Paywall et commerce (produits, bouton d’essai gratuit, engagement utilisateur, compte à rebours)
• Indicateurs de progression et chargeurs

Pour chaque élément, Adapty propose plusieurs présets — des modèles avec du contenu de substitution ou des interactions prédéfinies.

Bases

Mise en page

Les éléments de mise en page sont des conteneurs qui organisent les éléments qu’ils contiennent.

• Conteneur vertical : dispose les éléments enfants de haut en bas
• Conteneur horizontal : dispose les éléments enfants de gauche à droite
• Séparateurs (horizontal et vertical) : lignes qui séparent visuellement les sections de contenu
• Carousel : un conteneur à défilement par glissement
• Pied de page : un panneau épinglé au bas de l’écran, en dehors de la zone de défilement
• Feuille inférieure : un panneau coulissant ancré au bas de l’écran

Texte

Le texte peut être statique ou inclure des variables (ex. : nom d’utilisateur) et du contenu localisé.

Les présets de texte suivants sont disponibles par défaut. Pour modifier cette liste, ajoutez ou supprimez des styles de texte enregistrés :

• H1
• H2
• H3
• Button Label
• Body
• Caption
• Small Label

Le menu Text comprend également l’élément Old Price — un prix de produit barré calculé automatiquement à partir d’un multiplicateur. Voir Ajouter un ancien prix.

Médias

• Icône : une icône vectorielle de la bibliothèque d’icônes intégrée, avec taille et couleur personnalisables
• Image : une image — téléchargez la vôtre ou fournissez une URL
• Vidéo : un lecteur vidéo intégré pour les fichiers jusqu’à 50 Mo. Supporte la lecture en boucle.

Liste

Les éléments de liste organisent le contenu en lignes et en colonnes pour afficher des données uniformément formatées. En coulisse, une liste est un conteneur.

• Liste d’icônes : lignes avec une icône en tête et une étiquette de texte
• Chronologie : séquence verticale avec des indicateurs d’étapes connectées
• Liste d’images : lignes avec une image en tête et du texte
• Cartes d’icônes : grille de cartes avec des icônes centrées
• Cartes d’images : grille de cartes avec des images
• Tableau comparatif : tableau multi-colonnes comparant des fonctionnalités entre les plans (ex. : Gratuit vs Pro)

Badge

Une petite étiquette superposée pour mettre en avant un élément — généralement utilisée pour promouvoir des remises ou des plans spécifiques (ex. : « Économisez 5 % »). Utilisez le positionnement absolu pour placer un badge par-dessus un autre élément.

Coches

Icônes d’indicateur de sélection à utiliser dans des éléments sélectionnables. Chaque préset de coche inclut un état activé et désactivé qui se met à jour automatiquement en fonction de la sélection de l’utilisateur.

• Checkbox
• Circle
• Radiobutton
• Toggle

Formulaires et quiz

Boutons

Les boutons déclenchent des actions lorsqu’on appuie dessus — naviguer vers un autre écran, ouvrir une URL ou quitter le flow.

Chaque préset est un point de départ — personnalisez son style et assignez-lui n’importe quelle action. Configurez le comportement des boutons dans l’onglet Interactions.

• Base : bouton classique avec texte centré
• Icône à droite : bouton avec une icône sur le côté droit
• Avec sous-titre : inclut deux lignes de texte
• Animation pulsée : inclut un effet de pulsation animé
• Achat : déclenche un achat
• Contour secondaire : bouton avec contour pour les actions secondaires
• Retour : retourner à l’écran précédent
• Fermer le flow : quitter le flow
• Voir plus de plans : révéler des options de produits supplémentaires
• Liens : un ensemble de boutons de pied de page (Restore, Terms of Service, Privacy Policy)

Champs de saisie

Les champs de saisie permettent aux utilisateurs d’entrer des données. Chacun applique une méthode de saisie et des règles de validation adaptées.

• Texte
• E-mail
• Mot de passe
• Nombre
• Numéro de téléphone
• Date
• Heure
• Date et heure

Les champs Date, Heure et Date et heure ouvrent le sélecteur natif de l’appareil (molette ou calendrier) lorsqu’on appuie dessus.

Utilisez des variables pour traiter les saisies des utilisateurs et influencer la logique conditionnelle.

Quiz

Les éléments de quiz présentent des écrans de sélection multi-options pour les sondages, la collecte de préférences et la segmentation des utilisateurs. Configurez des interactions pour orienter le flow en fonction de la réponse de l’utilisateur.

• Options avec icônes : liste à une colonne avec des icônes
• Options avec emojis : liste à une colonne avec des emojis
• Options avec images : liste à une colonne avec des images
• Grille d’icônes : grille multi-colonnes avec des icônes
• Grille d’emojis : grille multi-colonnes avec des emojis
• Grille d’images : grille multi-colonnes avec des photos
• Évaluation : échelle numérique (ex. : 1–5)

Onglets

Les onglets divisent une section d’écran en panneaux de contenu commutables. L’utilisateur sélectionne un onglet et le contenu en dessous se met à jour en conséquence. Couramment utilisés pour regrouper des plans de produits ou basculer entre une tarification mensuelle et annuelle.

• Contrôle segmenté : sélecteur en forme de pilule avec des coins arrondis autour de l’onglet sélectionné
• Onglets boutons : onglets séparés en style bouton
• Souligné : étiquettes de texte avec un soulignement marquant l’onglet sélectionné

Paywall et commerce

Produits

Les éléments de produit affichent les détails des achats intégrés et gèrent la sélection de produits. Chaque préset dispose les données produit dans une mise en page différente. Liez vos produits pour alimenter les éléments avec des données réelles provenant d’Adapty.

• Liste verticale : cartes de produits empilées
• Liste horizontale : cartes de produits côte à côte
• Carousel de fonctionnalités : cartes à défilement par glissement avec listes de fonctionnalités
• Cartes de fonctionnalités : cartes statiques avec listes de fonctionnalités
• Liste bannière : lignes compactes avec des badges intégrés

Bouton d’essai gratuit

Un bouton bascule qui fait passer le produit affiché de son prix standard à son offre d’essai gratuit. Lorsqu’il est activé, la sélection du produit et l’état de l’élément se mettent à jour automatiquement.

Engagement utilisateur

Blocs prêts à l’emploi avec des évaluations utilisateurs qui renforcent la confiance et encouragent la conversion. Les modèles sont des conteneurs simples avec du contenu de substitution.

• Avis : une note en étoiles avec un commentaire et le nom de l’auteur
• Évaluation : un score numérique avec affichage d’étoiles
• Note de l’app : un grand score avec une barre d’étoiles et un nombre d’avis
• Preuve sociale : une pile d’avatars avec un nombre d’utilisateurs

Compte à rebours

Affiche des heures, des minutes et des secondes décomptant jusqu’à zéro. Utilisez-le pour créer un sentiment d’urgence pour des offres à durée limitée. Le minuteur peut déclencher des actions lorsqu’il atteint zéro — comme naviguer vers un autre écran ou masquer le badge de remise.

• Inline : affichage numérique compact
• Inline avec unités : affichage numérique avec étiquettes d’unités
• Badge : petite superposition de minuteur mise en évidence
• Blocs : cartes séparées pour les jours, les heures, les minutes et les secondes

Progression

Indicateurs de progression

Barres de progression par étapes qui montrent la position de l’utilisateur dans un flow à plusieurs écrans. Utiles pour les séquences d’onboarding où l’utilisateur doit voir combien d’étapes il reste.

• Linéaire : une seule barre continue qui se remplit à mesure que l’utilisateur avance
• Segmenté : une barre divisée en segments distincts, un par étape
• Connecteurs : marqueurs d’étapes numérotés reliés par de courtes lignes de connexion

Chargeurs

Indicateurs de chargement animés pour les transitions. Utilisez des chargeurs lorsque votre application traite des données utilisateur — par exemple, après la soumission d’un quiz.

• Spinner : indicateur circulaire rotatif
• Spinner avec étiquette : spinner accompagné d’une étiquette de texte (ex. : « Chargement… »)
• Chargeur : barre de progression horizontale