Mostrar flows y paywalls - Kotlin Multiplatform

Si has creado un flow o un paywall, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese flow o paywall ya contiene tanto lo que debe mostrarse como la forma en que debe mostrarse.

Esta guía cubre los flows y los paywalls creados con el nuevo Paywall Builder renderizados por Adapty. El proceso es diferente para los paywalls de Remote Config y el modo Observer.

Para presentar paywalls de Remote Config, consulta Renderizar paywall diseñado con Remote Config.
Para presentar flows en modo Observer, consulta Presentar flows en modo Observer.

Para obtener el objeto flow que se usa a continuación, consulta Obtener flows y paywalls.

El SDK de Adapty Kotlin Multiplatform ofrece dos formas de presentar flows y paywalls:

Con Compose Multiplatform
Sin Compose Multiplatform

Con Compose Multiplatform

Para mostrar un flow o paywall, usa el método view.present() en el view creado por el método createFlowView. Cada view solo puede usarse una vez. Si necesitas mostrar el flow de nuevo, llama a createFlowView otra vez para crear una nueva instancia de view.

Reutilizar el mismo view sin recrearlo puede provocar un error.


viewModelScope.launch {
    AdaptyUI.createFlowView(flow = flow).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}

Mostrar diálogo

Usa este método en lugar de los diálogos de alerta nativos cuando se muestre un flow o paywall en Android. En Android, las alertas normales aparecen detrás de la vista del flow, lo que las hace invisibles para los usuarios. Este método garantiza que el diálogo se muestre correctamente por encima del flow en todas las plataformas.


viewModelScope.launch {
    view.showDialog(
        title = "Close this screen?",
        content = "You will lose access to exclusive offers.",
        primaryActionTitle = "Stay",
        secondaryActionTitle = "Close"
    ).onSuccess { action ->
        if (action == AdaptyUIDialogActionType.SECONDARY) {
            // User confirmed - close the flow
            view.dismiss()
        }
        // If primary - do nothing, user stays
    }.onError { error ->
        // handle the error
    }
}

Configurar el estilo de presentación en iOS

Configura cómo se presenta el flow o el paywall en iOS pasando el parámetro iosPresentationStyle al método present(). El parámetro acepta los valores AdaptyUIIOSPresentationStyle.FULLSCREEN (predeterminado) o AdaptyUIIOSPresentationStyle.PAGESHEET.


viewModelScope.launch {
    val view = AdaptyUI.createFlowView(flow = flow).getOrNull()
    view?.present(iosPresentationStyle = AdaptyUIIOSPresentationStyle.PAGESHEET)
}

Sin Compose Multiplatform

createNativeFlowView forma parte del módulo principal io.adapty:adapty-kmp. Si tu proyecto no usa Compose Multiplatform, no necesitas la dependencia io.adapty:adapty-kmp-ui.

Para incrustar un flow o paywall sin Compose Multiplatform, llama a createNativeFlowView. Devuelve un AdaptyNativeFlowView que puedes añadir a tu layout:


val nativeView = AdaptyUI.createNativeFlowView(
    context = context,
    viewModelStoreOwner = activity,
    flow = flow,
    observer = myFlowObserver,
)

// Embed in your Compose layout:
AndroidView(
    factory = { nativeView.view },
    modifier = Modifier.fillMaxSize()
)

Por defecto, una vista embebida no aplica los rellenos de área segura — se espera que tu layout gestione los insets. Si quieres que la vista los aplique por sí misma, pasa androidEnableSafeArea = true a createNativeFlowView. Este parámetro es exclusivo de Android.

Debido a que los métodos predeterminados de la interfaz KMP se convierten en @required en Swift, no puedes implementar AdaptyUIFlowsEventsObserver directamente desde Swift. Primero declara una clase base abierta en iosMain:

open class BaseFlowObserver : AdaptyUIFlowsEventsObserver

Luego, crea una subclase en Swift sobreescribiendo solo lo que necesites:

class MyFlowObserver: BaseFlowObserver {
    override func flowViewDidPerformAction(view: AdaptyUIFlowView, action: any AdaptyUIAction) {
        if action is AdaptyUIActionCloseAction {
            // remove nativeView from your view hierarchy
        }
    }
}

let nativeView = AdaptyUI.shared.createNativeFlowView(
    flow: flow,
    observer: MyFlowObserver()
)
// nativeView.viewController is a UIViewController.
// Add it to your SwiftUI view or UIKit hierarchy.

Eliminar la vista

Llama a dispose() cuando quites la vista de tu layout. Esto cancela el registro del listener de eventos y libera los recursos internos.

nativeView.dispose()

Etiquetas personalizadas

Las etiquetas personalizadas te permiten evitar crear flows o paywalls separados para distintos escenarios. Imagina un único flow que se adapta dinámicamente según los datos del usuario. Por ejemplo, en lugar de un genérico “¡Hola!”, podrías saludar a los usuarios de forma personal con “¡Hola, Juan!” o “¡Hola, Ana!”

Estos son algunos usos de las etiquetas personalizadas:

Mostrar el nombre o el correo electrónico del usuario en el flow o paywall.
Mostrar el día de la semana actual para impulsar las ventas (por ejemplo, “Feliz jueves”).
Añadir detalles personalizados sobre los productos que vendes (como el nombre de un programa de fitness o un número de teléfono en una app de VoIP).

Las etiquetas personalizadas te ayudan a crear un flow flexible que se adapta a distintas situaciones, haciendo que la interfaz de tu app sea más personalizada y atractiva.

En algunos casos, tu app puede no saber con qué reemplazar una etiqueta personalizada, especialmente si los usuarios tienen una versión antigua del SDK de AdaptyUI. Para evitarlo, añade siempre un texto de respaldo que sustituya las líneas que contengan etiquetas personalizadas desconocidas. Sin esto, los usuarios podrían ver las etiquetas mostradas como código (<USERNAME/>).

Para usar etiquetas personalizadas en tu flow o paywall, pásalas al crear la vista del flow:


viewModelScope.launch {
    val customTags = mapOf(
        "USERNAME" to "John",
        "DAY_OF_WEEK" to "Thursday"
    )

    AdaptyUI.createFlowView(
        flow = flow,
        customTags = customTags
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativeFlowView(
    context = context,
    viewModelStoreOwner = activity,
    flow = flow,
    observer = myFlowObserver,
    customTags = customTags,
)


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativeFlowView(
    flow = flow,
    observer = myFlowObserver,
    customTags = customTags,
)

Temporizadores personalizados

El temporizador es una herramienta ideal para promocionar ofertas especiales y de temporada con límite de tiempo. Sin embargo, hay que tener en cuenta que este temporizador no está vinculado a la validez de la oferta ni a la duración de la campaña. Es simplemente una cuenta regresiva independiente que parte del valor que establezcas y disminuye hasta cero. Cuando el temporizador llega a cero, no ocurre nada: simplemente se queda en cero.

Puedes personalizar el texto que aparece antes y después del temporizador para crear el mensaje que desees, por ejemplo: “La oferta termina en: 10:00 seg.”

Para usar temporizadores personalizados en tu flow o paywall, pásalos al crear la vista del flow:


viewModelScope.launch {
    val customTimers = mapOf(
        "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
        "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
    )

    AdaptyUI.createFlowView(
        flow = flow,
        customTimers = customTimers
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativeFlowView(
    context = context,
    viewModelStoreOwner = activity,
    flow = flow,
    observer = myFlowObserver,
    customTimers = customTimers,
)


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativeFlowView(
    flow = flow,
    observer = myFlowObserver,
    customTimers = customTimers,
)

Si has personalizado un paywall con el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Un paywall así ya incluye tanto qué mostrar como cómo mostrarlo.

Esta guía es solo para paywalls del nuevo Paywall Builder. El proceso para presentar paywalls es diferente para los paywalls diseñados con Remote Config y el modo Observer.

Para presentar paywalls con Remote Config, consulta Renderizar un paywall diseñado con Remote Config.

El SDK de Adapty para Kotlin Multiplatform ofrece dos formas de mostrar paywalls:

Con Compose Multiplatform
Sin Compose Multiplatform

Con Compose Multiplatform

Para mostrar un paywall, usa el método view.present() en el view creado por el método createPaywallView. Cada view solo puede usarse una vez. Si necesitas mostrar el paywall de nuevo, llama a createPaywallView otra vez para crear una nueva instancia de view.

Reutilizar el mismo view sin recrearlo puede provocar un error.


viewModelScope.launch {
    AdaptyUI.createPaywallView(paywall = paywall).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}

Mostrar diálogo

Usa este método en lugar de los diálogos de alerta nativos cuando se muestra una vista de paywall en Android. En Android, las alertas normales aparecen detrás de la vista del paywall, lo que las hace invisibles para los usuarios. Este método garantiza que los diálogos se muestren correctamente por encima del paywall en todas las plataformas.


viewModelScope.launch {
    view.showDialog(
        title = "Close paywall?",
        content = "You will lose access to exclusive offers.",
        primaryActionTitle = "Stay",
        secondaryActionTitle = "Close"
    ).onSuccess { action ->
        if (action == AdaptyUIDialogActionType.SECONDARY) {
            // User confirmed - close the paywall
            view.dismiss()
        }
        // If primary - do nothing, user stays
    }.onError { error ->
        // handle the error
    }
}

Configurar el estilo de presentación en iOS

Configura cómo se presenta el paywall en iOS pasando el parámetro iosPresentationStyle al método present(). El parámetro acepta los valores AdaptyUIIOSPresentationStyle.FULLSCREEN (por defecto) o AdaptyUIIOSPresentationStyle.PAGESHEET.


viewModelScope.launch {
    val view = AdaptyUI.createPaywallView(paywall = paywall).getOrNull()
    view?.present(iosPresentationStyle = AdaptyUIIOSPresentationStyle.PAGESHEET)
}

Sin Compose Multiplatform

createNativePaywallView forma parte del módulo principal io.adapty:adapty-kmp. Si tu proyecto no usa Compose Multiplatform, no necesitas la dependencia io.adapty:adapty-kmp-ui.

Para incrustar un paywall sin Compose Multiplatform, llama a createNativePaywallView. Devuelve un AdaptyNativePaywallView que añades a tu layout:


val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
)

// Embed in your Compose layout:
AndroidView(
    factory = { nativeView.view },
    modifier = Modifier.fillMaxSize()
)

Debido a que los métodos predeterminados de la interfaz KMP se convierten en @required en Swift, no puedes implementar AdaptyUIPaywallsEventsObserver directamente desde Swift. Primero declara una clase base abierta en iosMain:

open class BasePaywallObserver : AdaptyUIPaywallsEventsObserver

Luego, en Swift, crea una subclase y sobreescribe solo lo que necesites:

class MyPaywallObserver: BasePaywallObserver {
    override func paywallViewDidPerformAction(view: AdaptyUIPaywallView, action: any AdaptyUIAction) {
        if action is AdaptyUIActionCloseAction {
            // remove nativeView from your view hierarchy
        }
    }
}

let nativeView = AdaptyUI.shared.createNativePaywallView(
    paywall: paywall,
    observer: MyPaywallObserver()
)
// nativeView.viewController is a UIViewController.
// Add it to your SwiftUI view or UIKit hierarchy.

Eliminar la vista

Llama a dispose() cuando quieras eliminar la vista de tu layout. Esto cancela el registro del listener de eventos y libera los recursos internos.

nativeView.dispose()

Etiquetas personalizadas

Las etiquetas personalizadas te permiten evitar crear paywalls separados para distintos escenarios. Imagina un único paywall que se adapte dinámicamente según los datos del usuario. Por ejemplo, en lugar de un genérico “¡Hola!”, podrías saludar a los usuarios de forma personal con “¡Hola, Juan!” o “¡Hola, Ana!”

Aquí tienes algunas formas de usar las etiquetas personalizadas:

Mostrar el nombre o el correo electrónico del usuario en el paywall.
Mostrar el día de la semana actual para impulsar las ventas (p. ej., “Feliz jueves”).
Añadir detalles personalizados sobre los productos que vendes (como el nombre de un programa de fitness o un número de teléfono en una app de VoIP).

Las etiquetas personalizadas te ayudan a crear un paywall flexible que se adapta a distintas situaciones, haciendo que la interfaz de tu app sea más personalizada y atractiva.

En algunos casos, tu app podría no saber con qué reemplazar una etiqueta personalizada, especialmente si los usuarios tienen una versión antigua del SDK de AdaptyUI. Para evitarlo, añade siempre un texto de respaldo que sustituya las líneas que contengan etiquetas desconocidas. Sin esto, los usuarios podrían ver las etiquetas mostradas como código (<USERNAME/>).

Para usar etiquetas personalizadas en tu paywall, pásalas al crear la vista del paywall:


viewModelScope.launch {
    val customTags = mapOf(
        "USERNAME" to "John",
        "DAY_OF_WEEK" to "Thursday"
    )

    AdaptyUI.createPaywallView(
        paywall = paywall,
        customTags = customTags
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
    customTags = customTags,
)


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativePaywallView(
    paywall = paywall,
    observer = myPaywallObserver,
    customTags = customTags,
)

Temporizadores personalizados

El temporizador de un paywall es una herramienta estupenda para promocionar ofertas especiales y de temporada con límite de tiempo. Sin embargo, ten en cuenta que este temporizador no está vinculado a la validez de la oferta ni a la duración de la campaña. Es simplemente una cuenta regresiva independiente que comienza desde el valor que establezcas y disminuye hasta cero. Cuando llega a cero, no ocurre nada: simplemente se queda en cero.

Puedes personalizar el texto antes y después del temporizador para crear el mensaje que desees, por ejemplo: “La oferta termina en: 10:00 seg.”

Para usar temporizadores personalizados en tu paywall, pásalos al crear la vista del paywall:


viewModelScope.launch {
    val customTimers = mapOf(
        "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
        "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
    )

    AdaptyUI.createPaywallView(
        paywall = paywall,
        customTimers = customTimers
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
    customTimers = customTimers,
)


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativePaywallView(
    paywall = paywall,
    observer = myPaywallObserver,
    customTimers = customTimers,
)