Créer un paywall avec des onglets

Ce modèle utilise des onglets pour basculer entre deux variantes d’une même offre sur un seul écran. Chaque onglet contient sa propre liste de fonctionnalités, liste de produits et bouton d’achat. Appuyer sur un onglet change le contenu visible sans quitter l’écran — utile pour séparer les formules par niveau, période de facturation ou segment d’audience.

Avant de commencer

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

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

L’écran sert de conteneur pour le bouton de fermeture, le titre, les onglets et le contenu des onglets. Dans cet exemple, l’arrière-plan est une image, mais une couleur unie ou un dégradé fonctionnent de la même manière.

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

Pour configurer l’écran :

1. Cliquez sur une zone vide du canevas pour sélectionner l’écran.
2. Sous System UI, désactivez Safe area pour que l’arrière-plan s’étende jusqu’aux bords de l’écran.
3. Sous Fill, choisissez un type d’arrière-plan et configurez-le. Cet exemple utilise une Image , mais une couleur unie ou un dégradé fonctionne de la même façon.
4. Sous Layout, définissez la direction sur Vertical et configurez l’espacement et l’alignement pour que les éléments s’empilent depuis le haut, le contenu des onglets occupant l’espace restant.

2. Ajouter le bouton de fermeture

Le bouton de fermeture permet de fermer le paywall. Le préréglage Close est préconfiguré — aucune configuration d’action n’est requise.

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

3. Ajouter le titre et l’associer au bouton de fermeture

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

Pour ajouter le titre :

1. Cliquez sur + > Text > H1.
2. Avec le H1 sélectionné, ouvrez l’onglet Design 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 la couche du bouton de fermeture et choisissez Wrap > Wrap in Horizontal Container.

2. Faites glisser la couche H1 dans le nouveau conteneur horizontal.

Pour aligner les deux éléments :

1. Ajustez la taille du bouton de fermeture et la taille de la police du H1 afin 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.

4. Ajouter les onglets et configurer leurs libellés

L’élément Tabs divise une section de l’écran en panneaux de contenu commutables. Chaque onglet dispose de son propre conteneur de contenu, qui s’affiche lorsque l’utilisateur sélectionne cet onglet.

Pour en savoir plus sur l’élément Tabs, consultez Éléments — Tabs. Pour en savoir plus sur les groupes sélectionnables, consultez Éléments sélectionnables et groupes.

Pour ajouter les onglets :

1. Cliquez sur + > Tabs et choisissez un préréglage — Segment control, Button Tabs ou Underline.
2. Avec le nom de chaque onglet sélectionné sur le canevas ou dans le panneau Layers, modifiez le champ Content dans l’onglet Design pour changer le libellé — par exemple, Premium et Pro.

5. Ajouter une liste de fonctionnalités dans le premier onglet

Une liste de fonctionnalités courte et compacte dans le premier onglet indique aux utilisateurs ce que comprend ce plan.

Pour découvrir tous les préréglages de liste disponibles, consultez Éléments — List.

Pour ajouter la liste de fonctionnalités :

1. Cliquez sur + > List et choisissez un préréglage de liste. Icon List est le plus compact pour les paywalls. L’élément apparaît en bas de l’arborescence des calques.
2. Avec chaque ligne sélectionnée, modifiez le titre dans le champ Content.

3. Dans le panneau Layers, faites glisser la liste dans le conteneur Content du premier onglet.

6. Ajouter la liste de produits au premier onglet

La liste de produits affiche les options d’abonnement du premier onglet. L’élément Products génère une carte par produit assigné à l’écran et crée son propre groupe de sélection.

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. La liste verticale convient bien aux plans empilés. L’élément apparaît en bas de l’arborescence des calques.
2. Sélectionnez chaque carte de produit sur le canvas et choisissez un produit dans le menu déroulant de l’onglet Design.

3. Dans le panneau Layers, faites glisser le calque Products dans le conteneur Content du premier onglet.

7. Ajouter le bouton d’achat au premier onglet

Le bouton d’achat lance l’achat intégré pour le produit que l’utilisateur a sélectionné dans le premier onglet. Son libellé affiche le prix du produit sélectionné, ce qui le maintient en phase avec le choix de l’utilisateur.

Pour en savoir plus sur l’action Purchase, consultez Actions — Purchase.

Pour ajouter et configurer le bouton d’achat :

1. Cliquez sur + > Buttons et choisissez un preset de bouton. L’élément apparaît à la fin de l’arbre de calques.
2. Avec le bouton sélectionné, ouvrez l’onglet Design et placez le curseur dans le champ Content. Cliquez sur l’icône de variable , sélectionnez products.selectedProduct, puis l’attribut prod_price — la variable complète se résout en products.selectedProduct.prod_price. Entourez-la du reste du libellé — par exemple, Subscribe for {prod_price}.

3. Passez à l’onglet Interactions et cliquez sur Add trigger > On tap > Add action.
4. Définissez Action sur Purchase et Product sur products.selectedProduct.

5. Dans le panneau Layers, faites glisser le bouton dans le conteneur Content du premier onglet.

8. Copier le contenu du premier onglet dans le second

Plutôt que de reconstruire la même structure de zéro, copiez la liste de fonctionnalités, la liste de produits et le bouton d’achat du premier onglet dans le second. Il ne vous restera ensuite qu’à mettre à jour les valeurs.

Pour copier le contenu :

1. Dans le panneau Layers, développez le conteneur Content du premier onglet.
2. Sélectionnez chaque élément qu’il contient (liste de fonctionnalités, produits, bouton d’achat), copiez-le avec ⌘C / Ctrl+C, puis collez-le avec ⌘V / Ctrl+V. Les copies apparaissent en bas de l’arborescence des calques.
3. Faites glisser chaque élément copié dans le conteneur Content du second onglet.

9. Mettre à jour le contenu du deuxième onglet

Le deuxième onglet est maintenant identique au premier. Modifiez chaque élément pour qu’il reflète le deuxième forfait.

Pour mettre à jour le deuxième onglet :

1. Modifiez la liste des fonctionnalités dans le deuxième onglet pour que les lignes correspondent aux fonctionnalités du deuxième plan.
2. Sélectionnez chaque fiche produit dans l’élément Products du deuxième onglet et assignez les produits du deuxième plan depuis le menu déroulant. Cet élément Products devient automatiquement un groupe sélectionnable distinct (products2).
3. Sélectionnez le bouton d’achat dans le deuxième onglet. Dans le champ Content de l’onglet Design, remplacez la variable de prix products.selectedProduct.prod_price par products2.selectedProduct.prod_price.
4. Passez à l’onglet Interactions et mettez à jour le Product de l’action Purchase en remplaçant products.selectedProduct par products2.selectedProduct.

10. Ajouter les liens du pied de page partagé

Les liens Conditions d’utilisation, Politique de confidentialité et Restaurer les achats restent visibles quel que soit l’onglet actif. Ajoutez-les au niveau de l’écran — en dehors des deux conteneurs d’onglets — afin qu’ils soient partagés entre les onglets.

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 en bas de l’arborescence des calques, ce qui est exactement l’emplacement voulu — à la racine de l’écran, sans être imbriquée dans un onglet.
2. Dans le panneau Layers, sélectionnez le bouton Terms of Use. Ouvrez l’onglet Interactions et collez l’URL de vos conditions d’utilisation dans le champ Open URL.
3. Répétez l’opération pour le bouton Privacy Policy avec votre URL de confidentialité.
4. Laissez le lien Restore Purchases tel quel. Son action est préconfigurée.

Étapes suivantes

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