Overview

In-app messages are customizable HTML-based popup modals delivered to contacts while they're actively using your mobile app. In-app messages display over your native app interface in the form of a top or bottom banner, center-page modal, or full-screen modal. You can use custom HTML and CSS to fully control the appearance and functionality of your in-app messages, extending the look and feel of your brand in ways that stick with people.

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.

This article describes our current in-app messaging capabilities. Due to ongoing development, future releases may change the existing functionality and introduce additional features.

Notable features

• 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.

1. Create a new batch or automated message and choose Push from the Channels dropdown menu.

2. Choose In-app message as the Message type.

Use case

You can send in-app messages and push notifications at the same time. This strategy uses push notifications to entice contacts to start an app session and then deliver relevant content through in-app messaging.

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.

Once you've created a new message, you can select from the following options after clicking Edit in the In-App Message Content pane.

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 in the In-App Message Content pane 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. 

You can store reusable in-app message templates in the HTML content library and then include them directly in the message HTML editor.

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

Preview your message

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 issues in layout structure and message formatting.

1. To preview a message, click the Preview button in the In-App Message Content pane.

2. Under the Preview as dropdown, select a Contact ID.

3. Choose Android or iOS in the Device preview dropdown.

4. Click Preview.

Set display time

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. 

To set your message display time, select Edit in the In-App Message Settings pane.

Send test

Once you have all the required content for your message, click the Send Test button on the left side of the Message Creation page.

• Learn more about using the 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.

When you add a link or event, the Cordial SDK will automatically assign the mcID of that in-app message so that orders and events are attributed to it. If a click is blank, it is treated as a dismiss and no orders or events will be attributed.

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

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

The 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>

Capture input

Cordial's in-app messaging solution allows you to capture input from users by using the standard inputelements of HTML. This can be used to enable some highly valuable use cases, such as offering users a discount for providing their email address or conducting a survey to get feedback.

At a high level, your HTML will include an HTML form action called crdlCaptureAllInputs(). When the associated submit button is clicked, all input values will be attached as properties to the event name you specified inside the crdlCaptureAllInputs(). Here is a sample HTML that demonstrates what's possible:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=0">
<style>

.text {
	font-size: 64px;
	color:#2d3436;
}
input[type=text],input[type=email], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #00cec9;
  color:#2d3436;
  border-radius: 4px;
  font-size: 56px;
  box-sizing: border-box;
}
input[type=text],input[type=email],  select:focus {
    outline: none !important;
}
input[type=email]::placeholder {
  color: #b2bec3;
  font-size: 0.8em;
}
input[type=text]::placeholder {
  color: #b2bec3;
  font-size: 0.8em;
}

input[type=submit] {
  width: 100%;
  background-color:#00cec9;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  font-size: 56px;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color:#00b894;
}

div {
  border-radius: 5px;
  padding: 20px;
}
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 50px;
  margin-bottom: 12px;
  cursor: pointer;
  color:#2d3436;
  font-size: 64px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  margin-top:20px;
  height: 35px;
  width: 35px;
  border: 1px solid #00cec9;
  border-radius: 4px;
  background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark-checkbox {
  background-color: #00cec9;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-checkbox:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark-checkbox:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark-checkbox:after {
  left: 11px;
  top: 5px;
  width: 8px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Create a custom radio button */
.checkmarkradio {
  position: absolute;
  top: 0;
  left: 0;
  margin-top:20px;
  height: 35px;
  width: 35px;
  background-color: #fff;
  border: 1px solid #00cec9;
  border-radius: 50%;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmarkradio {
  background-color: #00cec9;
}

.vertical-align {
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);

}
</style>
</head>
<body>

<div class="vertical-align">
    <form action="javascript:crdlCaptureAllInputs('register_and_subscribe')">
        <label class="text" for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">

        <label class="text" for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">

        <label class="text" for="email">Email</label>
        <input type="email" id="email" name="email" placeholder="example@ex.com"><br>

        <label class="text" for="country">Country</label>
        <select id="country" name="country">
            <option value="australia">Australia</option>
            <option value="canada">Canada</option>
            <option value="ek">UK</option>
            <option value="usa">USA</option>
        </select>
        <br><br>

        <label class="text">Select your subscription plan: </label>
        <br><br>
        <label class="container">Standard
            <input type="radio" checked="checked" name="radio" id="standard">
            <span class="checkmarkradio"></span>
        </label>
        <label class="container">Professional
            <input type="radio" name="radio" id="professional">
            <span class="checkmarkradio"></span>
        </label>
        <label class="container">Advanced
            <input type="radio" name="radio" id="advanced">
            <span class="checkmarkradio"></span>
        </label>
        <br><br>
        <label class="container"> Receive email updates
            <input type="checkbox" id="subscribe">
            <span class="checkmark-checkbox"></span>
        </label>
        <input type="submit" value="Submit">
    </form>
</div>

</body>
</html>