In-app messages integration
Native in-app messages display automatically on Android and iOS when using Flutter. This article covers different customization options for in-app messages for Flutter.
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:
1
2
3
4
5
6
// 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.
- Ensure you are using the automatic integration initializer, 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 yourbraze.xml
file.
1
<string name="com_braze_flutter_automatic_integration_iam_operation">DISCARD</string>
-
Implement the
BrazeInAppMessageUIDelegate
delegate as described in our iOS article here. -
Update your
inAppMessage(_:displayChoiceForMessage:)
delegate method to return.discard
.
Receiving in-app message data
To receive in-app message data in your Flutter app, the BrazePlugin
supports sending in-app message data using Dart Streams.
The BrazeInAppMessage
object supports a subset of fields available in the native model objects, including uri
, message
, header
, buttons
, extras
, and more.
Step 1: Listen for in-app message data in the Dart layer
To receive to the in-app message data in the Dart layer, use the code below to create a StreamSubscription
and call braze.subscribeToInAppMessages()
. Remember to cancel()
the stream subscription when it is no longer needed.
1
2
3
4
5
6
7
8
9
// Create stream subscription
StreamSubscription inAppMessageStreamSubscription;
inAppMessageStreamSubscription = braze.subscribeToInAppMessages((BrazeInAppMessage inAppMessage) {
// Handle in-app messages
}
// Cancel stream subscription
inAppMessageStreamSubscription.cancel();
For an example, see main.dart in our sample app.
Step 2: Forward in-app message data from the native layer
To receive the data in the Dart layer from step 1, add the following code to forward the in-app message data from the native layers.
The in-app message data is automatically forwarded from the Android layer.
-
Implement the
BrazeInAppMessageUIDelegate
delegate as described in our iOS article on core in-app message delegate. -
Update your
willPresent
delegate implementation to callBrazePlugin.process(inAppMessage)
.
Replaying the callback for in-app messages
To store any in-app messages triggered before the callback is available and replay them after it is set, add the following entry to the customConfigs
map when initializing the BrazePlugin
:
1
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.