Pass data to flows in Kotlin Multiplatform SDK

A custom tag is a custom variable with a value from your app. After you select Value comes from outside the app in a variable’s settings, your app can set its value through the Adapty SDK. For example, a text element contains “Coins:” and a custom tag. If your app passes “120” for the tag, users see “Coins: 120”.

Before you start

You need the Adapty SDK v4 or later. Versions before v4 don’t display flows.

Add custom tags to the flow

To show your app’s values in a flow, set up custom tags in the builder:

Create a custom tag for each value that your app passes.
Insert each tag into a text element.
Note each tag’s full name, including its group. Your app’s code passes each value under this name. For example, if the user group contains a streak tag, the tag’s full name is user.streak.

Pass custom tag values

Pass your app’s values to the customTags parameter of AdaptyUI.createFlowView or createNativeFlowView, as a Map<String, String>:

Each key is the full name of a custom tag, such as user.streak.
Each value is the string that users see in place of the tag.
Each value must be human-readable, such as “1,250”, not “1250.0”. Adapty doesn’t format or translate it.

The SDK reads the values once, when it creates the view, so they don’t change while the flow is open.

import com.adapty.kmp.AdaptyUI
import com.adapty.kmp.models.onError
import com.adapty.kmp.models.onSuccess
import kotlinx.coroutines.launch

viewModelScope.launch {
    val customTags = mapOf(
        "username" to "DragonSlayer42",
        "coins" to "1,250",
    )

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

To embed the flow in a Compose layout, pass the same customTags parameter to the AdaptyUIFlowPlatformView composable. If you pass a different customTags map, the composable creates a new view, and users return to the flow’s first screen.

import com.adapty.kmp.AdaptyUI
import com.adapty.kmp.createNativeFlowView

val customTags = mapOf(
    "username" to "DragonSlayer42",
    "coins" to "1,250",
)

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

import com.adapty.kmp.AdaptyUI
import com.adapty.kmp.createNativeFlowView

val customTags = mapOf(
    "username" to "DragonSlayer42",
    "coins" to "1,250",
)

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

To test your custom tags, open the flow in your app, after you add the code that sets their values. The builder canvas and the preview on devices only show Initial values: the Adapty mobile app doesn’t set custom tag values.

If your app already sets custom tag values for old Paywall Builder paywalls, review how custom tags in flows differ.

What users see without a value

Users see a custom tag’s Initial value as a fallback in the following cases:

Your app passes no value for the tag.
The user hasn’t updated your app to a version that passes the value.
The name in your app’s code doesn’t match the tag’s full name, including letter case.
Another custom tag in the same text element has no value. Then every custom tag in that text element shows its Initial value.

To show nothing in place of a tag, pass an empty string. Adapty treats an empty string as a value, so the fallback doesn’t appear.

Example: show a BMI from onboarding answers

A flow can collect answers from users, and a custom tag can show a value from your app. Combine the two to show users a result that your app calculates from their answers, such as a score, a recommended plan, or a health metric:

A flow collects the answers and sends them to your app.
Your app calculates the result.
Your app passes the result to the next flow as a custom tag value.

In this example, an onboarding flow collects the user’s weight and height. When the user closes the onboarding flow after its last screen, your app calculates their body mass index (BMI). Then it opens a paywall flow that shows the BMI.

Set up the flows

Create two flows: an onboarding flow that collects the user’s weight and height, and a paywall flow that shows their BMI.
Add two Number inputs to the onboarding flow:
- One for the weight in kilograms, with the Element ID weight.
- One for the height in centimeters, with the Element ID height.
For both inputs, set the Format to Integer. An input sends its value as text, exactly as the user types it, and the sample code doesn’t read “70.5” and “70,5” the same way. Whole numbers have no decimal separator, so the code reads them the same in every locale.
To make sure your app receives both values, end the onboarding flow with a screen that has no inputs. On that screen, add a button with the Close flow action. Inputs send their values when they lose focus or when the user moves to another screen. The Close flow action doesn’t send them. The sample code only opens the paywall if the user reached the last screen.
In the paywall flow, create a custom tag named bmi. In the Initial value field, enter a dash (—). Users see the dash if your app passes no BMI.
Add a text element with the words “Your BMI:” to the paywall flow. After these words, insert the bmi custom tag.
Add the onboarding flow to a placement, such as onboarding. Add the paywall flow to a placement with the ID bmi_paywall. The code in Pass the BMI to the paywall fetches the paywall by this ID.

Pass the BMI to the paywall

Collect the weight and the height from the onboarding flow’s flow_user_input events, as in Process data from flows. To know that the user reached the last screen, watch for a flow_screen_showed event with is_last_screen set to true, as in Track flow screen views. When the user closes the onboarding flow after that screen, calculate the BMI. Then create the paywall’s view, and pass the BMI for the bmi custom tag.

The flowViewDidReceiveAnalyticEvent method parses the event parameters with the kotlinx.serialization.json library. If your project doesn’t have this library yet, add org.jetbrains.kotlinx:kotlinx-serialization-json to your app’s dependencies. Then implement the following methods on the observer you register with AdaptyUI.setFlowsEventsObserver:

import com.adapty.kmp.Adapty
import com.adapty.kmp.AdaptyUI
import com.adapty.kmp.AdaptyUIFlowsEventsObserver
import com.adapty.kmp.models.AdaptyUIFlowView
import com.adapty.kmp.models.onError
import com.adapty.kmp.models.onSuccess
import kotlin.math.roundToInt
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch
import kotlinx.serialization.json.Json
import kotlinx.serialization.json.booleanOrNull
import kotlinx.serialization.json.contentOrNull
import kotlinx.serialization.json.jsonObject
import kotlinx.serialization.json.jsonPrimitive

class MyFlowsEventsObserver(
    private val scope: CoroutineScope,
) : AdaptyUIFlowsEventsObserver {

    private val bodyAnswers = mutableMapOf<String, String>()
    private var reachedLastScreen = false

    override fun flowViewDidReceiveAnalyticEvent(
        view: AdaptyUIFlowView,
        name: String,
        paramsJsonString: String,
    ) {
        if (name != "flow_user_input" && name != "flow_screen_showed") return

        val params = Json.parseToJsonElement(paramsJsonString).jsonObject
        if (name == "flow_screen_showed") {
            if (params["is_last_screen"]?.jsonPrimitive?.booleanOrNull == true) {
                reachedLastScreen = true
            }
            return
        }
        val elementId = params["element_id"]?.jsonPrimitive?.content ?: return
        val value = params["value"]?.jsonPrimitive?.contentOrNull ?: return

        bodyAnswers[elementId] = value
    }

    override fun flowViewDidDisappear(view: AdaptyUIFlowView) {
        // The observer receives events from every flow. Reset `bodyAnswers` and
        // `reachedLastScreen` whenever a flow disappears, so that the paywall
        // doesn't open again when the user closes it.
        val answers = bodyAnswers.toMap()
        val finished = reachedLastScreen
        bodyAnswers.clear()
        reachedLastScreen = false

        // Number inputs send their values as strings.
        if (!finished) return
        val weight = answers["weight"]?.toDoubleOrNull() ?: return
        val height = answers["height"]?.toDoubleOrNull()?.takeIf { it > 0 } ?: return

        val heightInMeters = height / 100
        val bmi = weight / (heightInMeters * heightInMeters)
        val bmiText = ((bmi * 10).roundToInt() / 10.0).toString()

        scope.launch { showBmiPaywall(bmiText) }
    }
}

suspend fun showBmiPaywall(bmi: String) {
    Adapty.getFlow(placementId = "bmi_paywall").onSuccess { flow ->
        AdaptyUI.createFlowView(
            flow = flow,
            customTags = mapOf("bmi" to bmi),
        ).onSuccess { view ->
            view.present()
        }.onError { error ->
            // handle the error
        }
    }.onError { error ->
        // handle the error
    }
}

toString always uses a period as the decimal separator: “22.7”. To use the separator of the user’s locale, format the BMI with a locale-aware formatter on each platform, such as java.text.NumberFormat on Android and NSNumberFormatter on iOS.

Save the BMI to the user’s profile

To show users different flows based on their BMI, save it as a custom attribute of their profile. In the Adapty Dashboard, create a Number custom attribute with the key bmi. Then show each flow to an audience built from the attribute.

Call the updateProfile method in flowViewDidDisappear, right after the line that calculates bmi. Pass that Double, not the formatted string, so that a segment can compare the BMI with a threshold:

import com.adapty.kmp.Adapty
import com.adapty.kmp.models.AdaptyProfileParameters
import com.adapty.kmp.models.onError

val params = AdaptyProfileParameters.Builder()
    .withCustomAttribute("bmi", bmi)
    .build()

scope.launch {
    Adapty.updateProfile(params).onError { error ->
        // handle the error
    }
}