New Beta Feature: Rich in-app messages (HTML5)

Overview

Thanks for agreeing to be a beta tester for one of our newest features. Your feedback is essential to the continued improvement of the Leanplum Platform.

Rich in-app messages are based in HTML5 and offer more customization options than our native in-app message templates.

New features

  • Hero images
  • Support for video and animations
  • Option to close automatically
  • Inline HTML support in text fields
  • Two-state buttons

How they're displayed

Rich in-app messages behave exactly like normal Leanplum in-app messages in terms of when and how they are displayed. This includes targeting, display criteria, and message prioritization. Unfortunately, the default behavior for overlapping (conflicting) messages is that only one will be displayed, and this can be random. However, we offer another beta feature (In-app Message Prioritization) that addresses this issue.

Minimum SDK versions

To create and use rich in-app messages, your app must use a recent version of our SDK:

  • iOS: 2.0.0+
  • Android: 2.2.0+

Star Rating

The Star Rating survey is a great way to gather quick feedback from your users. You can present a single question at any time.

survey.png

Like other in-app messages, you can set the Display When criteria to an Event or user behavior, and the Targets to any segmentation criteria in Leanplum.

If we want to send a post-purchase survey after a user purchases an item, we could set the message to display when: Event Purchase triggers. We can narrow down this down, and send to first-time buyers one day after their purchase with targets: First occurrence of Purchase is since 1 day ago and display when: User starts app.

Creating a Star Rating survey

Creating a Rating survey is just like creating any other in-app message.

  1. In the Message Composer, select the Star Rating template from the in-app message dropdown. 
    starRating.png
  2. Enter your message style and text options (see more details on Compose options below). Note: text fields support in-line HTML, so you can "nudge" items with in-line padding, margins, or other HTML style attributes.
  3. Set your targeting criteria (see how to build a target).
    survey2.png
  4. Set your display when criteria and limits.
    survey2.1.png
  5. Preview the Star Rating on your development device(s) before starting.
  6. Click Start to begin the Rating survey.

Compose options

The following options can be set for a Star Rating. You can segment any of these to create different settings for different user segments.

  • Height/Width: Both height and width can be set to an absolute pixel size, or relative screen-based percentage (e.g. 50%). Be sure to test absolute pixel size on a variety of devices since screen size does vary. Defaults are 230px and 340px respectively.
  • Show close button: Show the close x at the top-right corner of the message. Defaults to true.
  • Rounded border: Rounded corners of the message border. Defaults to true.
  • Close automatically
    • Close automatically: Whether to automatically close the message after a delay. Defaults to false.
    • Delay: Number of seconds before closing the message. Defaults to 10.
  • Number of options: Number of stars to display in the Star Rating. Defaults to 5.
  • Option active color: Color of selected stars. Defaults to rgba(239,191,16,1).
  • Hero image: Image to display at the top of the Star Rating. Defaults to none.
  • View: General style settings.
    • Background image: File to display in the entire background of the Star Rating. Defaults to none.
    • Background color: Background of message. Defaults to rgba(238,238,238,1).
    • Border color: Border color of message. Defaults to rgba(0,0,0,1).
    • Border width: Width of message border. Defaults to 0px.
  • Survey Question: Style settings for Star Rating question text.
    • Bold: Whether to display the question in bold. Defaults to false.
    • Color: Color of the question. Defaults to rgba(0,0,0,1)
    • Font size: Font size of question in px or pt. Defaults to 16px.
    • Italic: Whether to display the question in italics. Defaults to false.
    • Text value: The actual text of the Star Rating question.
  • Low Rating text: Style settings for the text below the lowest rating.
    • same as above
  • High Rating text: Style settings for the text below the highest rating.
    • same as above
  • Submit button: Style settings for the submit button.
    • Active background image: The image displayed in the button when pressed. Defaults to none.
    • Background image: The image displayed in the button at rest. Defaults to none.
    • Active background color: The button color when pressed. Defaults to rgba(229,235,237,1).
    • Background color: The button color at rest. Defaults to rgba(255,255,255,0).
    • Show button: Whether to display the button. Defaults to true.
    • Submit action: Allows you to chain other actions or messages to this Rating on submit.
      • Open URL
      • Register for Push
      • Change App Icon
      • Request App Rating
      • Chain to Another Message

Rating Analytics

Leanplum tracks each of your Rating results with a Submit event (with the following nomenclature: <Rating name> Submit), and user responses are stored in an event parameter input, which you can view in our Analytics dashboard.

To view results:

  1. Go to the Analytics dashboard.
  2. After the first response, you should see a Submit metric tile below the chart under Message metrics. Click that tile to view Submit results. If you do not see the Submit tile, you can add it manually: Click the add metric + button below the chart. Then, scroll down the left sidebar, under events, and select the Submit event. Choose total occurences.
  3. To view the results of the Rating survey, group by the input parameter: Choose Group by > Selected Event > Parameter and then select input as the parameter. Click Refresh.

survey3.png

Note: Since event parameters are not tracked with Developer devices, you won't be able to view your own test responses in Analytics. However, you can verify your parameters are being tracked correctly in the Debugger console.

Filtering / Grouping by trigger parameters

With Star Ratings, you can choose an Event as the display when trigger criteria. This allows you to segment the results of the Rating by any parameters you choose to pass with that Event. For example, you could use your Purchase event as the trigger for the Star Rating, and pass a parameter of productCategory with the event. Doing so would let you segment the Rating results by your product categories.

Important: In beta, you can only group by event parameters in the Star Rating analytics if you have not reached your 200 parameter limit.

Expanding on the example above, let's say we have a clothes shopping app with dozens of product categories. We'd like to display a post-purchase Rating to our users one week after their purchase to see if they are satisfied. Since we want to segment the results by product category, we need to simply pass our product information from our app to the Leanplum.track method.

iOS

// pass product category as Purchase Event param
[Leanplum track:@"Purchase" withParameters:@{@"productCategory": @(product.category)}];

Android

// pass product category as Purchase Event param
Map<String, Object> params = new HashMap<String, Object>();
params.put("productCategory", product.getCategory());
Leanplum.track("Purchase", params);

Once this code is in place and our users begin taking the Rating survey, we can view our segmented results in Analytics:

  1. Add the Submit event for the Star Rating to the Analytics chart as a new metric. This should show us the results across all users.
  2. Add the product category as Group by criteria: Group by > Selected Event > Parameter.
  3. Choose productCategory as the parameter name in the Group by criteria.
  4. You can repeat steps 2-3 to add other group by criteria, or add a filter to narrow the results. Since we want to see results for all users, segmented by product category, we're ready to move on and refresh the chart.
  5. Click the refresh icon.

Note: It's important, when reviewing the results of a Star Rating, to remember the original targeting criteria for the Rating. You, or someone on your team, may have targeted a narrow subset of your users. Our example was targeted to all of our users, but this is not always the case.

Banner

The Banner template is a full-width, typically thin message that can appear anywhere on the user's device. It allows user inputs to other areas of the screen (unlike the Star Rating and Rich Interstitial), and its background can even be set to transparent (for things like tooltips).

You can even add animated images as the background image for an animated banner.

banner2.gif

Creating a Banner message

Creating a banner is like creating any other in-app message.

  1. In the Message Composer, select the Banner template from the in-app message dropdown. 
    banner.png
  2. Enter your message style and text options (see more details on Compose options below). Note: text fields support in-line HTML, so you can "nudge" items with in-line padding, margins, or other HTML style attributes.
  3. Set your targeting criteria (see how to build a target).
  4. Set your display when criteria and limits.
    displaywhen.png
  5. Preview the message on your development device(s) before starting.
  6. Click Start.

Compose options

The following options can be set for a Banner. You can segment any of these to create different settings for different user segments.

  • HTML Height: Height in pixels. Defaults to 60.
  • HTML Align: Where to dispay the banner: top, or bottom. Defaults to top.
  • Show close button: Show the close x at the top-right corner of the message. Defaults to true.
  • Rounded border: Rounded corners of the message border. Defaults to true.
  • Close automatically
    • Close automatically: Whether to automatically close the message after a delay. Defaults to false.
    • Delay: Number of seconds before closing the message. Defaults to 10.
  • Hero image: Image to display on the left side of the banner. Defaults to none.
  • View: General style settings.
    • Background image: Image to display as the background of the banner. The image is not resized or stretched. Defaults to none.
    • Background color: Background of message. Defaults to rgba(238,238,238,1).
    • Border color: Border color of message. Defaults to rgba(0,0,0,1).
    • Border width: Width of message border. Defaults to 0px.
  • Title: Style settings for the Banner title.
    • Bold: Whether to display the question in bold. Defaults to false.
    • Color: Color of the question. Defaults to rgba(0,0,0,1)
    • Font size: Font size of question in px or pt. Defaults to 16px.
    • Italic: Whether to display the question in italics. Defaults to false.
    • Text value: The actual text of the banner title.
  • Message: Style settings for the Banner message.
    • same as above

Rich Interstitial

The Rich Interstitial is a more powerful version of our Interstitial in-app message. It can support up to two buttons (each with their own open action setting), as well as a close x button in the top corner. This allows for a common user interaction: a "decline, accept, or close" message often seen with terms and conditions.

floating.png

Creating a Rich Interstitial message

Creating a Rich Interstitial is like creating any other in-app message.

  1. In the Message Composer, select the Rich Interstitial template from the in-app message dropdown. 
    interstitial.png
  2. Enter your message style and text options (see more details on Compose options below). Note: text fields support in-line HTML, so you can "nudge" items with in-line padding, margins, or other HTML style attributes.
  3. Set your targeting criteria (see how to build a target).
  4. Set your display when criteria and limits.
    displaywhen1.png
  5. Preview the message on your development device(s) before starting.
  6. Click Start.

Compose options

The following options can be set for a Rich Interstitial. You can segment any of these to create different settings for different user segments.

  • Height/Width: Both height and width can be set to an absolute pixel size, or relative screen-based percentage (e.g. 50%). Be sure to test absolute pixel size on a variety of devices since screen size does vary. Defaults are 230px and 340px respectively.
  • Show close button: Show the close x at the top-right corner of the message. Defaults to true.
  • Rounded border: Rounded corners of the message border. Defaults to true.
  • Close automatically
    • Close automatically: Whether to automatically close the message after a delay. Defaults to false.
    • Delay: Number of seconds before closing the message. Defaults to 10.
  • Hero image: Image to display at the top of the Interstitial. Defaults to none.
  • View: General style settings.
    • Background image: Image to display as the background of the message. Defaults to none.
    • Background color: Background of message. Defaults to rgba(238,238,238,1).
    • Border color: Border color of message. Defaults to rgba(0,0,0,1).
    • Border width: Width of message border. Defaults to 0px.
  • Title: Style settings for the Interstitial title.
    • Bold: Whether to display in bold. Defaults to false.
    • Color: Color of the question. Defaults to rgba(0,0,0,1)
    • Font size: Font size in px or pt. Defaults to 16px.
    • Italic: Whether to display in italics. Defaults to false.
    • Text value: The actual text of the title.
  • Message: Style settings for the Interstitial text.
    • same as above
  • Button border color: Button border color. Defaults to rgba(216,216,216,1).
  • Button 1: Style settings for the first button.
    • Active background image: The image displayed in the button when pressed. Defaults to none.
    • Background image: The image displayed in the button at rest. Defaults to none.
    • Active background color: The button color when pressed. Defaults to rgba(229,235,237,1).
    • Background color: The button color at rest. Defaults to rgba(255,255,255,0).
    • Show button: Whether to display the button. Defaults to true.
    • Text:
      • Bold: Whether to display the question in bold. Defaults to false.
      • Color: Color of the question. Defaults to rgba(68,149,244,1)
      • Font size: Font size in px or pt. Defaults to 16px.
      • Italic: Whether to display in italics. Defaults to false.
      • Text value: The actual button text.
  • Button 2: Style settings for the second button.
    • same as Button 1, without Show button option.
  • Select Action for Button 1: The action to perform when a user selects this button. Allows you to chain other actions or messages.
    • Open URL
    • Register for Push
    • Change App Icon
    • Request App Rating
    • Chain to Another Message
  • Select Action for Button 2: Same as above.

Coming soon: Custom Templates

You will soon be able to create your own rich message templates in HTML5, upload them to our dashboard, and instantly be able to use them in your app (without a coding change). You can add your own custom fields and options (like text, images, etc.), and your admins will be able to use our Composer to change those settings when composing a message with your custom template.


Was this article helpful?
Have more questions? Submit a request