---
title: "Afficher une offre quand les utilisateurs appuient sur Fermer"
description: "Interceptez le premier appui sur Fermer pour afficher une offre de dernière chance avant que les utilisateurs ne quittent le paywall."
---

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 \{#before-you-start\}

- Créez un écran de paywall avec un bouton Fermer — par exemple, en suivant [Créer un écran de paywall de base](basic-paywall-screen).
- [Créez un produit](create-product) avec une [offre](offers) à mettre en avant dans l'overlay.

## 1. Créer la variable \{#1-create-the-variable\}

Pour en savoir plus sur les variables personnalisées, consultez [Variables](onboarding-variables#custom-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 \{#2-build-the-offer-overlay\}

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](onboarding-variables#product-variables) 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 \{#3-add-the-dismiss-button-to-the-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.

:::important
Ne laissez pas l'action **Close Flow** préconfigurée sur le bouton de fermeture de l'overlay — elle fermerait le flow entier au lieu de masquer l'overlay.
:::

## 4. Masquer l'overlay \{#4-hide-the-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** Hide. L'overlay reste dans l'arborescence des calques mais ne s'affiche plus sur le canevas.

## 5. Configurer le bouton Fermer \{#5-set-up-the-close-button\}

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](onboarding-actions#conditional-actions).

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 \{#next-steps\}

- [Enregistrez et publiez votre flow](builder-save-publish).
- [Ajoutez le flow à un placement](create-placement) pour commencer à le montrer aux utilisateurs.