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

• Crea una pantalla de paywall con un botón de cierre — por ejemplo, sigue Crea una pantalla de paywall básica.
• Crea un producto con una oferta para promocionar en el overlay.

1. Crea la variable

Para más información sobre las variables personalizadas, consulta 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

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 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

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.

4. Ocultar el 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 . El overlay permanece en el árbol de capas pero ya no se renderiza en el canvas.

5. Configura el botón de cierre

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.

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

• Guarda y publica tu flow.
• Añade el flow a un placement para empezar a mostrárselo a los usuarios.