Skip to main content

Add the Compose module

The Compose module wraps the standard in-app inline view for Jetpack Compose. You still need the core and in-app modules, plus the Compose artifact:
dependencies {
    implementation("com.zixflow.com.android:datapipelines:1.1.3")
    implementation("com.zixflow.com.android:messaging-in-app:1.1.3")
    implementation("com.zixflow.com.android:messaging-in-app-compose:1.1.3")
}

Register the in-app module

Modal in-app messages and inline placements both require ModuleMessagingInApp at initialization:
import com.zixflow.sdk.Zixflow
import com.zixflow.sdk.ZixflowConfigBuilder
import com.zixflow.messaginginapp.MessagingInAppModuleConfig
import com.zixflow.messaginginapp.ModuleMessagingInApp

Zixflow.initialize(
    ZixflowConfigBuilder(this, "YOUR_API_KEY")
        .addZixflowModule(
            ModuleMessagingInApp(
                config = MessagingInAppModuleConfig.Builder().build()
            )
        )
        .build()
)
Modal messages overlay your Compose UI automatically when campaign conditions match. No Compose-specific setup is required for modals.

Inline messages in Compose

Use InlineInAppMessage to place an inline message in your layout. The elementId must match the placement ID configured in your campaign.
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.zixflow.messaginginapp.compose.InlineInAppMessage

@Composable
fun MyApp() {
    MaterialTheme {
        Surface {
            val navController = rememberNavController()
            NavHost(navController = navController, startDestination = "home") {
                composable("home") {
                    HomeScreen()
                }
            }
        }
    }
}

@Composable
fun HomeScreen() {
    InlineInAppMessage(
        elementId = "home-banner",
        modifier = Modifier.fillMaxWidth(),
        onAction = { message, actionValue, actionName ->
            // Handle inline action
        }
    )
}
ParameterTypeDescription
elementIdStringPlacement ID from your in-app campaign
modifierModifierOptional Compose modifier
progressTintColor?Optional loading indicator color
onActioncallbackInvoked when the user taps a message action
For View-based inline messages, event listeners, dismiss, and inbox APIs, see In-App Messaging.