Afficher les flows et paywalls - Kotlin Multiplatform

Si vous avez créé un flow ou un paywall dans l’ancien Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel flow ou paywall contient à la fois ce qui doit être affiché et comment cela doit l’être.

Warning

Ce guide concerne les flows et les paywalls rendus par Adapty. Le processus est différent pour les paywalls Remote Config et le mode Observer.

Pour présenter des paywalls Remote Config, voir Afficher un paywall conçu avec Remote Config.
Pour présenter des flows en mode Observer, voir Présenter des flows en mode Observer.

Pour obtenir l’objet flow utilisé ci-dessous, voir Obtenir des flows et des paywalls.

Le SDK Adapty Kotlin Multiplatform propose deux façons de présenter des flows et des paywalls :

Avec Compose Multiplatform
Sans Compose Multiplatform

Avec Compose Multiplatform

Pour afficher un flow ou un paywall, utilisez la méthode view.present() sur la view créée par la méthode createFlowView. Chaque view ne peut être utilisée qu’une seule fois. Si vous devez afficher le flow à nouveau, appelez createFlowView une nouvelle fois pour créer une nouvelle instance de view.

Warning

Réutiliser la même view sans la recréer peut entraîner une erreur.


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

Afficher une boîte de dialogue

Utilisez cette méthode à la place des boîtes de dialogue d’alerte natives lorsqu’un flow ou un paywall est affiché sur Android. Sur Android, les alertes classiques apparaissent derrière la vue du flow, ce qui les rend invisibles pour les utilisateurs. Cette méthode garantit un affichage correct de la boîte de dialogue au-dessus du flow sur toutes les plateformes.


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

Configurer le style de présentation iOS

Configurez la façon dont le flow ou le paywall est affiché sur iOS en passant le paramètre iosPresentationStyle à la méthode present(). Ce paramètre accepte les valeurs AdaptyUIIOSPresentationStyle.FULLSCREEN (par défaut) ou AdaptyUIIOSPresentationStyle.PAGESHEET.


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

Sans Compose Multiplatform

Note

createNativeFlowView fait partie du module principal io.adapty:adapty-kmp. Si votre projet n’utilise pas Compose Multiplatform, vous n’avez pas besoin de la dépendance io.adapty:adapty-kmp-ui.

Pour intégrer un flow ou un paywall sans Compose Multiplatform, appelez createNativeFlowView. Cette fonction retourne un AdaptyNativeFlowView que vous ajoutez à votre mise en page :


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

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

Par défaut, une vue intégrée n’applique pas les marges de zone sécurisée — votre layout est censé gérer les insets. Si vous souhaitez que la vue les applique elle-même, passez androidEnableSafeArea = true à createNativeFlowView. Ce paramètre est réservé à Android.

Comme les méthodes par défaut de l’interface KMP deviennent @required en Swift, vous ne pouvez pas implémenter AdaptyUIFlowsEventsObserver directement depuis Swift. Déclarez d’abord une classe de base ouverte dans iosMain :

open class BaseFlowObserver : AdaptyUIFlowsEventsObserver

Sous-classez-la ensuite en Swift, en surchargeant uniquement ce dont vous avez besoin :

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.

Supprimer la vue

Appelez dispose() lorsque vous retirez la vue de votre mise en page. Cela désenregistre l’écouteur d’événements et libère les ressources internes.

nativeView.dispose()

Balises personnalisées

Les balises personnalisées vous permettent d’éviter de créer des flows ou des paywalls distincts pour chaque scénario. Imaginez un flow unique qui s’adapte dynamiquement selon les données de l’utilisateur. Par exemple, au lieu d’un générique « Bonjour ! », vous pourriez accueillir vos utilisateurs personnellement avec « Bonjour, John ! » ou « Bonjour, Ann ! »

Voici quelques exemples d’utilisation des balises personnalisées :

Afficher le nom ou l’e-mail de l’utilisateur sur le flow ou le paywall.
Indiquer le jour de la semaine en cours pour stimuler les ventes (ex. : « Bon jeudi »).
Ajouter des informations personnalisées sur les produits que vous vendez (comme le nom d’un programme de fitness ou un numéro de téléphone dans une application VoIP).

Les balises personnalisées vous permettent de créer un flow flexible qui s’adapte à diverses situations, rendant l’interface de votre application plus personnalisée et engageante.

Warning

Dans certains cas, votre application peut ne pas savoir par quoi remplacer une balise personnalisée — notamment si les utilisateurs utilisent une ancienne version de l’AdaptyUI SDK. Pour éviter cela, ajoutez toujours un texte de substitution qui remplacera les lignes contenant des balises inconnues. Sans cela, les utilisateurs risquent de voir les balises s’afficher comme du code (<USERNAME/>).

Pour utiliser des balises personnalisées dans votre flow ou paywall, transmettez-les lors de la création de la vue du 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,
)

Minuteries personnalisées

La minuterie est un excellent outil pour promouvoir des offres spéciales ou saisonnières avec une limite de temps. À noter cependant que cette minuterie n’est pas liée à la validité de l’offre ni à la durée de la campagne. Il s’agit simplement d’un compte à rebours autonome qui démarre à la valeur que vous définissez et descend jusqu’à zéro. Quand la minuterie atteint zéro, rien ne se passe — elle reste simplement à zéro.

Vous pouvez personnaliser le texte avant et après la minuterie pour créer le message souhaité, par exemple : « L’offre se termine dans : 10:00 sec. »

Pour utiliser des minuteries personnalisées dans votre flow ou paywall, passez-les lors de la création de la vue du 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 vous avez personnalisé un paywall avec le Paywall Builder, vous n’avez pas besoin de vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel paywall contient à la fois ce qui doit être affiché et la façon dont cela doit l’être.

Warning

Ce guide concerne uniquement les paywalls créés dans l’ancien builder. Le processus de présentation des paywalls diffère pour les paywalls Remote Config et le mode Observer.

Pour présenter les paywalls Remote Config, consultez Afficher un paywall conçu avec Remote Config.

Le SDK Kotlin Multiplatform d’Adapty propose deux façons d’afficher les paywalls :

Avec Compose Multiplatform
Sans Compose Multiplatform

Avec Compose Multiplatform

Pour afficher un paywall, utilisez la méthode view.present() sur la view créée par la méthode createPaywallView. Chaque view ne peut être utilisée qu’une seule fois. Si vous devez afficher le paywall à nouveau, appelez createPaywallView une nouvelle fois pour créer une nouvelle instance de view.

Warning

Réutiliser la même view sans la recréer peut entraîner une erreur.


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

Afficher une boîte de dialogue

Utilisez cette méthode à la place des boîtes de dialogue natives sur Android lorsqu’une vue de paywall est affichée. Sur Android, les alertes classiques apparaissent derrière la vue du paywall, ce qui les rend invisibles pour les utilisateurs. Cette méthode garantit un affichage correct de la boîte de dialogue au-dessus du paywall sur toutes les plateformes.


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

Configurer le style de présentation iOS

Configurez la manière dont le paywall est présenté sur iOS en passant le paramètre iosPresentationStyle à la méthode present(). Ce paramètre accepte les valeurs AdaptyUIIOSPresentationStyle.FULLSCREEN (par défaut) ou AdaptyUIIOSPresentationStyle.PAGESHEET.


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

Sans Compose Multiplatform

Note

createNativePaywallView fait partie du module principal io.adapty:adapty-kmp. Si votre projet n’utilise pas Compose Multiplatform, vous n’avez pas besoin de la dépendance io.adapty:adapty-kmp-ui.

Pour intégrer un paywall sans Compose Multiplatform, appelez createNativePaywallView. Cette méthode retourne un AdaptyNativePaywallView que vous ajoutez à votre mise en page :


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

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

Les méthodes par défaut de l’interface KMP devenant @required en Swift, vous ne pouvez pas implémenter AdaptyUIPaywallsEventsObserver directement depuis Swift. Déclarez d’abord une classe de base ouverte dans iosMain :

open class BasePaywallObserver : AdaptyUIPaywallsEventsObserver

Ensuite, créez une sous-classe en Swift en ne redéfinissant que ce dont vous avez besoin :

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.

Supprimer la vue

Appelez dispose() lorsque vous retirez la vue de votre mise en page. Cela annule l’enregistrement du listener d’événements et libère les ressources internes.

nativeView.dispose()

Tags personnalisés

Les tags personnalisés vous permettent d’éviter de créer des paywalls distinctes pour différents scénarios. Imaginez une seule paywall qui s’adapte dynamiquement selon les données utilisateur. Par exemple, au lieu d’un générique « Bonjour ! », vous pourriez accueillir vos utilisateurs personnellement avec « Bonjour, Jean ! » ou « Bonjour, Anne ! »

Voici quelques façons d’utiliser les tags personnalisés :

Afficher le nom ou l’adresse e-mail de l’utilisateur sur la paywall.
Afficher le jour de la semaine pour booster les ventes (par exemple, « Bon jeudi »).
Ajouter des détails personnalisés sur les produits que vous vendez (comme le nom d’un programme de fitness ou un numéro de téléphone dans une application VoIP).

Les balises personnalisées vous permettent de créer un paywall flexible qui s’adapte à diverses situations, rendant l’interface de votre application plus personnalisée et engageante.

Warning

Dans certains cas, votre application peut ne pas savoir par quoi remplacer une balise personnalisée — notamment si les utilisateurs utilisent une ancienne version du SDK AdaptyUI. Pour éviter cela, ajoutez toujours un texte de substitution qui remplacera les lignes contenant des balises inconnues. Sans cela, les utilisateurs pourraient voir les balises affichées sous forme de code (<USERNAME/>).

Pour utiliser des balises personnalisées dans votre paywall, transmettez-les lors de la création de la vue du 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,
)

Minuteries personnalisées

La minuterie de paywall est un excellent outil pour promouvoir des offres spéciales ou saisonnières limitées dans le temps. Notez toutefois que cette minuterie n’est pas liée à la validité de l’offre ni à la durée de la campagne. Il s’agit simplement d’un compte à rebours autonome qui démarre à la valeur que vous avez définie et décroît jusqu’à zéro. Lorsque la minuterie atteint zéro, rien ne se passe — elle reste simplement à zéro.

Vous pouvez personnaliser le texte avant et après la minuterie pour composer le message souhaité, par exemple : « L’offre se termine dans : 10:00 sec. »

Pour utiliser des minuteries personnalisées dans votre paywall, passez-les lors de la création de la vue du 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,
)