Afficher une offre quand les utilisateurs appuient sur Fermer

Quand un utilisateur appuie sur le bouton Fermer, il est sur le point de partir sans acheter. Cette recette intercepte le premier appui sur Fermer : au lieu de fermer le paywall, elle affiche un overlay d’offre de dernière chance. Quand l’utilisateur ferme cet overlay, le bouton Fermer fonctionne normalement et clôt le flow.

La logique repose sur une variable Boolean personnalisée et une action conditionnelle :

• close_tapped commence à False.
• Le premier appui sur Fermer affiche l’overlay d’offre et passe close_tapped à True.
• Tout appui ultérieur sur Fermer clôt le flow.

Avant de commencer

• Créez un écran de paywall avec un bouton Fermer — par exemple, en suivant Créer un écran de paywall de base.
• Créez un produit avec une offre à mettre en avant dans l’overlay.

1. Créer la variable

Pour en savoir plus sur les variables personnalisées, consultez Variables.

1. Dans le panneau de gauche, cliquez sur l’icône { } pour ouvrir Variables.
2. Dans l’onglet Custom, cliquez sur +.
3. Nommez la variable close_tapped et définissez Value Type sur Boolean. Laissez Initial Value sur False.
4. Cliquez sur Create variable.

2. Créer l’overlay d’offre

L’overlay est un conteneur qui se fixe à l’écran de l’appareil et s’affiche par-dessus le paywall. Construisez-le visible — les éléments masqués ne peuvent pas être modifiés, vous le cacherez à l’étape 4, une fois le contenu en place.

1. Cliquez sur + > Layout > Vertical Container.
2. Le conteneur étant sélectionné, ouvrez l’onglet Design et définissez Position sur Fixed. Réglez l’alignement horizontal sur Left & Right et l’alignement vertical sur Top. Il n’existe pas d’option de centrage vertical, saisissez donc un décalage en haut (par exemple 300) pour rapprocher l’overlay du centre de l’écran.
3. Sous Fill, définissez un arrière-plan — une couleur unie ou une image. Le conteneur est transparent par défaut, donc sans remplissage le paywall reste visible sous l’overlay.
4. Ajoutez le contenu de l’offre. Le conteneur étant sélectionné dans le panneau Layers, cliquez sur + > Text > H2. Pour afficher le prix réduit, insérez des variables d’offre comme offer_price dans le champ Content.
5. Cliquez sur + > Products, choisissez un preset de mise en page et faites-le glisser dans l’overlay. Sélectionnez la carte produit sur le canevas et choisissez le produit et l’offre dans l’onglet Design.
6. Cliquez sur + > Buttons, choisissez un preset de bouton et faites-le glisser dans l’overlay. Dans l’onglet Interactions, cliquez sur Add trigger > On tap > Add action, puis définissez Action sur Purchase et Product sur votre produit avec offre.

3. Ajouter le bouton de fermeture à l’overlay

L’overlay a besoin de son propre bouton de fermeture. Son action doit masquer l’overlay — et non fermer le flow.

1. L’overlay étant sélectionné, cliquez sur + > Buttons > Close flow.
2. Le bouton étant sélectionné, ouvrez l’onglet Interactions. Le preset est livré avec une action Close Flow préconfigurée. Cliquez sur l’action et changez son type en Hide element. Définissez la cible sur le conteneur de l’overlay.

4. Masquer l’overlay

L’overlay doit rester invisible jusqu’au premier appui sur Fermer.

Dans le panneau Layers, sélectionnez le conteneur de l’overlay et définissez son état sur Hide . L’overlay reste dans l’arborescence des calques mais ne s’affiche plus sur le canevas.

5. Configurer le bouton Fermer

Remplacez l’action par défaut du bouton Fermer par une action conditionnelle qui se branche sur close_tapped.

Pour en savoir plus sur les actions conditionnelles, consultez Actions — Actions conditionnelles.

1. Sélectionnez le bouton Fermer du paywall — celui qui se trouve sur l’écran, pas le bouton de fermeture de l’overlay.

2. Ouvrez l’onglet Interactions, cliquez sur l’action Close Flow préconfigurée et changez son type en Conditional Action.

3. Dans le bloc if, cliquez sur Add condition et définissez : close_tapped Equals False.

4. Dans le bloc then, ajoutez deux actions :

   • Set Variable : définissez close_tapped sur True.

     

   • Show element : définissez la cible sur l’overlay d’offre.

     

5. Dans le bloc else, ajoutez une action Close Flow.

   

Le premier appui sur Fermer affiche maintenant l’offre. Après que l’utilisateur a fermé l’overlay, un nouvel appui sur Fermer correspond à la branche else et clôt le flow.

Étapes suivantes

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