Afficher une offre quand l'utilisateur appuie sur Fermer

Quand un utilisateur appuie sur le bouton Fermer, il s’apprête à partir sans payer. Cette recette intercepte le premier appui : au lieu de fermer le paywall, elle affiche une offre de dernière chance en superposition. Quand l’utilisateur ferme cette offre, le bouton Fermer fonctionne normalement et ferme le flow.

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

• close_tapped commence à False.
• Le premier appui sur le bouton de fermeture affiche l’overlay de l’offre et passe close_tapped à True.
• Tout appui ultérieur sur le bouton de fermeture ferme le flow.

Avant de commencer

• Créez un écran de paywall avec un bouton de fermeture — par exemple, suivez Créer un écran de paywall de base.
• Créez un produit avec une offre à promouvoir 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. Construire l’overlay de l’offre

L’overlay est un conteneur qui s’ancre à l’écran de l’appareil et se superpose au paywall. Construisez-le visible — les éléments masqués ne sont pas modifiables, vous le masquerez à l’étape 4, une fois le contenu en place.

1. Cliquez sur + > Layout > Vertical Container.
2. Une fois le conteneur 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’y a pas d’option de centrage vertical, alors saisissez un décalage supérieur (par exemple, 300) pour déplacer l’overlay vers le milieu 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 fond, le paywall reste visible sous l’overlay.
4. Ajoutez le contenu de l’offre. Avec le conteneur sélectionné dans le panneau Layers, cliquez sur + > Text > H2. Pour afficher le prix réduit, insérez des variables d’offre telles que 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 canvas 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 d’offre.

3. Ajouter le bouton de fermeture à l’overlay

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

1. Avec l’overlay sélectionné, cliquez sur + > Buttons > Close flow.
2. Avec le bouton sélectionné, ouvrez l’onglet Interactions. Le modèle inclut 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 n’est plus rendu sur le canevas.

5. Configurer le bouton de fermeture

Remplacez l’action par défaut du bouton de fermeture par une action conditionnelle qui se ramifie sur close_tapped.

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

1. Sélectionnez le bouton de fermeture du paywall — celui sur l’écran, pas le bouton de rejet de l’overlay.
2. Ouvrez l’onglet Interactions, cliquez sur l’action préconfigurée Close Flow, 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 la superposition de l’offre.

  

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

   

Maintenant, le premier appui sur Fermer révèle l’offre. Une fois que l’utilisateur l’a rejetée, un nouvel appui sur Fermer correspond à la branche else et ferme le flow.

Étapes suivantes

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