Soft push prompt

It’s often a good idea for sites to implement a “soft” push prompt where you “prime” the user and make your case for sending them push notifications before requesting push permission. This is useful because the browser throttles how often you may prompt the user directly, and if the user denies permission, you can never ask them again.

This can be done simply through Braze’s triggered in-app messages for a seamless user experience. Instead of calling requestPushPermission() directly as described in the standard Web push integration, instead.

Step 1: Create a push primer campaign

First, you must create a “Prime for Push” in-app messaging campaign in the Braze dashboard:

1. Create a Modal in-app message and give it whatever text and styling you would like.
2. Next, set the on-click behavior to Close Message. This behavior will be customized later.
3. Add a key-value pair to the message where the key is msg-id, and the value is push-primer.
4. Assign a custom event trigger action “prime-for-push” to the message. You can create the custom event manually from the dashboard if needed.

Step 2: Remove calls

In your Braze SDK integration, find and remove any calls to automaticallyShowInAppMessages() from within your loading snippet.

Step 3: Update integration

Finally, replace the removed call with the following snippet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// Be sure to remove calls to automaticallyShowInAppMessages() 
// from your code as noted in the steps above

braze.subscribeToInAppMessage(function(inAppMessage) {
  if (inAppMessage instanceof braze.InAppMessage) {
    // checks the key-value pair for a "msg-id" key
    const keyValuePairs = inAppMessage.extras || {};

    // If this is our push primer message
    if (keyValuePairs["msg-id"] === "push-primer") {
      if (!braze.isPushSupported() || braze.isPushPermissionGranted() || braze.isPushBlocked()) {
        // do not show the message because user/browser is not eligible
        return;
      }

      // the browser is eligible to request push permission
      // register a callback when the left-button is clicked
      if (inAppMessage.buttons[0] != null) {
        // Prompt the user when the first button is clicked
        inAppMessage.buttons[0].subscribeToClickedEvent(function() {
          braze.requestPushPermission(function(){
            // success!
          }, function(){
            // user declined
          });
        });
      }

      // show the in-app message now
      braze.showInAppMessage(inAppMessage);
    }
  }
});

When you wish to display the soft push prompt to the user, call braze.logCustomEvent("prime-for-push") - for instance, to prompt the user on every page load just after the Braze session begins:

1
2
braze.openSession();
braze.logCustomEvent("prime-for-push");