In-app messages

Native in-app messages display automatically out of the box on Android and iOS when using Flutter. This article covers different customization options for in-app messages.

Analytics

To log analytics using your BrazeInAppMessage, pass the instance into the desired analytics function:

logInAppMessageClicked
logInAppMessageImpression
logInAppMessageButtonClicked (along with the button index)

For example:

// Log a click
braze.logInAppMessageClicked(inAppMessage);
// Log an impression
braze.logInAppMessageImpression(inAppMessage);
// Log button index `0` being clicked
braze.logInAppMessageButtonClicked(inAppMessage, 0);

Disabling automatic display

To disable automatic in-app message display, make these updates in the native layer.

Android
iOS

Ensure you are using the automatic integration intializer, which is enabled by default starting in version 2.2.0.
Set the in-app message operation default to DISCARD by adding the following line to your braze.xml file.

<string name="com_braze_flutter_automatic_integration_iam_operation">DISCARD</string>

Implement the ABKInAppMessageControllerDelegate delegate as described in our iOS article on core in-app message delegate.
Update your beforeInAppMessageDisplayed delegate implementation to return ABKInAppMessageDisplayChoice.discardInAppMessage.

For an example, see AppDelegate.swift in our sample app.

In-app message data callback

You can set a callback in Dart to receive Braze in-app message data in the Flutter host app.

To set the callback, call BrazePlugin.setBrazeInAppMessageCallback() from your Flutter app with a function that takes a BrazeInAppMessage instance.

The BrazeInAppMessage object supports a subset of fields available in the native model objects, including uri, message, header, buttons, extras, and more.

Android
iOS

This callback works with no additional integration required.

Implement the ABKInAppMessageControllerDelegate delegate as described in our iOS article on core in-app message delegate.
Update your beforeInAppMessageDisplayed delegate implementation to call BrazePlugin.process(inAppMessage).

For an example, see AppDelegate.swift in our sample app.

Replaying the callback for in-app messages

To store any in-app messages triggered before the callback is available and replay them once it is set, add the following entry to the customConfigs map when intializing the BrazePlugin:

BrazePlugin braze = new BrazePlugin(customConfigs: {replayCallbacksConfigKey: true});

Test displaying a sample in-app message

Follow these steps to test a sample in-app message.

Set an active user in the React application by calling braze.changeUser('your-user-id') method.
Head to the Campaigns page on your dashboard and follow this guide to create a new in-app message campaign.
Compose your test in-app messaging campaign and head over to the Test tab. Add the same user-id as the test user and click Send Test.
Tap the push notification and that should display the in-app message on your device.

A Braze in-app message campaign showing you can add your own user ID as a test recipient to test your in-app message.