Push Templates

Overview

Push templates enable you to craft beautiful notifications within minutes without any coding. Deliver an optimal push experience with rich & personalized notifications that are more expressive, exciting, and engaging, so that your notifications stand out in the overcrowded notification tray.

You can create notifications based on the following templates:

  1. Basic notification
  2. Stylized basic notification
  3. Simple image carousel
  4. Thin banner
  5. Text overlay on the image
 

Prerequisites

To get started, you will have to first integrate with the latest SDK that supports these templates. For more information, refer to the Android and iOS integration docs

 

Push templates are not supported for Web platform.

Use Cases

  1. Going environment friendly? Send out an update with green background color in your Push notification
  2. Want to bring users back to your app or website? Send out a carousel push notification with images of the product or music or media last seen by the user.

Create push template notifications

 

Prerequisites

Before we proceed, make sure you get yourself acquainted with basic push campaign creation.

 

NOTE

  • Push templates are supported for all point Push campaign types - One Time, Periodic, Event Triggered, Location Triggered, Device Triggered and Push in Flows.
  • The Stylised basicSimple image carousel templates are supported for both Android & iOS platforms and can be configured using the dashboard.
  • The Thin image banner & Text overlay template are currently not supported on UI and can be configured by adding key-value pair. Reach out to your customer support executive to understand this in detail 

To create a template-based Push campaign, in step 2 of Push campaign creation, select the template of your choice. The supported platforms for each template are shown below each template tile in the right side corner.

CreateTemplate.png

 

 

Note

  • You can select a different template for Android & a different one for iOS.
  • You can add different templates for different locales or variations. 

Common push template elements

Basic Details

Field Description
Notification Channel

From the drop-down, select the predefined notification channel configured during the integration.

 

Applicable to Android push notifications.

Message Title Type or paste the title of the message.
Message Type or paste the content of the message.
Message Summary Type or paste a brief description of the message.
Image

Do one of the following:

  1. Click Image URL and type or paste the URL of the image.
  2. Click Upload Image and drag and drop the image or click the upload from the computer the stored image.
Default click action

From the drop-down select one of the following:

Drop-down list item Description
Navigate to screen From Take user to a specific screen drop-down, select the screen to which the user needs to navigate.
Deeplinking Type or paste the URL to which the user needs to navigate to.
Rich landing Type or paste the Rich landing page to which the user needs to navigate to.

Click Buttons to add the buttons to the notification.

Buttons

Follow these steps to add buttons to the message:

  1. Click Add Button
  2.  Type the name of the button in Button Name.
  3. From the Click action drop-down, select one of the following:
    Drop-down list Action
    Navigate to screen From the Take user to a specific screen drop-down, select the screen to which the user needs to navigate.
    Deeplinking Type or paste the URL to which the user needs to navigate to.
    Rich landing Type or paste the Rich landing page to which the user needs to navigate to.
    Call Type or paste the phone number to which the user needs to call.
    Share Type or paste the text to be shared with the user.
    Copy Type or paste the text to be copied with the user.
    Set user attribute
    1. Select the user attribute from drop-down.
    2. Type or paste the value for the user attribute.
    Track event
    1. Type or paste the name of the event.
    2. Type or paste the value for the event.
    Custom action Type or paste the custom actions. 
    Snooze Type or click the up and down arrow to select the number of hours the notification is snoozed. 
    Remind later

    Remind today in

    Type or click the up and down arrow to select the number of hours in which the notification is to be displayed again today.

    Remind tomorrow in

    Type or click the up and down arrow to select the number of hours in which the notification is to be displayed again tomorrow.

    For more information, refer to Notification Actions.
  4. Click New KV Pair
  5. In Key value pairs, enter the key and value.
  6. Repeat steps 1 to 5 to add more buttons.
  7. Click Advanced and follow the steps.

Advanced

Do the following:

Field Action
Coupon code Type or paste the coupon code.
Use large icon in notification
Use App icon Click to select the app icon as the icon for the message.
Upload image

Click Upload Image and drag and drop the image or click the upload from the computer the stored image.

Enter URL Type or paste the URL of the large icon.

Click Next to move to the next step of the Push Notification campaign.

Basic Notification

Create a default or native Push notification, select Basic notification. Basic Notification is created by MoEngage.

Create the notification as described in Common push template elements.

Stylised Basic Notification

Create push notifications with background color, text color, text formatting and make your notification stand out in the notification tray.

The stylised basic notification is created using SDK custom layout. In non-whitelisted devices the notification created by stylized basic notification appears with 64dp height.

 Follow these steps:

Basic details

  1. In Background color, select the message background color.
  2. In App name color, select the color of the name of the app.
     

    Applicable to Andriod notifications.

  3. In Notification controls color, click Light or Dark to control the color of the notification.
     

    Applicable to Android notifications.

  4. Enable Toggle background change to apply the chosen background color to text editor fields -Title, Message, Summary. This should help you with visibility when you are using lighter color font.
  5. Follow the steps described in Common push template elements.
  6. Make sure to check the preview in both light and dark mode to ensure that the notification looks good and readable in both the modes

Advanced

  1. Follow the steps described in Common push template elements.
  2. Enable Make notifications sticky to ensure the notifications are not dismissed by swiping or by clicking.

Template Backup

Follow the steps described in Common push template elements to send push notifications to devices with versions lesser than Android SDK version 10.3.00 and later and iOS version 6.2.0 and later.

For backup, you can only configure the fields present in the basic section of the templates. You can copy the backup data from template section or add totally new content.

Simple Image Carousel

A carousel or slide show consisting of two to five images is created using this template. Some important features of the image carousel:

  • The image slide show can be set to auto-play or on-demand.  
  • The images can be personalized.

To create a carousel template do the following:

  1. Follow the steps described in Stylised Basic Notification.
  2. In Simple Carousel Content, do the following:
    Field Description
    Slider transition

    Click Manual to make the transition between images by clicking on the image.

    OR

    Click Automatic to make the transition between images automatically.

    Image

    Do one of the following:

    1. Click Image URL and type or paste the URL of the image.
    2. Click Upload Image and drag and drop the image or click the upload from the computer the stored image.
    Image click action

    From the drop-down select one of the following:

    Drop-down list item Description
    Navigate to screen From the Take user to a specific screen drop-down, select the screen to which the user needs to navigate.
    Deeplinking Type or paste the URL to which the user needs to navigate to.
    Rich landing Type or paste the Rich landing page to which the user needs to navigate to.
    Default click action

    From the drop-down select one of the following:

    Drop-down list item Description
    Navigate to screen From the Take user to a specific screen drop-down, select the screen to which the user needs to navigate.
    Deeplinking Type or paste the URL to which the user needs to navigate to.
    Rich landing Type or paste the Rich landing page to which the user needs to navigate to.
    KV Pair

    Follow these steps to create a Simple Image banner and Text overlay on the image push template:

    1. Click New KV Pair
    2. In Key value pairs, enter the key and value.
  3. Click Advanced and follow the described steps in Advanced.
  4. Click Template backup and follow the described steps in Template Backup.

Thin banner (Android only)

Thin banner templates are created using the MoEngage basic notification templates and the key-value (KV) pair.

 

PREREQUISITES

Ensure that you have integrated the MoEngage Android SDK.

For more information, refer to Android SDK.

To create a thin banner template, follow these steps:

  1. In step 2 of Push campaign creation, select template type as Basic notification.
  2. Fill in the field as described in Basic Notification.
  3. In Key-value pairs, click New KV Pair.
    mceclip0.png

  4. Add the key name as moefeatures 
  5. Add the template payload in JSON format in the value as described.

    Image Banner
    {
      "richPush": {
        "displayName": "",
        "collapsed": {
          "type": "imageBanner",
          "style": {
            "bgColor": ""
          },
          "cards": [
            {
              "widgets": [
                {
                  "type": "image",
                  "id": 9,
                  "content": "image-url",
                  "actions": [
                    
                  ]
                }
              ],
              "actions": [
                
              ]
            }
          ]
        },
        "expanded": {
          "type": "imageBanner",
          "style": {
            "bgColor": ""
          },
          "cards": [
            {
              "widgets": [
                {
                  "type": "image",
                  "id": 9,
                  "content": "image-url",
                  "actions": [
                  ]
                }
              ],
              "actions": [
              ]
            }
          ]
        }
      }
    }
  6. Do a test campaign to make sure that the notification is as expected

For payload-related information, reach out to your CSM or contact support@moengage.com

Example

Image Banner
{
  "richPush": {
    "displayName": "thin banner",
      "title": "Breaking News",
      "subtitle": "",
      "body": "YAAS cyclone hits India",
      "summary": "",
     "expanded": {
      "type": "imageBannerText",
      "style": {
        "bgColor": ""
      },
      "cards": [
        {
          "widgets": [
            {
              "type": "image",
              "id": 1,
              "content": "https://resize.indiatvnews.com/en/resize/newbucket/715_-/2021/05/capture-1622007070.jpg",
              "actions": [
              ]
            },
            {
              "type": "text",
              "id": 2,
              "content": "<b><font color=\"#000000\">This is the header</font></b>",
              "actions": [
              ]
            },
            {
              "type": "text",
              "id": 3,
              "content": "<b><font color=\"#000000\">This is the message</font></b>",
              "actions": [
              ]
            }
          ],
          "actions": [
          ]
        }
      ]
    }
    "displayName": "Image Banner",
    "collapsed": {
      "cards": [
        {
          "id": 1,
          "type": "imageBanner",
          "widgets": [
            {
              "id": 0,
              "type": "image",
              "content": "https://i.ibb.co/k2cGDb2/thin-banner.png"
            }
          ],
          "actions": [
            
          ]
        }
      ],
      "style": {
        "bgColor": ""
      },
      "type": "imageBanner"
    },
    "android": {
      "showLargeIcon": false,
      "indicatorColor": "lightGrey"
    },
    "defaultActions": [
      {
        "name": "navigate",
        "type": "screenName",
        "value": "com.moengage.addon.inbox.MoEInboxActivity"
      }
    ],
    "title": "",
    "body": ""
  },
  "android": {
    "isPersistent": false
  }
}
Stylized basic: Collapse mode Stylized basic: Expand mode Simple Image banner: Collapse mode Simple Image banner: Expand mode
Screenshot_2022-06-15_at_3.14.05_PM__2_.png

Text overlay on image (Android only)

Thin banner templates are created using the MoEngage basic notification templates and the key-value (KV) pair.

 

PREREQUISITES

Ensure that you have integrated the MoEngage Android SDK.

For more information, refer to Android SDK.

To create a thin banner template, follow these steps:

  1. In step 2 of Push campaign creation, select template type as Basic notification.
  2. Fill in the field as described in Basic Notification.
  3. In Key-value pairs, click New KV Pair.
    mceclip0.png

  4. Add the key name as moefeatures 
  5. Add the template payload in JSON format in the value as described.

    Image with Text Overlay
    {
      "richPush": {
        "displayName": "",
        "expanded": {
          "type": "imageBannerText",
          "style": {
            "bgColor": ""
          },
          "cards": [
            {
              "widgets": [
                {
                  "type": "image",
                  "id": 1,
                  "content": "image-url",
                  "actions": [
                  ]
                },
                {
                  "type": "text",
                  "id": 2,
                  "content": "header",
                  "actions": [
                  ]
                },
                {
                  "type": "text",
                  "id": 3,
                  "content": "message",
                  "actions": [
                  ]
                }
              ],
              "actions": [
              ]
            }
          ]
        }
      }
    }
  6. Do a test campaign to make sure that the notification is as expected

For payload-related information, reach out to your CSM or contact support@moengage.com

Example

Text overlay over Image Banner
{
  "richPush": {
    "displayName": "Image Banner",
    "collapsed": {
      "type": "imageBanner",
      "style": {
        "bgColor": ""
      },
      "cards": [
        {
          "id": 1,
          "type":"imageBanner",
          "widgets": [
            {
              "id": 0,
              "type": "image",
              "content": "https://cfimage.moengage.com/zcmoengage/20200206074215353691L2TFCTOffersgenericjpgcompZC.jpg"
            }
          ],
          "actions": [
            
          ]
        }
      ]
    },
    "expanded":{
      "type": "imageBannerText",
      "style": {
        "bgColor": ""
      },
      "cards": [
        {
          "id": 1,
          "type":"imageBanner",
          "widgets": [
            {
              "id": 0,
              "type": "image",
              "content": "https://resize.indiatvnews.com/en/resize/newbucket/715_-/2021/05/capture-1622007070.jpg",
              "actions":[
                {
                  "name": "navigate",
                  "type": "deepLink",
                  "value": "https://www.moengage.com"
                }
              ]
            },
            {
              "id": 1,
              "type": "text",
              "content": [
                {
                "html":"<p style=\"color:#FFFFFF\">\"Four people killed\"<\/p>"
                }
                ]
            },
            {
              "id": 2,
              "type": "text",
              "content": [
                {
                "html":"<p style=\"color:#FFFFFF\">\"Odisha and West Bengal worst affected\"<\/p>"
                }
                ]
            }
          ],
          "actions": [
            
          ]
        }
      ]
    },
    "defaultActions": [
      {
        "name": "navigate",
        "type": "screenName",
        "value": "com.moengage.addon.inbox.MoEInboxActivity"
      }
    ],
    "android": {
      "showLargeIcon": false,
      "indicatorColor": "lightGrey"
    }
  },
  "android": {
    "isPersistent": true
  },
"Android":{
"hasHtmlText":true
}
}
Text overlay on Image: Collapsed mode Text overlay on Image: Expand mode
Screenshot_2022-06-15_at_3.14.32_PM__2_.png

Recommendations

 

Important guidelines

  • Check the preview in both light and dark mode when you apply a background color or text color. This will ensure that your notification looks proper in both the device modes
  • Check the preview in both collapsed and expanded mode using the mceclip3.png button, present on the left side of the device preview in the dashboard.
  • For the carousel, make use of the play/pause buttons present on the bottom of the device to check the transitions.
  • Use the SDK method setNotificationColor() to add color to the small icon present on top left of the Push notification. However, the same color will be applied to the icon in basic Push notifications as well
  • Create images such that the content is centre aligned. This would ensure that the main content doesn't get truncated even if some cropping is happening around the margins.
 

Note

  • Push templates are not supported for Import campaign flow
  • Push Amp+ is not supported via Templates. This means that the devices targeted via Push Amp+ will receive a notification, however, these notifications will be simple Push containing backup data & not the template data.
  • Due to templates data, if payload size exceeds 4kB, the only backup payload will be sent so delivery will not be impacted
  • In iOS, the system doesn't allow showing custom formatting in collapsed view. Hence in a collapsed view, the notification will look like a basic notification with simple text and image. However, when opened in expanded mode, the custom view of the templates will be shown with the text/color formatting applied
  • Strikethrough is not supported below Android N
  • You can personalize your templates the same way as Basic push notifications
  • The automatic carousel is not supported on Android 11 due to system limitations. If you configure an auto carousel, it will be rendered with the manual transition.

For more information about rendering issues associated with Push templates, refer to Rendering issues associated with Push templates in Android.

Frequently Asked Questions

Why is automatic copy backup is not working on clicking the next button?

Verify the following:

  • All the backups in all variants are empty.
  • All the mandatory fields are filled.
  • The backup is not filled
Auto copy backup is not working after copying content.

Copy Content copies Default Click Action Type (dropdown) in iOS. Because of this Backup is not empty anymore which prevents Auto Copy Backup. Remove Default CTA type in iOS backups to enable auto-copy backup.

Errors are not displayed in Carousel Slides.
  • i. Errors start displaying only after you try to switch between the pages or try to do a test notification
    ii. Error is also displayed in the slide when you open the slide’s tab.

Carousel slides having errors are not opening.
  • Error for carousel slide is displayed in the toaster along with the name of the slide that has the error.

  • The sliding tab which has an error will not be automatically opened at the moment. (Some tech challenges in that implementation).

How to add Fallback for Personalization?
  • Both Template and Backup have an inline fallback for Personalization

  • While adding the personalization attribute, you can select the ‘replace text’ option to add inline Fallback

  • To add the fallback, use the following Jinja template:

Sample personalization with Fallback:

  • Example: first name user attribute
  • Template message: 'Hi John, Welcome to MoEngage. To proceed further, click here'
  • Fallback message: 'Good Morning. To proceed further, click here'
Sample
{% set firstName = {{UserAttribute['First Name']}} %} 
{% if firstName %}Hi {{ firstName }}, Welcome to MoEngage
{% else %}Good Morning
To proceed further, click here
{% endif %}
Not able to add multiple lines in Title and Summary field in Templates

Title and Summary are single-line inputs only

Was this article helpful?
0 out of 0 found this helpful