Overview

The Braze Plugin enables the integration of mobile push notifications and in-app event tracking, enhancing user engagement and data analytics. It supports audience segmentation and targeted messaging, leveraging the capabilities of the Braze iOS SDK and Braze Android SDK to.

This guide provides an overview of the plugin configuration and functions available through the Median JavaScript Bridge.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/braze/

Implementation Guide

Plugin Configuration

Configure the plugin by updating the following parameters under the Push Notifications tab in Braze:

{
  "active": true | false,
  "autoRegister": true | false, // if true push permission will be requested automatically
  "iosApiKey": STRING,
  "iosEndpointKey": STRING, // Example: "sdk.xyz-##.braze.com"
  "androidApiKey": STRING,
  "androidEndpointKey": STRING, // Example: "sdk.xyz-##.braze.com"
  "firebaseSenderId": STRING
}

Enabling Push Notifications

Enable push notifications through Braze In-App Messaging as documented in https://www.braze.com/docs/user_guide/message_building_by_channel/push/push_primer_messages/.

To request the push notification permission from your users you can use the Median JavaScript Bridge function median.braze.promptNotification() as documented below. Alternatively, you can also set autoRegister to true in the configuration JSON for automatic permission requests.

Deep Linking

Set up Deep Linking within your app and notification links will automatically open directly into your app.

JavaScript Bridge Functions

Change User

The changeUser function allows you to logs in an existing user or register a new user:

↔️Median JavaScript Bridge

Javascript

median.braze.changeUser({'userId': STRING})

Prompt for Push Notification Permission

Displays a dialog prompting users to enable push notifications. On Android 13 and above, explicit permission is required; for Android 12 and below, permissions are granted automatically.

↔️Median JavaScript Bridge

Javascript

median.braze.promptNotification({'callback': function})
// Return value:
{
  "granted": true | false
}

Check Push Notification Permission

This checks if the user has granted Push Notification permission. For Android, the permission must be checked first to ensure that Push Notification will show on Android 13 and above. For Android 12 and below, permission will always be granted.

For this command, provide a callback function or otherwise it returns a promise.

↔️Median JavaScript Bridge

Javascript

median.braze.notificationEnabled({'callback': function})
// Return value:
{
  "granted": true | false
}

Track Custom Events

Send a Custom Event to Braze. Custom Events must be added in the Braze Dashboard.

↔️Median JavaScript Bridge

Javascript

median.braze.logCustomEvent("YOUR-EVENT-NAME", {
  "key1": value1,
  "key2": value2,
  ...
});

Testing Notifications and Deep Linking

Follow these steps to test push notifications and deep linking:

1. On the Braze Dashboard, navigate to the Campaigns tab under Engagement, then click Create Campaign and select Push Notification

2. Scroll down and click Android Push or iOS Push accordingly.

3. Input a Title and Message then scroll down and select the type of notification Push Notification Body.
   Open App - This opens your app when notification is clicked, or does nothing if the App is already opened.
   Deep Link Into Application - Input a URL which your app will load when the notification is clicked by the user. Ensure that Deep Linking is correctly configured for your app.

4. Send the notification to a test user by navigating to the Test tab and adding the test users. Then, click Send Test.
   Note: So that users are listed, ensure you call median.braze.changeUser({userId:String}).