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:
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 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 yourbraze.xml
file.
1
<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 returnABKInAppMessageDisplayChoice.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.
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 callBrazePlugin.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
:
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.