In-app messages

Use in-app messages to display banners to users inside your mobile app. They work like pop-up weblayers on websites. This page covers how to choose an editor, create and configure messages, and measure results.

Prerequisites

• Your app must implement the appropriate Mobile SDK.
• A Customer Success Manager (CSM) must enable this feature for your project.
• The maximum in-app message size is 16MB.

Benefits of in-app messages

In-app messages help you reach users while they're in your app with timely, personalized information. Benefits include:

• Targeted communication: Send personalized messages to specific customer groups.
• Improved conversion rates: Provide timely information encouraging users to complete purchases or act.
• Enhanced customer engagement: Offer a direct and convenient way for users to interact with your company.
• Increased customer satisfaction: Deliver useful information that enhances the user experience.

Choose an editor

In-app messages can be one of the following types:

Create an in-app message

1. Go to Campaigns > In-app personalization > + New in-app personalization.

2. Create a new in-app personalization or select a template from your project templates or the predefined templates:

   1. Recommended: Create a message in the Native rich editor. Select a template labeled both Native and Rich editor.

   2. Create a message from scratch in the Visual builder or the HTML builder. Click Create new in-app personalization.

      

   3. Choose a template without any labels to create a message from the template in the Visual builder.

   4. Not recommended: Select a template labeled only Native to create a message from the template in the Native legacy editor.

      

You can create and edit templates in the Asset manager.

Design your message

Native rich editor

If you select a template labeled both Native and Rich editor, the editor has options corresponding to the native functionality of Android and iOS for displaying pop-ups. You can still customize its style attributes to match your branding and app design.

Edit the design of the in-app message in the right column. There's no limit on the number of characters or words you can use.

Choose from 3 native templates that vary in size and screen space: slide-in, modal, full screen.

Customize appearance

Under Appearance, customize the in-app message as a whole, such as: text position (top, bottom), buttons alignment (left, centered, right), margin, padding, background color, and corner radius.

Configure template elements

Each template includes the following elements, which you can enable, disable, and configure individually.

Preview the message

To preview the message for a specific customer or segment, click Preview and use the filter.

Visual builder

Build HTML-based in-app messages with drag and drop, with no advanced coding know-how. The builder has two main parts:

• An editing region.
• A tabbed pane with elements you can drag onto the editing region and settings you can change.

The tabbed pane has 3 main tabs: content, rows, and settings.

Make sure the Type dropdown is set to In-app message (the other option is In-app content block).

Settings tab

Use the Settings tab to configure global parameters for your in-app message template, such as: content area alignment, background color, content area background color, default font, link color, and language attribute.

Change them with the sliders or input fields.

Rows tab

Use the Rows tab to design the structure of your in-app message template. Rows frame the content you add later.

To configure a row's appearance, such as background color or padding, click a row in the editing region to open the Row properties pane.

For more information about configuring rows, see the Rows tab section in the Email editors - Visual builder documentation.

Content tab

After adding rows, fill them with the content elements under the Content tab.

The following content elements are available.

To use Jinja personalization in your templates, click the button at the bottom right of the editing region to open the Jinja editor.

Button behavior

Specify a URL in the Button properties pane, in the Action section. When the user clicks the button, the default behavior is:

• If the URL starts with http or https, open the link in the web browser.
• In all other cases, let the app process the link (custom scheme or Universal Link).

Override this default behavior using the data-link and data-actiontype attributes.

The data-link attribute accepts a URL and overrides the URL in the Action section.

The data-actiontype attribute accepts one of these three values:

Custom close buttons need a URL. In the Visual builder, enter a URL in the Action section even if the button should only close the in-app message. If you leave the URL empty, the button becomes inactive and the app shows a default close (x) button instead. You can use any placeholder URL, because the link isn't opened when the close action is selected.

HTML builder

Create an in-app personalization by writing HTML and CSS code.

Make sure the Type dropdown is set to In-app message (the other option is In-app content block).

Enter HTML and CSS code in the editor on the right. The preview on the left updates in real time.

Test your HTML code on a real device before starting your campaign to make sure it works across devices.

Button behavior in HTML builder

Use the data-link attribute to specify button links. Use the data-actiontype attribute to override the default button behavior.

Refer to Visual builder - Button behavior for details.

Native legacy editor

The native legacy editor will be deprecated and phased out. For new messages, use the Native rich editor, and convert your existing legacy native messages.

If you selected a template labeled Native but not Rich editor, the editor has limited options corresponding to the native functionality and default system styling of Android and iOS for displaying popups.

Edit the design of the in-app message in the right column. There's no limit on the number of characters or words you can use.

You can choose from 4 native templates:

• Alert: Includes Title, Text, and Buttons.
• Slide-in: Includes Title, Text, Image (left/right), Buttons, and Style. The image is stretched top to bottom, maintaining the aspect ratio (cropped left and right, centered).
• Modal: Includes Title, Text, Image, Buttons, and Style. The image is stretched horizontally, maintaining aspect ratio, and cropped and centered vertically when the modal's total height reaches 80% of the screen height.
• Fullscreen: Includes Title, Text, Image, Buttons, and Style. The image is stretched horizontally, maintaining aspect ratio, and cropped and centered vertically.

Each template includes a unique set of elements you can combine to achieve your desired result. Templates also vary in size and screen space usage:

• Title: A single line header for your In-App Message, with customizable font size and color.
• Text: A customizable block of text that can span multiple lines, with adjustable font size and color.
• Image: You can include an image in all templates except Alert. The image is cropped and/or stretched based on the chosen template. Image URLs can't be longer than 190 characters.
• Buttons: You can include up to two CTA buttons. These buttons take the user to a web page in their browser (URL) or to a specific page in the app (deep link) when clicked. The text, text color, and button color are customizable.
• Style: You can also declare limited CSS styling for the template, including the background color and x-close color for the In-App close icon.

To preview the message for a specific customer or segment, or for Android or iOS devices, click Preview and select the segment and device type.

Add Buttons so customers can interact with the message. You have 2 choices:

1. Deep link: Navigates your customer from the in-app message onto a specified link.
2. Cancel: Navigates your customer away from the in-app message, thus quitting it.

Limitations of the native legacy editor

• Custom fonts aren't supported.
• Using images with a resolution higher than full HD (1920x1080 pixels) isn't recommended due to potential rendering timeouts and increased traffic consumption.
• PNG is the preferred image format.
• We recommend keeping the combined character count of the Title and Text under 500.
• Alert messages on iOS include a default cancellation button. To change it, you'll need to overwrite the default SDK implementation of InAppMessageAlertView.swift.

Convert to rich editor

If you previously created an in-app message in the native legacy editor, convert it to the native rich editor using the Convert to new version link:

This creates a duplicate of the in-app message that opens in the rich editor.

Configure and test

Settings

In-app messages have the same settings as weblayers plus the following additional settings:

A/B testing

1. Enable A/B Test in the top right corner.
2. Configure the test in the A/B Test tab as explained in the A/B testing documentation.

Measure results

Evaluate

Compare conversion and click rates in the Evaluate tab, which contains a dashboard measuring the effectiveness of the in-app messages you sent.

Definitions:

• Reach: the in-app message was shown to the customer
• Interaction: the customer interacted with the in-app message (excluding close actions)
• Close: the customer closed the in-app message
• Marketing: the customer had a positive engagement in the 24 hours since they first interacted with the in-app message

Tracking

Each in-app message shown to a customer is tracked as a banner event with the same attributes as in any weblayer. These attributes are unique to in-app personalizations:

Error messages

If an error occurs while delivering an in-app message to a customer's device, the banner event has an additional error attribute with an error message as its value.

You may encounter the following error messages:

Frequent errors may indicate a problem with the Mobile SDK implementation in your app.

Use cases

Predictive in-app messaging

Target only the customers most likely to convert. Use Predictions to create a customer segment with the highest probability of completing a certain action, such as a purchase or interaction. Then use that segment in in-app messages.

Connect the desktop experience with your mobile app

Personalize in-app messages for each customer using the unified single customer view, which brings together data collected through multiple channels. For example, find customers who haven't opened your newsletter with personalized products, and show that same product selection in the app instead.

Best practices

• Use an image file format supported by the target platform or platforms.
  • GIF, JPEG, PNG are natively supported by both Android and iOS.
  • WebP and HEIC are newer formats that aren't supported on some Android and iOS versions.
• Use an appropriate image size and aspect ratio.
  • Oversized images are scaled down and display normally, but they use more bandwidth and may delay delivery.
  • Images whose aspect ratio doesn't match the layout and design of the in-app message are also scaled down, with the same bandwidth and delivery costs.
  • Some common screen resolutions for reference:
    • 1284×2778 – Found on high-end iOS devices like the iPhone 14 Pro Max.
    • 1440×3200 – Found on premium Android devices like the Samsung Galaxy S series.
• The Mobile SDKs include the device and OS used in the tracked event properties. You can use this data to analyze which devices and OS versions your customers use.

Clone to another project

Clone in-app messages to other projects you have access to. For details on Cloneable Data Mapping, see the Data Manager article.

Limits

In-app messages and content blocks are subject to a yearly serving limit, based on your contracted billable profiles. It's designed to cover the vast majority of use cases.

If you use product recommendations in in-app messages, those recommendation serves also count toward your yearly recommendation limit.

Check your current usage in the usage dashboard. If you're approaching the limit, contact your Account Manager to review your options.