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
appboy.subscribeToInAppMessage(function(inAppMessage) {
  if (inAppMessage instanceof appboy.InAppMessage) {
    var extras = inAppMessage.extras;
    for (var key in extras) {
      if (data.hasOwnProperty(key)) {
         console.log("key: " + key + ", value: " + extras[key]);
      }
    }
  }

  appboy.display.showInAppMessage(inAppMessage);
});

In-App Message Default z-index

By default, In-App Messages are displayed using z-index: 1050. This is configurable using the inAppMessageZIndex initialization option in the scenario that your website styles elements with higher values than that.

Note: This option was introduced in Web SDK v3.3.0. Older SDKs must be upgraded in order to use this option.

1
2
3
4
5
import braze from "@braze/web-sdk";
braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT",
    inAppMessageZIndex: 9001
});

Custom Styling

Braze UI elements come with a default look and feel that create a neutral in-app message experience 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.

To set your in-app message links to open in a new tab, set the openInAppMessagesInNewTab option to true to force all links from in-app message clicks open in a new tab or window.

1
appboy.initialize('api-key', { openInAppMessagesInNewTab: true} );

In-App Message Dismissal

By default, when an in-app message is showing, pressing the escape button or a click on the greyed-out background of the page will dismiss the message. Configure the requireExplicitInAppMessageDismissal initialization option to true to prevent this behavior and require an explicit button click to dismiss messages.

1
2
3
4
5
import braze from "@braze/web-sdk";
braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT",
    requireExplicitInAppMessageDismissal: true
});
WAS THIS PAGE HELPFUL?
New Stuff!