Skip to content

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.

Two modal in-app messages side-by-side, detailing the image and text recommendations. See following sections for details.

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 5 MB.
  • We only accept PNG, JPEG, and GIF file types.
  • We recommend that your images be 500 KB.
Layout Asset Size Notes
Image + Text 29:10 aspect ratio
High-res 1450 x 500 px
Minimum 725 x 250 px		 Tall or narrow images will scale down and be horizontally centered. Wide images will be clipped on the left and right edges.
Image Only Nearly any aspect ratio
High-res up to 1200 x 2000 px
Minimum 600 x 600 px		 The message will resize to fit images of most aspect ratios.

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.

Larger screens

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

Modal in-app message as it would appear on a large screen. Similarly to phone screens, the message sits in the center of the screen.

  Edit this page on GitHub
HOW HELPFUL WAS THIS PAGE?
New Stuff!