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

Capturing 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 a 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 is 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>