What is the required image size for In-App messages?

Batch adapts automatically the format of the In-App message to the screen size. It means the image will not look the same on all devices.

Follow the instructions below if you are using Batch's Mobile Engagement Platform (More on the difference between Batch's CEP and MEP).

You can choose between two display modes for the image included in your In-App message. This can be done from the dashboard settings, in "Themes":

• Cover: Batch will use the entire width of the screen to display the image. In portrait mode, depending on the screen size of the user device, the bottom and the top of the image will be cropped.

We recommend a square file, with a width of 1200px. Make sure the important part is not in a zone that may be cropped (the red zone):

• Contain: Batch will not crop the image vertically. You will now have two empty spaces on the left and the right of your image.

If you choose the Cover mode, we recommend using the same colour for the background of your In-App message and the background of your image.

Special formats

Image

Introduced in Batch 1.14.0, In-App Image messages enable you to display a full-screen image or a modal with a close button or an auto-close timer.

• If you want the In-App to appear like a modal, you need to upload a square image, with a width of 1200px.
• If you want the In-App to appear like a full screen, you need to upload an image with a 2:1 ratio (for example, 1200x600 pixels).

Since the In-App will adapt itself to the different screen sizes of the device, be sure to test the outcome on several different devices.

Webview

Introduced in Batch 1.17, In-App WebView messages enable you to display any web content in your app, while still leveraging Batch's campaign targeting, push, and In-App trigger engine.

Any HTML content can be displayed, allowing you a wide range of possibilities.

Be aware that your message might be displayed in virtually any display size and aspect ratio:

• iPhones (from an iPhone 5 to 12 Pro Max).
• Android phones.
• Landscape phones.
• Tablets, both portrait and landscape.
• Tablets in split-screen mode (1/3 of the screen) or free-floating windows.

Use responsive web design techniques (CSS Media queries, Flexboxes, Grids, etc) to handle this. Firefox, Chrome, and Safari all come with tools that allow you to test your content on various form factors.

Read this article to learn how to set up webviews.