Message Type Details

Universal

This will review previous information around our in-app messages. To see the most up-to date information on our current in-app message generation, see our in-app message overview documentation.

Full-Screen

These are the most engaging, but also the most intrusive since they cover your user’s entire screen. They are great for displaying large, rich images, and can be useful in conveying very important information, such as crucial new features and expiring promotions. Since they are more disruptive of the user experience, use these sparingly for top priority content.

Full-Screen Message

Customizable Features

  • Header and body text
  • A large image
  • Up to two call to action buttons with separate on click behavior and deep links
  • Different colors for the header and body text, buttons and background
  • Key-value pairs
Modal

These messages aren’t as intrusive as full-screen messages, as they still allow users to see part of your app’s UI. Since they still contain buttons and images, modal messages may be a better option than slideups if you desire a more interactive, visual campaign. These are great for medium priority content, such as app updates and non-urgent deals and events.

Modal Message

Customizable Features

  • Header and body text
  • An image or customizable badge icon
  • Up to two call to action buttons with separate on click behavior and deep links
  • Different colors for the header and body text, buttons and background
  • Key-value pairs

Traditional Slideup

These are the least intrusive message type, though they can be more or less attention-grabbing depending on your usage of colors and badge icons. This may be the message format to use when onboarding new users and directing them towards particular in-app features, as they don’t pause the app experience and allow for continuous exploration.

Slideup Message

Customizable Features

  • Body text
  • An image or customizable badge icon
  • Different colors for slideup background, text and icon
  • Message close behavior
  • Slideup position (top or bottom of the app screen)
  • Key-value pairs


Web

This will review previous information around more customized in-app messages. To see the most up-to date information on our current in-app message generation, see our Customization documentation.

Email Capture Message

Email capture messages allow you to easily prompt users of your site to submit their email address, after which it will be available within the Braze system for use in all your messaging campaigns.

Email Capture Message

To enable Email Capture in-app messages, your SDK integration must supply the enableHtmlInAppMessages initialization option to Braze, e.g. appboy.initialize('YOUR-API_KEY', {enableHtmlInAppMessages: true}). This is for security reasons - HTML in-app messages can execute javascript so we require a site maintainer to enable them.

Customizable Features

  • Header, body, and submit button text
  • An optional image
  • An optional “Terms of Service” link
  • Different colors for the header and body text, buttons and background
  • Key-value pairs

Custom HTML Message

While Braze’s out-of-the box in-app messages can be customized in a variety of ways, you can gain even greater control over the look and feel of your campaigns using messages designed and built using HTML, CSS, and Javascript. With some simple composition, you can unlock custom functionality and branding to match any of your needs. HTML in-app messages allow for greater control over the look and feel of a message, and anything supported by HTML5 is also supported by Braze.

JavaScript Bridge (appboyBridge)

HTML in-app messages support a Javascript “bridge” interface to the Braze Web SDK, allowing you to trigger custom Braze actions when users click on elements with links or otherwise engage with your content. The following javascript methods are supported in Braze’s HTML in-app messages:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// Closes this in-app message
appboyBridge.closeMessage()

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/module-appboy.html#.logCustomEvent
appboyBridge.logCustomEvent(eventName, eventProperties)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/module-appboy.html#.logPurchase
appboyBridge.logPurchase(productId, price, currencyCode, quantity, purchaseProperties)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/module-appboy.html#.requestImmediateDataFlush
appboyBridge.requestImmediateDataFlush()

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/module-display.html#.showFeed
appboyBridge.display.showFeed()

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setFirstName
appboyBridge.getUser().setFirstName(firstName)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setLastName
appboyBridge.getUser().setLastName(lastName)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setEmail
appboyBridge.getUser().setEmail(email)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setGender
appboyBridge.getUser().setGender(gender)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setDateOfBirth
appboyBridge.getUser().setDateOfBirth(year, month, day)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setCountry
appboyBridge.getUser().setCountry(country)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setHomeCity
appboyBridge.getUser().setHomeCity(city)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setEmailNotificationSubscriptionType
appboyBridge.getUser().setEmailNotificationSubscriptionType(notificationSubscriptionType)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setPushNotificationSubscriptionType
appboyBridge.getUser().setPushNotificationSubscriptionType(notificationSubscriptionType)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setPhoneNumber
appboyBridge.getUser().setPhoneNumber(phoneNumber)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setCustomUserAttribute
appboyBridge.getUser().setCustomUserAttribute(key, value)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#addToCustomAttributeArray
appboyBridge.getUser().addToCustomAttributeArray(key, value)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#removeFromCustomAttributeArray
appboyBridge.getUser().removeFromCustomAttributeArray(key, value)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#incrementCustomUserAttribute
appboyBridge.getUser().incrementCustomUserAttribute(key, incrementValue)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/module-appboy.html#.registerAppboyPushMessages
appboyBridge.web.registerAppboyPushMessages(successCallback, deniedCallback)

Additionally, for analytics tracking, any <a> or <button> elements in your HTML will automatically log a “click” action to the campaign associated with the in-app message. To log a “button click” instead of a “body click,” either provide a query string value of abButtonId on your link’s href (e.g. <a href="http://mysite.com?abButtonId=0">click me</a>), or provide an id on the HTML element (e.g. <a id="0" href="http://mysite.com">click me</a>). Note that the only button ids currently accepted are “0” and “1.” A link with a button id of 0 will be represented as “Button 1” on the Dashboard, while a link with a button id of 1 will be represented as “Button 2.”

To enable HTML in-app messages, your SDK integration must supply the enableHtmlInAppMessages initialization option to Braze: for example appboy.initialize('YOUR-API_KEY', {enableHtmlInAppMessages: true}). This is for security reasons - HTML in-app messages can execute javascript so we require a site maintainer to enable them.

HTML In App-Message Templates

We’ve designed a set of HTML5 in-app messages templates to help you get started. Check out our Github repository which contains detailed instructions on how to use and customize these templates for your needs.

Customizable Features

  • Fonts
  • Styles
  • Images + Videos
  • On-click behaviors
  • Interactive Components


Specs

This will review previous information around our in-app message creative specifications. To see the most up-to date information on our current in-app message generation, see our Creative Specs documentation.

Character and Image Limits:

Type Aspect Ratio Recommended Image Size Max Image Size File Types Max Character Count
Portrait Full Screen (With Text) 5:4 500KB 5MB PNG, JPG, GIF 240
Portrait Full Screen (Image Only) 10:16 500KB 5MB PNG, JPG, GIF 240
Landscape Full Screen (With Text) 16:5 500KB 5MB PNG, JPG, GIF 240
Landscape Full Screen (Image Only) 16:10 500KB 5MB PNG, JPG, GIF 240
Slideup 1:1 500KB 5MB PNG, JPG, GIF 140
Modal (Image Only) 1:1 500KB 5MB PNG, JPG, GIF 140
Modal (With Text) 29:10 500KB 5MB PNG, JPG, GIF 140

Keeping In-App Message File Sizes Small

Braze recommends you keep your images, and HTML assets zips as small as possible for several reasons:

  • Smaller HTML & image message payloads will download faster, and display more quickly and reliably for your customers.
  • Smaller HTML & image message payloads will keep your customer’s data costs down as well. Braze in-app messages are downloaded in the background on session start so they can be triggered in real-time based upon whatever criteria you select. As a result, if you have 10 HTML in-app messages of 1MB each, your customers would all incur 10MB of data charges even if they never triggered all of those messages. This can add up quickly over time, even though the in-app messages are cached and not re-downloaded session to session.

The following strategies are helpful for keeping file sizes down:

  • Reference fonts embedded in your application / website to customize your HTML in-app messages rather than including the font files in your HTML asset zip folder.
  • Ensure no extraneous or duplicative CSS or JS are included in your HTML asset zips.
  • Use ImageOptim on all images to compress images to their minimum possible size with no reduction in quality.

iPhone 5 Specs:

iPhone 5 Specs

iPhone 6 Specs:

iPhone 6 Specs

WAS THIS PAGE HELPFUL?
New Stuff!