Créer un paywall avec un bouton de période d'essai

Un bouton de période d’essai vous permet de faire basculer un paywall entre des produits avec un essai gratuit et des produits sans essai. Mais le bouton en lui-même n’est qu’un interrupteur : activé ou désactivé. C’est vous qui écrivez les règles qui affichent les bonnes cartes, et celles qui déterminent quel produit est sélectionné.

Cette recette vous montre comment configurer ces règles et créer un paywall entièrement fonctionnel avec un bouton bascule.

Avant de commencer

• Créez un écran de paywall — par exemple, suivez la recette Créer un écran de paywall de base.
• Créez vos produits et ajoutez-leur l’offre d’essai.

1. Ajouter les cartes produit

1. Cliquez sur le menu + > Paywall & Commerce > Products et choisissez un preset.
2. Sélectionnez une carte — sur le canvas ou dans le panneau Layers. Assignez un produit à la carte et laissez Select offer (optional) vide.
3. Répétez l’opération pour chaque formule que vous proposez — une carte par formule, sans l’essai.
4. Dupliquez chaque carte. Sur chaque copie, sélectionnez l’offre d’essai dans Select offer (optional).

Chaque formule dispose maintenant de deux cartes pointant vers le même produit — l’une avec l’offre, l’autre sans.

2. Ajouter le bouton bascule d’essai

1. Cliquez sur + > Paywall & Commerce > Trial Toggle.

   

2. Vérifiez que le bouton bascule appartient à un groupe sélectionnable du bon type. Cliquez sur une zone vide du canvas pour ouvrir Screen settings. Sous Selectable groups, ouvrez trial_toggle, définissez Group Type sur Toggle, puis cliquez sur Save. La boîte de dialogue affiche la variable que nous utiliserons pour détecter si le bouton bascule est activé : trial_toggle.isActive.

3. Modifiez le libellé du bouton bascule.

Laissez le bouton bascule désactivé par défaut. Un bouton bascule d’essai pré-sélectionné risque d’entraîner un rejet de l’App Store en tant que dark pattern — voir Boutons bascule.

3. Afficher les bonnes cartes selon l’état du toggle

Dans l’onglet Design de chaque carte, sous Visibility, sélectionnez Conditional et définissez sa condition :

4. Sélectionner une carte visible quand le toggle change

Les cartes changent maintenant avec le toggle, mais le produit sélectionné, lui, ne change pas. Une carte qui devient invisible reste sélectionnée, et l’action Purchase la cible toujours — ainsi, un utilisateur qui active l’essai peut quand même être débité.

Ajoutez une Conditional Action au toggle pour que la sélection soit réinitialisée sur une carte visible à chaque appui.

1. Dans le panneau Layers, sélectionnez le conteneur Trial toggle.
2. Ouvrez l’onglet Interactions, ajoutez le déclencheur On tap et une Conditional Action :

5. Mettre à jour le libellé du bouton

L’appel à l’action doit changer une fois l’essai activé.

1. Sélectionnez l’élément texte du bouton.

2. Dans l’onglet Design, sous Content, sélectionnez Conditional et cliquez sur Edit conditions.

3. Remplissez les blocs :

   Bloc	Ce qu’il faut configurer
   if	trial_toggle.isActive Equals True
   then	Le libellé pour l’essai, par exemple Start your free trial
   else	Le libellé standard, par exemple Purchase

Pour en savoir plus sur le texte conditionnel, consultez Ajouter du texte conditionnel.