Skill Level: Intermediate
Creating in-app messages with templates.
Customize in-app messages with in-app templates
You can implement in-app messages that are displayed in your app as a header or footer. There are four templates you can use to customize your in-app messages. Keep in mind that you only need to implement the templates that you want to support.
- MCEInAppMediaTemplate is the base class for the MCEInAppImageTemplate and MCEInAppVideoTemplate templates. If you want to use either of these templates, you must include the files from Plugins/InApp/Media Template; however, you do not have to register this template with the template registry, as it cannot be used independently.
- MCEInAppVideoTemplate shows a video full screen along with an expandable text region below overlaid on top of your app content through a vibrant effect. Clicking the video opens the supplied action, clicking the text expands or collapses it, and swiping down or pressing X button closes it. The template automatically closes if there is no user interaction after the video is complete.
- MCEInAppImageTemplate shows an image full screen along with an expandable text region below overlaid on top of your app content through a vibrant effect. Clicking the image opens the supplied action, clicking the text expands or collapses it, and swiping down or pressing X closes it. The template automatically closes if there is no user interaction within a default of 5 seconds.
- MCEInAppBannerTemplate shows a banner either on the top or bottom of the screen. It will automatically close after a default of five seconds. It includes a centered text message, an optional left icon, and an optional background image.
Â For informaton about best practices when specifying file sizes for media in in-app messages, see Best practices for images, video, and audio.
Add files to your Xcode project
Drag in all the files from the Plugins/InApp folder in the SDK package to your Xcode project.
Initialize the template class or classes
Â To initializeÂ the template class or classes in the application:didFinishLaunchingWithOptions: method of your app delegate.Â
Pull pending in-app messages
To pull pending in-app messages to the device, use the following command:
Set specified event call
When a specified event occurs, call the MCEInAppManager executeRule: method.
Optional: Send a video in your in-app message
If you want to send a video in your in-app message, you must set AllowInlineMediaPlayback to true in the platforms/ios/Sample/config.xml file.
Example payloads for in-app messages:
- in-app video template
- in-app image template
- in-app banner template
Example – targeting users with different in-app messages by usingÂ rulesÂ
By using in-app message rules, you can target users with different in-app messages based on user behavior. Rules filter in-app messages and determine the messages that are displayed to users at different times.
For example, you can create different in-app messages for special offers and billing messages and then use rules to determine when users receive the messages. In this case, some messages are sent as offers and other messages with billing information are sent after users make purchases.
Consider a pizza delivery app. The app might display one set of in-app messages to people who are thinking about buying a pizza and another set of in-app messages to users who already purchased a pizza and are checking status. You don’t want to show an offer when a user is checking status or show a status before a user orders a pizza.
You can use in-app message rules to show appropriate messages at the appropriate times. Rules are strings that your app uses to differentiate types of in-app messages.
This scenario uses three rules:
- offer – this rule displays offer messages.
- pizzaready – this rule displays status messages when pizzas are ready for delivery.
- all – this rule displays both offer and status messages.
To configure this scenario, follow these steps:
- Design your app with at least two screens. One screen is for pizza status; another screen is for new offers.
- Create an in-app message for offers and assign the corresponding rule. The following code sample shows an in-app message for offers that uses the “offer” and “all” rules. The expiration date is set to the date that the offer expires. In this case, users don’t see the offer after the expiration date.
- Create an in-app message for pizza deliveries and assign the corresponding rule. The following code sample shows an in-app message for pizza deliveries that uses the “pizzaready” and “all” rules. The “Your pizza went out for deliver” message uses a different icon and an expiration date that is much closer to today. In this case, users don’t see status messages from last week.
- In your app on the pizza status page, call code to show in-app messages that use the â€śpizzareadyâ€ť rule.
[[MCEInAppManager sharedInstance] executeRule:@[@"pizzaready"]];
- In your app on the offer page, call code to show in-app messages that use the “offer” rule.
[[MCEInAppManager sharedInstance] executeRule:@[@"offer"]];
- In your app on a page where you want to display all messages, call code to show in-app messages that use the “all” rule.
[[MCEInAppManager sharedInstance] executeRule:@[@"all"]];
Note: The â€śallâ€ť rule matches both the offers and pizza-ready notices because you add the “all” rule to both messages. In fact, all rules are just strings to match when you call the code that shows the rule â€“ they have only the meaning that your app assigns by determining when they are shown.
Offers are displayed on the offer screen, and pizza-ready messages are displayed on the status screen. It doesnâ€™t matter which message comes in first â€“ your customer sees the most appropriate message based on which part of the app they go into.
For information about other mobile app message features for iOS apps, see the Documentation.
Go Back to the Mobile App Messaging home page.