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 specifications

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.

While there are no limits to how many text characters you can include in an in-app message (as well as buttons, headline, main body, and others), we moderate how many text characters you use. Too much text will require users to expand and scroll the message.

All in-app messages have a recommended image size of 500 KB, maximum image size of 5 MB, and support PNG, JPG, and GIF file types.

Type Aspect ratio Image quality Notes
Portrait full screen with text 6:5 High resolution 1200 x 1000 px
Minimum resolution 600 x 500 px		 Cropping can occur on all sides, but the image will always fill the top 50% of the viewport.
Portrait full screen (image only, with or without buttons) 3:5 High resolution 1200 x 2000 px
Minimum resolution 600 x 1000 px		 Cropping can occur on the left and right edges on taller devices.
Type Aspect ratio Image quality Notes
Landscape full screen with text 10:3 High resolution 2000 x 600 px
Minimum resolution 1000 x 300 px		 Cropping can occur on all sides, but the image will always fill the top 50% of the viewport.
Landscape full screen (image only, with or without buttons) 5:3 High resolution 2000 x 600 px
Minimum resolution 1000 x 600 px		 Cropping can occur on the left and right edges on taller devices.
Type Aspect ratio Image quality Notes
Slideup 1:1 High resolution 150 x 150 px
Minimum resolution 50 x 50 px		 Images of various aspect ratios will fit into a square image container, without cropping.
Type Aspect ratio Image quality Notes
Modal (image only) 1:1 High resolution 1200 x 2000 px
Minimum resolution 600 x 600 px		 The message will resize to fit images of most aspect ratios.
Modal with text 29:10 High resolution 1450 x 500 px
Minimum resolution 600 x 205 px		 Tall images will scale down and be horizontally centered. Wide images will be clipped on the left and right edges.

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.

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