Botones en el Flow Builder

Esta sección describe el nuevo Flow Builder, que funciona con las versiones 4.0 o superiores de los SDKs de Adapty.

Los botones son los elementos interactivos del Flow Builder que responden a los toques del usuario. Úsalos para:

  • CTAs de compra que se conectan a productos y procesan transacciones automáticamente
  • Navegación — mueve a los usuarios entre pantallas (Siguiente, Atrás, Cerrar, Omitir)
  • Enlaces de utilidad — Restaurar compras, Términos de servicio y Política de privacidad

Coloca los CTAs de compra, los enlaces de restauración y los enlaces legales dentro de un Footer — está anclado en la parte inferior de la pantalla y queda por encima de los elementos que se desplazan debajo.

Añadir botones

Para añadir cualquier botón:

  1. Haz clic en + y selecciona Button.
  2. Selecciona un tipo de botón.
button-type.webp
  1. Los botones de compra, los enlaces y los botones de cierre vienen con acciones preconfiguradas. Para los enlaces, configura las URLs a las que se dirigirá a los usuarios. Para los demás tipos de botón, ve al panel Interactions. Allí, en la sección Button triggers, configura las acciones que debe realizar el botón.
button-action.webp
  1. Configura el diseño del botón en el panel Design.

Tipos de botones

Botones de compra

Para que los botones de compra funcionen, vincula productos a las pantallas y añade el elemento Products. Consulta la guía.

Un botón de compra inicia la compra in-app del producto que el usuario haya seleccionado en la pantalla. El SDK procesa la transacción automáticamente, por lo que no necesitas gestionar las compras en el código de la app.

Para añadir un botón de compra:

  1. Haz clic en + y selecciona Button, luego elige un preset de botón.
  2. Con el botón seleccionado, abre la pestaña Interactions en el panel derecho.
  3. Haz clic en Add trigger > On tap, luego haz clic en Add action.
  4. Establece Action en Purchase y Product en products.selectedProduct. La variable products.selectedProduct siempre se resuelve al producto actualmente seleccionado en la pantalla.

Puedes atraer más atención hacia los botones de compra animándolos. El Paywall Builder admite actualmente el tipo de animación Pulse. Configura el estilo de animación en el panel Design.

purchase-button.webp

Los botones Terms of Use y Privacy Policy tienen una acción Open URL integrada. Establece la URL de destino allí. Las URLs vacías en Open URL y los enlaces en línea bloquean la vista previa y la publicación.

Para cumplir con algunos requisitos del store, puedes añadir enlaces a:

  • Términos de servicio
  • Política de privacidad
  • Restauración de compras Para añadir enlaces:
  1. Haz clic en + y selecciona Button > Links. Esto añadirá una fila de botones en línea con acciones predefinidas: restaurar compras o abrir una URL. Si no necesitas todos los botones incluidos, elimina los que no necesites en el panel de capas.
add-links.webp
  1. Ahora, configura las acciones de los botones:

    • El botón Restore purchases ya gestiona la restauración de compras.
    • Para cada enlace restante:
      1. Haz clic en el botón para seleccionarlo y cambia a la pestaña Interactions en el panel derecho.
      2. Pega la URL en el campo.
      3. Por defecto, la URL se abre en un navegador integrado en la app para una experiencia de usuario fluida. Si quieres que los usuarios naveguen a un navegador externo, marca la casilla Open in external browser.
pb-links.webp

Cerrar el flow

El botón Close cierra el flow automáticamente.

Para añadir un botón de cierre, haz clic en + y selecciona Button > Close flow.

close-flow.webp

Usa la posición Absolute para colocar el botón de cierre en la esquina de la pantalla.

También puedes configurar cualquier otro botón para cerrar el flow usando acciones.

Botones personalizados

Cualquier botón que añadas puede configurarse para realizar una acción al pulsarlo: