Template Options for In-App Messages

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

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

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

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.

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, or 0000FF for blue. You can also use RGB triplets such as FF0 (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.

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

# 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, where customActionName is the name of any custom action supported by your mobile app's custom action handler. If you omit customActionName (leaving only action://), 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 supports itbl:// URLs, but they're deprecated and support will eventually be removed. Migrate to action:// as it's possible to do so.

• An Iterable action - For example, iterable://actionName, where actionName is the name of a pre-defined action supported by Iterable's SDK. For example, to create a delete button/or link, use URL iterable://delete. To create a close button/link, use URL iterable://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 by feature.
• The Go To Home Screen button might be associated with URL action://home, which tells the app to invoke the custom action triggered by home.

# 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 and 10 for Left and Right.
• Specify a Solid, 1-pixel border of any desired color.

# Further reading

• In-App Messages and Mobile Inbox
• Sending In-App Messages
• Template Options for Email
• Template Options for Push Notifications
• Template Options for SMS
• Template Options for Web Push Notifications