Modal In-App Messages

Modals appear in the center of the device’s screen with a screen overlay that helps it stand out from your app in the background. These are perfect for not-so-subtly suggesting that your user take advantage of a sale or giveaway.

Modal Specs

Element Specification Details
Modal Size 450px Maximum Width
720px Maximum Height
There is a 720px maximum height, at which point the message scrolls vertically.
Image Size 29:10 Aspect Ratio
450px by 155px Image Container
Accepts high resolution, PNG, JPEG, GIF.
Copy 20px Header Text - Bolded
14px Message Text - Regular Weight
We cannot recommend character or word limits.
Primary & Secondary Action Buttons Secondary on the Left
Primary on the Right
We recommend contrasting your buttons to present the desired choice to the user with the right button, designating it as the Primary Action.
Screen Overlay Transparent This is a customizable, transparent film that lays between your app and the message.

On a tablet or desktop browser, a modal in-app message will still sit in the center of the app screen as shown below.

Modal Viewport

Image and Copy Behavior

Modal in-app messages are designed to fit the device at the best and most filling ratios possible, while staying true to the size and ratios of your chosen image or copy for your message.

  • All images must be less than 5MB.
  • We only accept PNG, JPG, and GIF file types.
  • We recommend that your images be 500KB.

You should always preview and test your messages on a variety of devices to ensure that the most important areas of your image and message appear as expected.

Font Awesome

Braze supports using Font Awesome v4.3.0 for modal in-app message icons.

New Stuff!