Push Templates

Overview

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

MoEngage offers six pre-built templates and also lets you upload custom ones; they are described below. In Step 2 of campaign creation, you can choose a template from either pre-built or custom templates

Pre-Built Templates

You can create notifications based on the following pre-built templates:

  1. Basic notification
  2. Stylized basic notification
  3. Simple image carousel
  4. Image banner with text overlay
  5. Timer
  6. Timer with Progress bar
library_add_check

Prerequisites

  1. To get started, you must first integrate with the latest SDK that supports these templates. For more information, refer to the Android and iOS integration docs.
  2. Before proceeding, make sure you familiarize yourself with basic push campaign creation.

Use cases

  1. Going environment friendly? Send an update with a 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

info

Note

  • Push templates are not supported for the Web platform.
  • Push templates are supported for all point Push campaign types - One Time, Periodic, Event Triggered, Location Triggered, Device Triggered, and Flows.
  • You can select a different template for Android and a different one for iOS.
  • You can add different templates for different locales or variations.

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

Push_Templates.png

Common Push Template Elements

The following elements are common to all the push templates.

Basic Details Buttons Advanced Template Backup Previews

The following options are available in the basic details section.

 

Field Description

Notification Channel

(Android Only)

From the drop-down, select the predefined notification channel configured during the integration. This option is available only for 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.

Note: The Message Summary text formatting applies only for Android 11 and below versions. For Android 12 and above, only plain text will be displayed.

Image

Do one of the following to an image:

  1. Click the 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 scaling behavior Description
Basic Android scaling

This applies to all basic android notifications. The image is scaled to match the width of the image container, and the height of the notification is adjusted to match the height of the image. For taller images, the image may be center cropped from top and bottom.

NativeAndroid.png

Fill image container

Applicable for all expanded images in all android push templates and the collapsed image in the Image Banner template.

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the container, such at one dimension is always cropped.

FillInsideContainer.png

Fit inside image container

Applicable for all expanded images in all android push templates and collapsed images in the Image Banner template.

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or smaller than the corresponding dimension of the image container such that there is no cropping of the image.

FitToContainer.png

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.

 

Push Template Types

arrow_drop_down Basic notification

To create a default or native Push notification, select the Basic notification template and create the notification as described in Common push template elements.

Expanded Collapsed

BasicPreview_Expanded_.png

arrow_drop_down Stylized basic

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

The stylized 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 the Background color, select the message background color.
  2. In-App name color(Android Only), select the color of the app's name.
  3. In the Notification control color(Android Only), click Light or Dark to control the notification's color.
  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 using the 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 modes to ensure that the notification looks good and is readable in both modes.

Advanced

  1. Follow the steps described in Common push template elements.
  2. Enable Auto Dismiss Notification by turning on the Auto-dismiss notification toggle. You can select the time duration after which the notification will automatically be removed from the user's notification tray after the push notification is delivered to the user. The time duration can be chosen in minutes, hours, and days. The maximum value allowed is 1 day.
Expanded Collapsed

StylizedBasic_Expanded_.png

arrow_drop_down 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 the 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. Only supported up to Android 10. For Android 11 and higher, slider transition will always be manual irrespective of the option selected

        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 Scaling Options:

        1. Select Crop image to see a center-cropped image on the device and in the preview.
        2. Select Fit to container to center the image inside the container.

        Note: Image Scaling is available only for Android 12 and above.

        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.
Expanded Collapsed

ImageCarousel_Expanded.gif

arrow_drop_down Image banner with text overlay

Create push notifications with a large banner image covering the entire notification area and overlay text on top of the image with the Image Banner with Text Overlay template. Such templates can be used for adding the brand's logo and colors to the notification being sent.

library_add_check Prerequisites Ensure that you have integrated the MoEngage Android SDK. For more information, refer to Android SDK.

To create a Text overlay on Image notification, follow these steps:

  1. In step 2 of Push campaign creation, select template type as Image banner with text overlay notification.
  2. Fill in the following fields described in the Common push template elements section:
      1. Notification Channel
      2. Message
      3. Title Message
      4. Default Click Action
  3. Turn on the Include App name and time toggle to include the app name and time in the notification.
  4. Select the color name for the App name using App name color. You can also choose the 'system default' for the App name color.
  5. Select either the 'Light' or 'Dark' mode in the Notification controls color toggle. 
  6. To add a banner image to the notification, do the following:
      1. Click on the 'Image URL' option to type or paste the URL of the image.
      2. The image URL can also be personalized by typing '@' in the field. This will invoke the personalization UI and 
      3. Click on the 'Upload Image' option to drag and drop the image or click the upload from the computer to upload a stored image. The recommended image size is around 25 KB, and the recommended aspect ratio is 2:1 (width: height).
  7. Collapsed Push Notification: Select one of the following to choose the image to be displayed when the push notification is collapsed.
      1. Keep same as template backup: In the collapsed mode, the text would remain the same as the template backup's message. Only the text would be shown here, and the image wouldn't be shown.
      2. Show collapsed image: This option allows you to add a separate image to be displayed when the notification is collapsed. When this option is chosen, you can also scale the image.
          • Image Scaling Options: Select Crop image to see a center-cropped image on the device and in the preview. Select Fit to container to center the image inside the container. Note: Image Scaling is available only for Android 12 and above.
Expanded Collapsed

ImageBanner_Expanded_.png

arrow_drop_down Timer

Create push notifications with a timer and a message. Such notifications can be used to display the countdown for flash sales or sales/offers that are time bound. Marketers employ these options for higher customer engagement.

library_add_check

Prerequisites

  1. Ensure that you have integrated the MoEngage Android SDK.
  2. Ensure that you have integrated the Push templates SDK 4.0.0 version.
  3. For more information, refer to Android SDK.

To create a Timer with message notifications, follow these steps:

    1. In step 2 of Push campaign creation, select template type as Timer.
    2. Add information to the fields present in the Basic details, buttons, and advanced as mentioned in the common push template elements section above.
    3. In the Timer section, you can configure how long the notification will be displayed on the user's device. For example, if the duration is set as 4 hours in the timer section, the notification will be displayed for four hours from when the notification gets sent successfully to the user's device. At the end of four hours, the notification will be dismissed automatically.
    4. Select the timer duration using the 'Timer ends at' field.
DurationAt a specific Time in User timezoneAt a Specific Time in Campaign timezone

Duration

Enter the time duration for which the notification will be displayed to the user.

Personalization

Select the 'Personalise value' toggle to enable personalization as shown below. The personalized value should be entered should be in minutes.

For example, to display the timer for one hour, enter 60. The maximum duration is 12 hours and the minimum is 15 minutes.

You can also choose any User Attribute, Content Block or Product Set, or Content API by typing '@' and invoking the personalization UI. Click here for more information on the personalization of push notifications.

5. Select the Timer Text Color using the 'Select color' option, as shown below. There is the option to choose the 'System default', too, if you do not wish to customize the color for the timers.

Timer_Text_Color.png

Expanded Collapsed

Timer_Expanded_.png

arrow_drop_down Timer with progress bar
library_add_check

Prerequisites

Ensure that you have integrated the MoEngage Android SDK.

Ensure that you have integrated the Push templates SDK 4.0.0 version.

For more information, refer to Android SDK.

The Timer with the progress bar template is similar to the timer with the message template. An additional progress bar is displayed in the case of a timer with the progress bar as shown below. Refer to the Timer section above for details about the other sections.

The same Progress bar color would be applied to all Timer with Progress Bar campaigns for an app. Different colors can be set based on light/dark mode by setting the attribute values invalues.xmlfor light mode andvalues-night.xmlfor dark mode on the rich push SDK.

The Progress bar's progress that indicates may not be in sync with the actual time. Check out our FAQs for more information.

Expanded Collapsed

TimerwihtProgressBar_Expanded_.png

Recommendations

Here are some of the important guidelines to be followed while using push templates:

  • Check the preview in both light and dark modes when you apply a background color or text color. This will ensure that your notification looks proper in both device modes.
  • Check the preview in both collapsed and expanded modes using the CollapseButton.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 at the bottom of the device to check the transitions.
  • Use the SDK method setNotificationColor() to add color to the small icon present on the 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 center aligned. This would ensure that the main content isn't truncated, even if some cropping is happening around the margins.

Things to Note

  • 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 on Android 7 or lower versions.
  • You can personalize your templates the same way as Basic push notifications.
  • The automatic carousel is not supported on Android 11 and above due to system limitations. If you configure an auto carousel, it will be rendered with the manual transition.
  • Due to battery optimization done by the Android OS and the OEM, auto-dismissed sometimes may not be triggered or be triggered with a delay.

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

Custom Templates

 

Beta

This is a Beta Feature. To enable it, reach out to your CSM or drop us an email at support@moenage.com.

Custom templates are uploaded to MoEngage using the Push Custom Template API. For more information, refer to Push Template API. This option helps you have a pre-defined set of templates that are created outside the MoEngage ecosystem. You can reuse these templates, preview them on the dashboard and use them for sending campaigns to your customers.

You can do the following in the custom templates section:

      1. Select a template - Click on a template to select it.
      2. Sort templates  - Click the SortIcon.pngicon to sort the templates in ascending or descending order of the last modified time of the template.
      3. Search templates - Type the template name in the search box to the top right corner of the custom templates section to search for a specific template.
      4. Preview a template - You can preview a template by hovering over it and clicking the PreviewIcon__1_.png icon that appears, as shown below.

        CustomTemplatePreview.gif

         

Once you select a custom template, it will be loaded in the UI with details of all the fields in the template. You will be able to view the fields but only edit them if you have the 'Edit Templates' permission.

Note:

      • Any user with the following roles will be able to edit the templates: Default Admin, Manager, and Marketer.
      • To enable edit access for other users, they need to be given the 'Edit Templates' permission.

You can see a preview of how the template will look once you send the campaign to your users. You can also test the campaign using the Test Campaign option to see a real-time preview of how it will look on a specific device.

Frequently Asked Questions

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

Verify the following:

  1. All the backups in all variants are empty.
  2. All the mandatory fields are filled.
  3. The backup is not filled
arrow_drop_down Why is Auto copy backup not working after copying content?

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

arrow_drop_down Why are errors not displayed in Carousel Slides?
  1. Errors start displaying only after you try to switch between the pages or try to do a test notification
  2. Error is also displayed in the slide when you open the slide’s tab.
arrow_drop_down Why Carousel Slides having errors are not opening?
  1. Error for the carousel slide is displayed in the toaster along with the name of the slide that has the error.

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

arrow_drop_down 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 an 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 %}
arrow_drop_down Unable to add multiple lines in the Title and Summary field in Templates

Title and Summary are single-line inputs only

arrow_drop_down

Why is there a lag in my progress bar's time?

Battery optimization could be running, and this could cause issues in updating the progress bar.

arrow_drop_down

What is the ideal aspect ratio for images?

Due to the changes in Android 12, there are varying UI specifications for different OEMs, resulting in differences in how images are displayed on Android devices. The appearance of an image may vary depending on the device-width and the device OEM. The ideal aspect ratio for push notifications is detailed below.

Ideal Aspect Ratio for Images

Type A Devices Type B Devices

Pixel, Xiaomi, and Asus phones are classified as Type A devices. The ideal aspect ratio for images is detailed in the following table for various push templates.

Template Type Screen Size Ideal Image Size/Aspect Ratio

Stylized basic, Carousel, Timer

(With button present in the Push Template)

 

 

Small width screens

2.33

Most common screen size

2.85

Large screens, Tables, Foldables

3.11

Stylized basic, Carousel, Timer

(With button present in the Push Template)

 

 

Small width screens

1.77

Most common screen size

2.17

Large screens, Tables, Foldables

2.37
Timer with progress bar

(With button present in the Push Template)

Small width screens

2.00

Most common screen size

2.45

Large screens, Tables, Foldables

2.67

Timer with progress bar

(Without button present in the Push Template)

Small width screens

1.58

Most common screen size

1.93

Large screens, Tables, Foldables

2.11

Image banner


(With button present in the Push Template)

Small width screens

1.26

Most common screen size

1.55

Large screens, Tables, Foldables

1.69

Image banner


(Without button present in the Push Template)

Small width screens

1.06

Most common screen size

1.3

Large screens, Tables, Foldables

1.42

Best Practices and Recommendations

Since creating multiple images for different devices is not possible, MoEngage recommends adopting the following image scaling approaches to ensure that your Push Notifications appear consistent across various devices.

  1. When your creatives should not be cropped

    Create your Push Notification by following the aspect ratio specified for Device Type A with the most common screen size. Use the Fit inside image container in the Image scaling section during template creation to ensure that your creative is not cropped. You may see white spaces horizontally or vertically.

    FitImageToContainer.png

  2. When your creative does not have meaningful content in the extremities (10% margin from each side)

    Use the Fill image container option in the Image scaling section during template creation and add a margin to your image. This will ensure that even in extreme cases, your meaningful content will never be cropped, even if you see some margin cropping.

    FillImageContainer.png

Was this article helpful?
4 out of 8 found this helpful

How can we improve this article?