Vista previa de flows

Tienes dos formas de previsualizar tu flow en distintos tipos de pantalla:

  • Vista previa en dispositivos: Comprueba cómo se ve tu flow en dispositivos reales en cualquier etapa del desarrollo.
  • Vista previa en el Adapty Dashboard: Previsualiza tu flow mientras lo diseñas.

Vista previa en dispositivos

Para previsualizar tu flow en un dispositivo real:

  1. Descarga la app móvil de Adapty para iOS o Android.
  2. En el Flow & Paywall Builder, haz clic en Test on device.
Botón Test on device en el Flow & Paywall Builder
  1. Selecciona el idioma del flow.
  2. Escanea el código QR con la cámara del dispositivo o abre el enlace. Esto abrirá tu flow en la app móvil de Adapty.
Note

En el modo de prueba, Adapty no puede acceder a tus productos en los stores, por lo que los precios mostrados en el flow no son reales.

Selector de idioma y código QR en el diálogo Probar en dispositivo

Solución de problemas

Si el flow no se abre en la vista previa, la causa habitual es una acción incompleta, una pantalla vacía o un producto sin asignar. Consulta Problemas comunes para ver la lista completa.

Vista previa en el Adapty Dashboard

Tip

Para asegurarte de que tu flow está listo para publicarse, previsualízalo en un dispositivo real y confirma que se muestra sin errores.

Puedes previsualizar tu flow en distintos tipos de pantalla usando el área de vista previa del Flow & Paywall Builder. Esto te ayuda a garantizar que tu flow se vea bien en diferentes dispositivos y tamaños de pantalla.

Con los controles de vista previa situados debajo de la previsualización, puedes:

  • Seleccionar el dispositivo en el que previsualizar tu flow.
  • Cambiar entre los modos de vista previa horizontal y vertical.
  • Cambiar entre el modo claro y el oscuro.
  • Cambiar entre idiomas.
Tip
  • Previsualiza siempre diferentes idiomas, ya que pueden tener palabras de distinta longitud y el diseño de la pantalla puede verse diferente en cada uno.
  • Para previsualizar variables personalizadas, establece valores iniciales para ellas. Por ejemplo, si añades una variable name, puedes establecer el valor inicial como Jane Doe para previsualizarla.
preview-paywall.gif

Vista previa de productos y ofertas

La vista previa lee las variables de producto de tu catálogo de Adapty, que cubre solo una parte de lo que resuelve un dispositivo:

  • prod_title muestra el título del producto tal como está almacenado en Adapty. prod_price y las variables prod_price_per_* muestran el precio almacenado en Adapty, en dólares estadounidenses — los usuarios ven el precio localizado del store.
  • offer_price, offer_billing_period y offer_full_duration permanecen sin resolver, por lo que la vista previa muestra el nombre de la variable entre llaves — por ejemplo, {{products.selectedProduct.offer_price}}. Estos valores llegan al flow cuando el SDK lo renderiza en tu app.
  • is_free_trial, is_pay_up_front e is_pay_as_you_go siguen la oferta seleccionada en la tarjeta del producto. Sin oferta, los tres son false. Con una oferta, la vista previa la trata como pago por uso.

Las condiciones sobre el tipo de oferta cambian en la vista previa, pero solo se muestra la rama de pago por uso de forma predeterminada. Para ver las otras ramas, simula el modo de pago:

  1. En el lienzo, selecciona la tarjeta de producto que tiene la oferta.
  2. En el panel derecho, en Product, abre el desplegable de oferta.
  3. En Preview as, selecciona Free trial, Pay up front o Pay as you go. Este ajuste solo se aplica a la tarjeta actual.