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

Android iOS

Expanded
Collapse

Expanded
Collapse

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. Turn on the Apply background color in text editor toggle to apply the chosen background color to the text editor fields -Title, Message, and Summary. This should help you with visibility when using the lighter-colored 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. This is only applicable to Android devices.

Android iOS

Expanded
Collapsed

Expanded
Collapsed

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. 1. 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: Click Image URL and type or paste the URL of the image. Click Upload Image and drag and drop the image or click the upload from the computer the stored 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.
         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: Click New KV Pair 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.

Android iOS

Expanded
Collapsed

Expanded
Collapsed

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.

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

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.

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.

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.

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.

With Android 14, Android has introduced changes that affect Push templates:

• Timer with Progress Bar template
  The SDK uses Alarms to periodically update the progress in the progress bar. Starting Android 14, the Alarm permission is off by default. So you need to ask for explicit Alarm permission if you want to show Timer notifications apart from adding a line in your manifest file. For more information, refer to Push Templates.
  If the application does not have the permission above, the Timer with Progress Bar template will not be shown to the user; instead, a backup template will be displayed to the user which will have the Timer but not the progress bar.
• Sticky notifications
  On a device with Android 14 or higher, the user can dismiss sticky notifications by the swipe action. The notification will remain in the tray if the user performs the Clear all notification action (which helps with accidental dismissals) and the notifications are still dismissible when the phone is locked. Refer to Android 14 documentation here.

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.

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.

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.

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

• 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.'

{% set firstName = {{UserAttribute['First Name']}} %} 
{% if firstName %}Hi {{ firstName }}, Welcome to MoEngage
{% else %}Good Morning
To proceed further, click here
{% endif %}

Title and Summary are single-line inputs only.

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

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

For Android

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.

   

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.