---
title: "Mostrar una oferta cuando los usuarios pulsan cerrar"
description: "Intercepta el primer toque en cerrar para mostrar una oferta de última oportunidad antes de que los usuarios abandonen el paywall."
---

Cuando un usuario pulsa el botón de cerrar, está a punto de irse sin pagar. Esta receta intercepta el primer toque en cerrar: en lugar de cerrar el paywall, muestra un overlay con una oferta de última oportunidad. Cuando el usuario descarta la oferta, el botón de cerrar funciona con normalidad y cierra el flow.

La lógica utiliza una variable booleana personalizada y una acción condicional:
- `close_tapped` empieza como `False`.
- El primer toque en cerrar muestra el overlay de la oferta y establece `close_tapped` en `True`.
- Cualquier toque posterior en cerrar cierra el flow.
## Antes de empezar \{#before-you-start\}

- Crea una pantalla de paywall con un botón de cierre — por ejemplo, sigue [Crea una pantalla de paywall básica](basic-paywall-screen).
- [Crea un producto](create-product) con una [oferta](offers) para promocionar en el overlay.
## 1. Crea la variable \{#1-create-the-variable\}

Para más información sobre las variables personalizadas, consulta [Variables](onboarding-variables#custom-variables).

1. En el panel izquierdo, haz clic en el icono **{ }** para abrir **Variables**.
2. En la pestaña **Custom**, haz clic en **+**.
3. Nombra la variable `close_tapped` y establece **Value Type** en **Boolean**. Deja **Initial Value** en **False**.
4. Haz clic en **Create variable**.

## 2. Construye el overlay de oferta \{#2-build-the-offer-overlay\}

El overlay es un contenedor que se fija a la pantalla del dispositivo y se superpone al paywall. Constrúyelo visible — los elementos ocultos no se pueden editar, así que lo ocultarás en el paso 4, una vez que el contenido esté en su lugar.
1. Haz clic en **+** > **Layout** > **Vertical Container**.
2. Con el contenedor seleccionado, abre la pestaña **Design** y establece **Position** en **Fixed**. Configura la alineación horizontal en **Left & Right** y la vertical en **Top**. Como no hay opción de centrado vertical, introduce un desplazamiento superior (por ejemplo, `300`) para mover el overlay hacia el centro de la pantalla.
3. En **Fill**, define un fondo: un color sólido o una imagen. El contenedor es transparente por defecto, así que sin relleno el paywall seguirá visible debajo del overlay.
4. Añade el contenido de la oferta. Con el contenedor seleccionado en el panel **Layers**, haz clic en **+** > **Text** > **H2**. Para mostrar el precio con descuento, inserta [variables de oferta](onboarding-variables#product-variables) como `offer_price` en el campo **Content**.
5. Haz clic en **+** > **Products**, elige un preset de diseño y arrástralo al overlay. Selecciona la tarjeta de producto en el lienzo y elige el producto y la oferta en la pestaña **Design**.
6. Haz clic en **+** > **Buttons**, elige un preset de botón y arrástralo al overlay. En la pestaña **Interactions**, haz clic en **Add trigger** > **On tap** > **Add action**, y establece **Action** en **Purchase** y **Product** en tu producto de oferta.

## 3. Añadir el botón de cierre al overlay \{#3-add-the-dismiss-button-to-the-overlay\}

El overlay necesita su propio botón de cierre. Su acción debe ocultar el overlay, no cerrar el flow.

1. Con el overlay seleccionado, haz clic en **+** > **Buttons** > **Close flow**.
2. Con el botón seleccionado, abre la pestaña **Interactions**. El preset incluye una acción **Close Flow** preconfigurada. Haz clic en la acción y cambia su tipo a **Hide element**. Establece el destino como el contenedor del overlay.
:::important
No dejes la acción **Close Flow** preconfigurada en el botón de cierre del overlay — cerraría el flow completo en lugar de ocultar el overlay.
:::

## 4. Ocultar el overlay \{#hide-the-overlay\}

El overlay debe permanecer invisible hasta el primer toque de cierre.

En el panel **Layers**, selecciona el contenedor del overlay y establece su estado en **Hide** Hide. El overlay permanece en el árbol de capas pero ya no se renderiza en el canvas.

## 5. Configura el botón de cierre \{#5-set-up-the-close-button\}

Reemplaza la acción predeterminada del botón de cierre por una acción condicional que se ramifique en `close_tapped`.

Para más información sobre las acciones condicionales, consulta [Acciones — Acciones condicionales](onboarding-actions#conditional-actions).
1. Selecciona el botón de cerrar del paywall — el que aparece en la pantalla, no el botón de cierre del overlay.
2. Abre la pestaña **Interactions**, haz clic en la acción **Close Flow** preconfigurada y cambia su tipo a **Conditional Action**.
3. En el bloque **if**, haz clic en **Add condition** y configura: `close_tapped` **Equals** **False**.
4. En el bloque **then**, añade dos acciones:
    - **Set Variable**: establece `close_tapped` en **True**.
- **Show element**: Establece el objetivo en el overlay de la oferta.

      
5. En el bloque **else**, añade una acción **Close Flow**.

   
Ahora el primer toque en cerrar muestra la oferta. Después de que el usuario la descarte, volver a tocar cerrar coincide con la rama **else** y cierra el flow.
## Próximos pasos \{#next-steps\}

- [Guarda y publica tu flow](builder-save-publish).
- [Añade el flow a un placement](create-placement) para empezar a mostrárselo a los usuarios.