This document describes configuration options for in-app message templates.
Table of contents
Creating and editing templates
To learn how to create, edit, clone, preview, and delete templates, read Introduction to Templates.
In-App Template tab
The In-App Template tab provides basic configuration options for email templates:
Show in Inbox
With Show in Inbox enabled, messages based on this base template will be available in your app's mobile inbox, if applicable. Additionally, this option enables various mobile inbox-related configuration options on this screen.
Template Name
Set a Template Name to provide a name for your template, which can be useful for locating it when creating new campaigns.
Message Type
Select a Message Type to categorize your message by channel and type. For more information, read Message Channels and Message Types.
Expiration Time
Set an Expiration Time to specify the last possible time that messages based on with this base template can be displayed or listed in the app's mobile inbox (if applicable). Customize this field on a per-campaign basis as necessary.
By default, in-app messages expire 90 days after Iterable sends their associated campaigns. That is, if a mobile app does not retrieve an in-app message from Iterable within 90 days of its send time, the recipient will never see it.
To specify a custom expiration tie, click the calendar icon on the Expiration Time input to bring up a calendar control. Use this control to set a specific or relative expiration time.
To set a specific expiration time, use the calendar to select a specific expiration date (in the local time zone of the web browser making the selection). Select a month and day, then select an hour, then select a minute. The expiration date for an in-app message can be up to 90 days in the future.
To set a relative expiration time, use the relative date text input on the bottom of the calendar control to choose an expiration date relative to the campaign send date. Use the following syntax:
-
y
- years -
M
- months -
w
- weeks -
h
- hours -
m
- minutes -
s
- seconds
For example:
-
[send time]+3h+14m+7d
- 3 hours, 14 minutes, 7 days after send time -
[send time]+1M+1w
- 1 month and 1 week after send time -
[send time]/d+3d
- 3 days after midnight on the day of send time
WARNING
If a specific or relative expiration date falls before a campaign's send date, recipients will never see the in-app message.
Display Type
This Display Type setting determines the position of the in-app message on the mobile device's screen:
- Top - Displays the in-app message at the top of the screen.
- Bottom - Displays the in-app message at the bottom of the screen.
- Center - Centers the in-app message on the screen.
- Full - Displays the in-app message at the top of the screen, and extends its background to all edges.
Use Preset Animations to Show and Hide the Message
To have your mobile apps use sensible, default animations to show and hide incoming in-app messages, enable Use Preset Animations to Show and Hide the Message.
NOTES
- This feature requires version 3.2.8+ of Iterable's Android SDK, version 6.2.14+ of Iterable's iOS SDK, or version 1.0.18+ of Iterable's React Native SDK.
- Don't use this option for in-app messages that include CSS animations, since doing so can lead to unpredictable results.
When an incoming in-app message has this option enabled, your apps will display and hide it using default animations based on the message's Display Type:
- Top - The in-app message will slide in and out from the top edge of the screen.
- Bottom - The in-app message will slide in and out from the bottom edge of the screen.
- Center - The in-app message will fade in and out.
- Full - The in-app message will fade in and out.
For example, here's the animation you'll see when using Top (in this example, the in-app message has a cream-colored background):
TIP
To preview the show animation, click the Play Animation button above the preview device. To preview the hide animation, click anywhere in the body of the in-app message.
On iOS, the sliding animations animate over the safe area but don't obstruct it once the animation is complete. On Android, the animation that slides in from the top moves under the status bar, and after it completes the status bar will slightly overlap the in-app message—be sure to leave a bit of extra space near the top of the message and to test as necessary.
When an incoming in-app message has this option disabled, the way your apps show and hide it depends on the versions of Iterable's mobile SDKs that they have installed:
- Older versions of the iOS SDK (6.2.13 and lower) and Android SDK (3.2.7 and lower) keep the same behavior: iOS will slide the message in from the bottom, and Android will not animate it.
- Newer versions of the iOS SDK (6.2.14 and higher) and Android SDK (3.2.8 and higher) will not animate the message's appearance or disappearance.
These animations don't impact CSS animations included in the body of an in-app message. However, it's best not to use these animations simultaneously since the results can be unpredictable.
Display Background Overlay
Enable Display Background Overlay to display a colored, semi-transparent background behind your in-app message, enable this option. The background extends to the edges of the screen, including the status bar.
NOTES
This feature requires version 3.2.8+ of Iterable's Android SDK, version 6.2.14+ of Iterable's iOS SDK, or version 1.0.18+ of Iterable's React Native SDK.
When you enable this option, you'll see these inputs:
Hex Color - The background's RGB color, specified as a hexadecimal value. For example, enter
FF0000
for red,00FF00
for green, or0000FF
forblue
. You can also use RGB triplets such asFF0
(yellow).Opacity - The opacity to use for the background. Enter a value between 0 and 100 (inclusive).
As you modify these values, the preview device updates accordingly.
NOTE
If an in-app message has a display type of Full, its background color will be obscured. However, that background can be seen briefly while the message animates.
Advanced Options tab
The Advanced Options tab provides further configuration options for in-app message templates:
Enable Template Generation Using Data Feeds
Enables customization of the template with data feeds (external web services). For more information, read Personalizing Templates with Data Feeds. Enabling this option causes various other data feed-related options to appear: as described in the following sections.
-
Cache Data Feed Response
This option causes Iterable to cache responses to the data feeds referenced by the template (to reduce load on the servers that host them). For each recipient, Iterable determines the data feed URL to query by substituting parameters from their Iterable profile into the data feed's pre-defined URL. If Iterable has a cached response for that URL from within the past hour, it will use that data. Otherwise, it will query the URL.
-
Merge the Data Feed and User Contexts
Allows the template to reference data feed data with double curly braces (
{{productName}}
) instead of double square brackets ([[productName]]
). Doubly curly braces can still be used to reference user profile data, too. If the same field exists on both the user profile and the data feed, Iterable uses the value from the user profile. With this option enabled, a merge parameter can prefer user profile data but otherwise revert to data feed data. -
Use Data Feed Alias
Allows the template's content to reference data feeds by their aliases. Using aliases can make templates easier to read and maintain, especially when they reference multiple data feeds. To learn how to define data feed aliases, read Editing a data feed's alias
. To learn how to use data feed aliases to reference data, read Using aliases to reference data feed data .
In-app message template editor
The in-app message template editor sits below the template configuration options:
The specific editor you'll see depends on which one was selected when the template was originally created. For more information, read Template Editors.
TIPS
- The device preview shown above the editor updates each time you save the in-app message while building it (it does not update as you type). Use the Preview drop-down menu to select a device on which to preview the in-app message.
- Mobile apps run on devices having various screen sizes and in different orientations. When using the WYSIWYG editor, use HTML that scales dynamically and is pinned to the edges of the screen (when it makes sense to do so).
- For information about how to add buttons to your in-app messages (for closing the message, deleting it or navigating to specific content), read Buttons and links in in-app messages.
Additional options
Below the template editor, you'll see various additional options:
- To see the template's revision history, click See Revisions.
- To clone the template to the same project, click Clone Template.
- To send a proof of the template to yourself (with your own data), as random users (to yourself, but using data from random contacts in your project), to an internal list or to someone else, click Send Proof and select an option. For more information, read Sending Proofs. In-app message and push notification proofs ignore Selective In-App or Selective Push settings (unless they're sent while creating or editing a campaign).
- To preview the template with user data, click Preview With Data.
- To save the template, click Save Template.
Buttons and links in in-app messages
In-app messages should contain links or buttons that allow users to navigate to content in the associated app or on the web, trigger custom actions in the app or simply close the message.
Every in-app message must contain at least a single link or button (with a valid URL) so that the user has a way to close it. Otherwise, Iterable's template editor will not let you save the template or message.
A valid URL can be:
A web URL - For example,
https://www.example.com/sample/content
-
A custom action - For example,
action://customActionName
, wherecustomActionName
is the name of any custom action supported by your mobile app's custom action handler. If you omitcustomActionName
(leaving onlyaction://
), tapping the button or link simply closes the in-app message.WARNING
Earlier versions of the SDK used
itbl://
URLs for custom actions. The SDK still supportsitbl://
URLs, but they're deprecated and support will eventually be removed. Migrate toaction://
as it's possible to do so. An Iterable action - For example,
iterable://actionName
, whereactionName
is the name of a pre-defined action supported by Iterable's SDK. For example, to create a delete button/or link, use URLiterable://delete
. To create a close button/link, use URLiterable://dismiss
.
Example in-app message buttons
Consider the following in-app message template, shown as it's being edited: in Iterable:
- The Close button might be associated with URL
iterable://dismiss
, which closes the message. - The View Feature button might be associated with URL
action://feature
, which tells the app to invoke the custom action triggered byfeature
. - The Go To Home Screen button might be associated with URL
action://home
, which tells the app to invoke the custom action triggered byhome
.
X-style close buttons
If you'd like to create an X-style close button, one option is to use the Bee Free editor with a configuration similar to the following:
- Add a button to the message template.
- Set the button's text to
X
. - Set the button's URL to
action://
, which closes the in-app message when tapped. - Choose a Background Color for the button.
- Choose a Text Color for the button.
- For Align, choose right.
- Specify a Border Radius of
20
. - For Content Padding, specify
0
for Top and Bottom and10
for Left and Right. - Specify a Solid, 1-pixel border of any desired color.
Comments
0 comments
Article is closed for comments.