📘
This article will show you why In-App Messages are useful and guide you through their usage from initial creation to evaluation.

If you have a mobile application for your users, In-app Messages are a way of displaying banners to them within the app. The feature uses the same principle as pop-up weblayers displayed to your website visitors.

Watch a short introductory video about this feature:

📘
In order for In-App Messages to work, Mobile SDKs must be implemented.
Visual builder only:

Android v2.7.0

iOS v2.6.0

HTML builder included (advanced In-App Messages):

Android v3.1.0

iOS v2.12.0

Additionally, this feature needs to be enabled in the project by the CSM.

👍
iOS SDK integration guide
If you want to learn more about integrating iOS SDK, check our short video guide!

Why use In-App Messages

In-app messages are important because they allow you to communicate directly with your customers while they are using the app. This can effectively provide personalized and timely information to customers, such as order updates, promotional offers, and customer service assistance, thus improving overall customer experience

Some specific benefits of in-app messaging for e-commerce include:

Targeted communication: In-app messages can be customized and targeted to specific groups of customers, allowing you to send personalized and relevant messages.
Improved conversion rates: By providing customers with timely and relevant information, in-app messages can help to increase the likelihood that they will complete a purchase or take the desired action.
Enhanced customer engagement: In-app messages provide a direct and convenient way for customers to interact with your company, which can help to increase customer engagement and build loyalty.
Increased customer satisfaction: By providing helpful and timely information, in-app messages can help to improve the overall customer experience and increase satisfaction.

Using In-App Messages

To create an in-app message go to Campaigns > In-app messages > + New in-app message

You can use the predefined templates in the Visual builder or create your own in the HTML builder.

Visual builder

You can edit the design of the In-App message in the right column. There is no limit on the number of characters or words you can use in an In-App message.

The Visual Builder enables you to choose from four native templates. Each template includes a unique set of elements you can combine to achieve your desired result. They 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 will be cropped and/or stretched based on the chosen template.
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.

Template Details:

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.

📘
If you want to delete any component, for example, a button or a header, you only need to delete its text, and the whole component will be deleted along with it.

To see how the message looks for a specific customer/segment of customers or for Android or iOS devices click on Preview and select the specific segment of customers or the kind of the desired kind of device. (Note: Image URL links cannot be longer than 190 characters)

When setting up how the In-App Messages interact with your customers, you will be faced with implementing Buttons into them. These offer you two choices:

Deep link - navigates your customer from the In-App Message onto a specified link
Cancel - navigates your customer away from the In-App Message, thus quitting it

Limitations of the Visual Builder

Custom fonts are not supported.
Using images with a resolution higher than full HD (1920x1080 pixels) is not 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 will need to overwrite the default SDK implementation of InAppMessageAlertView.swift.

HTML Builder

You can build an in-app message from scratch or use a prebuilt HTML template in Bloomreach Engagement.

📘
Test your HTML code on a real device to ensure it will work across devices before starting your campaign.
Always use standard HTML and CSS and avoid using experimental features or proprietary values.

🚧
Forbidden HTML tags and attributes:
Tags: head, script, link, iframe, meta, title, body
Attributes: onclick, href and other inline javascript attributes

A/B Testing

If you want to A/B test your in-app message, you must first enable the A/B testing in the top right corner. Afterward, you can go to the A/B TEST tab next to DESIGN and use it as explained in the A/B Testing article.

Settings

You can find the SETTINGS next to the A/B TEST tab.

Apart from the Show on and Priority (which do not exist in weblayers), the settings in in-app messages work the same way in weblayers. Therefore, the two will be explained here and the rest in the Weblayers article.

Setting	Description
Show on	Choose on what particular event the message should be shown. For example, if you choose the event' App load', the message can pop up immediately when the app loads. If you want the message to be shown another time, you can specify any other `Custom event`. Note that the event needs to be tracked directly from the mobile SDK.
Priority	If multiple messages are supposed to be shown to a particular customer for the same event, they will only see the message with the highest priority (highest number) as only one in-app message is being shown at a time. The message with lower priority would remain in the backlog and if it eventually becomes the message with the highest priority relative to remaining messages then it would be shown to the customer on a particular event.
Display delay	Specifies the time delay (in milliseconds) between the moments when the message is triggered and when it is actually displayed to the customer.
Closing timeout	Specifies the time (in milliseconds) after which an in-app message is automatically hidden in case the customer does not interact with it.

Evaluate

You can compare the conversion and click rates by going into the Evaluate tab where you can see a dashboard with measurements of the effectiveness of the sent in-app messages.

Tracking

Each in-app message shown to a customer is tracked as a banner event with the same attributes as in any weblayer. However, with in-app messages, an additional type attribute is tracked:

Attribute	Description	Example
type	The type of the banner shown.	in-app message

Use cases

Predictive in-app messaging

You can decide to only target the customers with the highest likelihood of conversion. By using Predictions you create a customer segment with the highest probability of completing a certain action like purchase or interaction. These segments can thereafter be used in in-app messages.

Connecting the desktop experience with your mobile app.

You can personalize the content of your in-app messages for every individual customer. This is possible thanks to the unified single customer view where you can use all the customer data collected through multiple different channels. You could, for example, check which customers have not opened your newsletter with personalized products, and display to them that same selection of products in the app instead.

📘
Due to personalization being enabled, you can also use product recommendation models within in-app messages to show recommended products.

Clone to another project

This feature allows you to clone In-App messages to other projects you have access to. Read more about Cloneable Data Mapping in our Data Manager article.