Customization

All of Braze’s in-app message types are highly customizable across messages, images, Font Awesome icons, click actions, analytics, editable styling, custom display options, and custom delivery options. Multiple options can be configured on a per in-app message basis from within the dashboard. Braze additionally provides multiple levels of advanced customization to satisfy a variety of use cases and needs.

Key-Value Pair Extras

In-app message objects may carry key-value pairs as their extras property. These are specified on the dashboard under “Additional Message Settings” when creating an in-app message campaign. These can be used to send data down along with an in-app message for further handling by your site. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
appboy.subscribeToNewInAppMessages(function(inAppMessages) {
  if (inAppMessages[0] instanceof appboy.ab.InAppMessage) {
    var extras = inAppMessages[0].extras;
    for (var key in extras) {
      if (data.hasOwnProperty(key)) {
         console.log("key: " + key + ", value: " + extras[key]);
      }
    }
  }

  appboy.display.showInAppMessage(inAppMessages[0]);
  return inAppMessages.slice(1);
});

Custom Styling

Braze UI elements come with a default look and feel that create a neutral in-app message experience and and aims for consistency with other Braze mobile platforms. Braze’s default styles are defined in CSS within the Braze SDK. By overriding selected styles in your application, it is possible to customize our standard in-app message types with your own background images, font families, styles, sizes, animations, and more. For instance, the following is an example override that will cause an in-app message’s headers to appear italicized:

1
2
3
  body .ab-in-app-message .ab-message-header {
    font-style: italic;
  }

See the JSDocs for more information.

WAS THIS PAGE HELPFUL?
New Stuff!