Créer un écran de paywall basique

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 pour restaurer les 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. Configurez les styles réutilisables

Les styles réutilisables vous permettent d’appliquer les mêmes typographies et couleurs sur tous les écrans 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 d’ajouter des éléments. Ajoutez des styles de couleur pour les couleurs de votre marque que vous utiliserez sur l’ensemble de l’écran.

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 Text, cliquez sur un style existant pour modifier sa police, sa graisse, 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 comptez réutiliser sur l’écran.

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

L’écran lui-même fait office de conteneur pour tout ce que vous ajoutez. Configurez sa mise en page, son arrière-plan et ses marges internes en premier, afin que les éléments ajoutés ensuite se distribuent 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 canvas pour sélectionner l’écran. Le panneau droit bascule sur les paramètres de l’écran.
2. Sous System UI, désactivez Safe area pour que le contenu s’étende jusqu’aux bords de l’écran.
3. Sous 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. Ajoutez 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. Ajoutez le titre et associez-le au 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 droit 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 du 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 droit pour que les éléments s’alignent correctement.

5. Ajoutez la description de la valeur

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

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

6. Ajoutez la liste de fonctionnalités

La liste de fonctionnalités met en avant ce qu’inclut le déverrouillage de l’abonnement. Chaque ligne comporte une icône, un titre de fonctionnalité et une courte description.

Pour l’ensemble des presets de liste, consultez Éléments — List.

Pour ajouter la liste de fonctionnalités :

1. Cliquez sur + > List et choisissez un preset de liste. Icon List est le plus courant pour les paywalls.
2. Avec chaque ligne sélectionnée, 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 ligne dans le panneau Layers.

7. Ajoutez la liste de produits

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

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

Pour ajouter et configurer les 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 le menu déroulant de l’onglet Design. Le menu déroulant affiche tous les produits configurés dans l’Adapty Dashboard.
3. Pour changer la sélection par défaut, sélectionnez la carte souhaitée et activez Set as default product dans l’onglet Design.
4. Pour personnaliser le badge de réduction, 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. Ajoutez le bouton d’achat

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

Pour ajouter le bouton d’achat :

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

9. Ajoutez les liens du pied de page

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

Pour ajouter les liens du pied de page :

1. Cliquez sur + > Buttons > Links. Cela ajoute une ligne avec Restore Purchases, Terms of Use et Privacy Policy.
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 politique de confidentialité.
4. Laissez le bouton Restore Purchases tel quel. Son action est préconfigurée.

Étapes suivantes

• Enregistrez et publiez votre flow.
• Ajoutez le flow à un placement pour commencer à le montrer aux utilisateurs.