In-App Messages

Native in-app messages display automatically on iOS when using React Native.

Customizing

Accessing In-App Message Data

If you would like to access the in-app message data in the JavaScript layer, implement the ABKInAppMessageControllerDelegate delegate as described in our public documentation for iOS. In the beforeInAppMessageDisplayed: delegate method, you can access the inAppMessage data, send it to the JavaScript layer, and decide to show or not show the native message based on the return value (for more on these values, see our iOS documentation).

• OBJECTIVE-C
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// In-app messaging
- (ABKInAppMessageDisplayChoice) beforeInAppMessageDisplayed:(ABKInAppMessage *)inAppMessage {
  NSData *inAppMessageData = [inAppMessage serializeToData];
  NSString *inAppMessageString = [[NSString alloc] initWithData:inAppMessageData encoding:NSUTF8StringEncoding];
  NSDictionary *arguments = @{
    @"inAppMessage" : inAppMessageString
  };
  // Send to JavaScript
  [self.bridge.eventDispatcher
             sendDeviceEventWithName:@"inAppMessageReceived"
             body:arguments];
  // Note: return ABKDiscardInAppMessage if you would like
  // to prevent the Braze SDK from displaying the message natively.
  return ABKDisplayInAppMessageNow;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// In-app messaging
func beforeInAppMessageDisplayed(inAppMessage: ABKInAppMessage!) -> ABKInAppMessageDisplayChoice {
    let inAppMessageData = inAppMessage?.serializeToData()
    var inAppMessageString: String? = nil
    if let inAppMessageData = inAppMessageData {
        inAppMessageString = String(data: inAppMessageData, encoding: .utf8)
    }
    let arguments = [
        "inAppMessage": inAppMessageString ?? ""
    ]
    // Send to JavaScript
    bridge.eventDispatcher.sendDeviceEvent(
        withName: "inAppMessageReceived",
        body: arguments)
    // Note: return ABKDiscardInAppMessage if you would like
    // to prevent the Braze SDK from displaying the message natively.
    return ABKDisplayInAppMessageNow
}

Receiving In-App Message in JavaScript

On the JavaScript side, this data can be used to instantiate a BrazeInAppMessage:

1
2
3
this._listener = DeviceEventEmitter.addListener("inAppMessageReceived", function(event) {
    let inAppMessage = new ReactAppboy.BrazeInAppMessage(event.inAppMessage)
})

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
7
// Log a click
ReactAppboy.logInAppMessageClicked(inAppMessage);
// Log an impression
ReactAppboy.logInAppMessageImpression(inAppMessage);
// Log button index `0` being clicked
ReactAppboy.logInAppMessageButtonClicked(inAppMessage, 0);

A sample implementation of this is contained in AppboyProject, within the React SDK. Additional iOS implementation samples are contained in the iOS SDK.