Créer un écran de paywall de base

C’est le template de paywall le plus courant. Utilisez-le comme écran autonome ou placez-le à la fin d’un flow multi-écrans.

Un écran de paywall standard contient un titre, une description de la valeur, une liste de fonctionnalités, une liste de produits, un bouton d’achat et des liens en pied de page vers la restauration des achats, les conditions d’utilisation et la politique de confidentialité.

Avant de commencer

• Créez des produits dans l’Adapty Dashboard.
• Connectez Adapty à l’App Store et à Google Play.

1. Configurer les styles réutilisables

Les styles réutilisables vous permettent d’appliquer la même typographie et les mêmes couleurs sur chaque écran en un seul clic. Chaque nouveau flow est livré avec un ensemble de styles de texte par défaut (H1, Body, Button Label, etc.) — ajustez-les pour correspondre à votre design avant de commencer à ajouter des éléments. Ajoutez des styles de couleur pour les couleurs de marque que vous utiliserez sur l’ensemble de l’écran.

Pour les instructions complètes, voir Styles et apparence — Styles réutilisables.

Pour configurer les styles :

1. Dans le panneau de gauche, ouvrez le panneau Styles .
2. Dans l’onglet Text, cliquez sur un style existant pour modifier sa police, son épaisseur, sa taille et sa couleur. N’ajoutez de nouveaux styles que si les styles par défaut ne couvrent pas vos besoins.

3. Dans l’onglet Colors, cliquez sur Create style et ajoutez les couleurs que vous prévoyez de réutiliser sur l’écran.

2. Configurer la mise en page de l’écran

L’écran lui-même sert de conteneur pour tout ce que vous y ajoutez. Configurez d’abord sa mise en page, son arrière-plan et ses marges, afin que les éléments ajoutés ultérieurement se répartissent correctement.

Pour la liste complète des propriétés d’écran, consultez Écrans et calques — Paramètres d’écran.

Pour configurer l’écran :

1. Cliquez sur une zone vide du canevas pour sélectionner l’écran. Le panneau de droite affiche les paramètres de l’écran.
2. Dans System UI, désactivez Safe area pour que le contenu s’étende jusqu’aux bords de l’écran.
3. Dans Layout, définissez la direction sur Vertical et la distribution sur Space evenly.

4. Sous Fill, choisissez un type d’arrière-plan — couleur unie, dégradé ou image. Cet exemple utilise un Gradient avec deux points de couleur.

3. Ajouter le bouton de fermeture

Le bouton de fermeture ferme le paywall. Le preset Close est préconfiguré — aucune configuration d’action n’est nécessaire.

1. Sur le canvas, cliquez sur +.
2. Sélectionnez Buttons > Close.

4. Ajouter le titre et le regrouper avec le bouton de fermeture

Le H1 se place à côté du bouton de fermeture en haut de l’écran. Pour les aligner horizontalement, regroupez-les dans un conteneur horizontal.

Pour ajouter le titre :

1. Cliquez sur + > Text > H1.
2. Avec le H1 sélectionné, ouvrez l’onglet Design dans le panneau de droite et modifiez le texte dans le champ Content.

Pour regrouper le titre avec le bouton de fermeture :

1. Dans le panneau Layers, cliquez sur le menu trois points sur le calque du bouton de fermeture et choisissez Wrap > Wrap in Horizontal Container.

2. Faites glisser le calque H1 dans le nouveau conteneur horizontal.

Pour aligner les deux éléments :

1. Ajustez la taille du bouton de fermeture et la taille de police du H1 pour qu’ils tiennent confortablement sur la même ligne.
2. Avec le conteneur horizontal sélectionné, définissez l’alignement et la distribution dans le panneau de droite pour que les éléments s’alignent correctement.

5. Ajouter la description de la valeur

Une courte ligne sous le titre explique ce que l’utilisateur obtient avec l’abonnement.

1. Cliquez sur + > Text > Body.
2. Une fois l’élément body sélectionné, modifiez le texte dans le champ Content de l’onglet Design.

6. Ajouter la liste des fonctionnalités

La liste des fonctionnalités met en avant ce que l’abonnement débloque. Chaque ligne comporte une icône, un titre et une courte description.

Pour l’ensemble des presets de listes disponibles, consultez Éléments — Liste.

Pour ajouter la liste des fonctionnalités :

1. Cliquez sur + > List et choisissez un preset de liste. Icon List est le plus courant pour les paywalls.
2. Sélectionnez chaque ligne, puis modifiez le titre et la description dans le champ Content.
3. Pour ajouter ou supprimer des lignes, sélectionnez la liste et utilisez les contrôles de lignes dans le panneau Layers.

7. Ajouter la liste de produits

La liste de produits affiche les options d’abonnement parmi lesquelles l’utilisateur peut choisir. L’élément Products affiche une carte par produit assigné à l’écran, et une carte est automatiquement désignée comme valeur par défaut.

Pour en savoir plus sur la gestion des produits, consultez Configurer les achats.

Pour ajouter et configurer des produits :

1. Cliquez sur + > Products et choisissez un preset de mise en page. Vertical List est le plus courant.
2. Sélectionnez chaque carte produit sur le canvas et choisissez un produit dans la liste déroulante de l’onglet Design. Les produits déjà ajoutés à cet écran dans le panneau Products s’affichent en premier. Le reste de votre catalogue suit sous Other products.
3. Pour modifier la sélection par défaut, sélectionnez la carte souhaitée et activez Set as default dans l’onglet Design.
4. Pour personnaliser le badge de remise, développez une carte produit dans le panneau Layers, sélectionnez le calque du badge et modifiez son texte dans le champ Content. Masquez le badge sur les autres cartes en cliquant sur l’icône œil à côté de chaque calque de badge.

8. Ajouter le bouton d’achat

Le bouton d’achat déclenche l’achat intégré pour le produit sélectionné par l’utilisateur. La variable products.selectedProduct correspond toujours au produit actuellement sélectionné à l’écran.

Pour ajouter le bouton d’achat :

1. Cliquez sur + > Buttons et choisissez un preset de bouton.
2. Une fois le bouton sélectionné, ouvrez l’onglet Interactions dans le panneau de droite.
3. Cliquez sur Add trigger > On tap, puis sur Add action.
4. Définissez Action sur Purchase et Product sur products.selectedProduct.

9. Ajouter des liens dans le pied de page

Le pied de page contient des liens vers les conditions d’utilisation et la politique de confidentialité (obligatoires pour les stores) ainsi qu’un bouton pour restaurer les achats précédents.

Pour ajouter les liens dans le pied de page :

1. Cliquez sur + > Buttons > Links. Une ligne contenant Restore Purchases, Terms of Use et Privacy Policy est ajoutée.
2. Dans le panneau Layers, sélectionnez le bouton Terms of Use. Ouvrez l’onglet Interactions — l’action Open URL est déjà associée. Cliquez sur l’action et saisissez l’URL cible.
3. Répétez l’opération pour le bouton Privacy Policy avec votre URL de confidentialité.
4. Laissez le bouton Restore Purchases tel quel. Son action est préconfigurée.

Prochaines étapes

• Enregistrer et publier votre flow.
• Ajouter le flow à un placement pour commencer à le montrer aux utilisateurs.