Mobile In-App Messaging

Overview

In-app messages are customizable HTML based popup modals delivered to contacts while actively using your mobile app. In-app messages display over your native app interface in form of a top or bottom banner, center-page modal, or a full screen modal. You can use custom HTML and CSS to fully control the appearance and functionality of your in-app messages, thereby extending the look and feel of your brand. Given that in-app messages display while the app is open, you can use them to send helpful onboarding tips to new app users, ask for feedback, showcase new products, and display personalized content based on contacts' in-app behavior.

In-app message characteristics:

• In-app messages sent to contacts who are not actively using your app will be displayed the next time they open the app according to message display settings.
• There is no message character limit, but the type of modal you choose will determine the available creative space.

Create a New In-App Message

In-app messages are integrated into the mobile push channel so the steps to create a new in-app message are the same as the steps to create a new push notification. First, create a batch or automated message and choose Mobile Push from the channels dropdown menu.

Edit the message content section and choose In-app message as the message type.

In-App Message Positioning

The position of your in-app message determines what section of the mobile screen it will occupy, as well as how much creative space is available for your images, text and buttons.

Depending on the position, messages will span the predetermined width and height of the mobile device screen. Consider the following general guidelines:

Edit In-App Message Content

Use the message HTML editor to add the entirety of your custom in-app message content, including HTML and CSS. By default, in-app messages are not styled, giving you complete control over the structure and appearance of your message templates.

• Image library - Insert an image stored in the Image library.
• HTML Content library - Insert reusable HTML content stored in the HTML Content library.

Since in-app messages are not saved in your app, you can specify a window of time for the Cordial mobile SDK to try and display them when contacts open the app for the first time after message send time.

Preview and Test

The presentation of in-app messages will vary depending on the screen size and operating system of the mobile device. We recommend sending test in-app messages to ensure proper rendering on various devices. The preview tool renders in-app messages in a controlled environment and is helpful for identifying general gaps in layout structure and message formatting.

Learn more about using Preview and Test tools.

Link Actions

You can use the onclick JavaScript attribute to call Cordial crdlAction events when contacts click on a designated HTML object. For example, you can create buttons that deep link to specific content within your app or send custom events such as cart, browse, discount_applied, and dismissed.

Cordial crdlAction event properties:

onclick="crdlAction('URL', 'event_name')

Example of adding a deep link and sending a custom event:

<div class='checkout-btn' onclick="crdlAction('https://www.example.com', 'in_app_message_event_name')">Deep link with custom event</div>

Example of adding a deep link only:

<div class='checkout-btn' onclick="crdlAction('https://www.example.com')">Only deep link</div>

Example of adding a custom event only (note that the URL property is set to “undefined”):

<div class='checkout-btn' onclick="crdlAction(undefined, 'in_app_message_event_name')">Only custom event</div>

Example of adding a Dismiss button (note that URL and event_name properties are set to “undefined”):

<div class='checkout-btn' onclick="crdlAction(undefined, undefined)">Dismiss</div>

Example of adding link appends using the appendQueryString Smarty modifier:

<div class='checkout-btn' onclick="crdlAction('{'https://www.example.com'|appendQueryString:$data.utm_params}', 'in_app_event')">Deep link utm_parameters appended</div>

Example of passing the deep link as a Smarty variable:

<div class='checkout-btn' onclick="crdlAction('{$deep_link}', 'in_app_event')">deep link with smarty variable and event</div>