How can we help?

Mobile In-App Messaging

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

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

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

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.

Tip: 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:

Position Description
 Banner (top or bottom) Mobile banner style in-app messages are ideal for short alerts such as app updates, new features, promo codes, and transactional alerts. The banner spans 90% width and 15% height of the device screen.
Modal  Medium rectangle in-app message displayed in the center of the screen. Suitable for CTAs such as feedback requests, incentivized actions using loyalty program perks, and content suggestions based on in-app behavior. The modal spans 80% width and 65% height of the device screen.
Full screen Attention-grabbing full screen overlay. Ideal for new user onboarding guides, impactful new product displays, and important brand announcements. Full screen in-app messages span 100% width and 100% height of the device screen.

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. 

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

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.

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.

To send a test message, click the Send Test button on the left of the Message Creation page.

The preview tool renders in-app messages in a controlled environment and is helpful for identifying general gaps in layout structure and message formatting.

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

Comments

0 comments

Please sign in to leave a comment.