Push Templates

Limited Access

Push templates is currently in beta and enabled only for limited customers. Please reach out to support@moengage.com to try it out. 

With Push templates, 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.

We support the following templates:

  1. Stylised basic notification
  2. Simple image carousel

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

Use Cases

  1. Going environment friendly? Send out an update with green background color in your Push notification
  2. Want to bring user 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 template based push notifications

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

 Note

Let us understand how to create a Push campaign using templates.

1. In the step 2 of Push campaign creation, under the platform tab, select the template of your choice. 

mceclip0.png

 Note

  • You can select a different template for Android & a different one for iOS.
  • You can add different template for different locales or variations. 
  • If you want to create a default or native Push notification, select Basic notification from the template dropdown.

1. Stylised Basic Notification 

Using this template, you can make your push notification more attractive by adding background color, text color and some text formatting and make your notification stand out in the notification tray.

 Step 1: Message

It contains the same options as in Basic notification along with these additional options:

  1. Background color: Select a color from the color picker or simply add a hex code.
  2. Add style to your text (bold, italic, underline or strikethrough); color or emojis.
  3. Set your notification as sticky (applicable only for Android)A sticky notification will not be dismissed either by swiping the notification or clicking on it. It can only be dismissed by clicking the X button on the top right corner. It is advisable to make notifications sticky only when absolutely required otherwise users might feel it quite overwhelming. 
  4. Notification controls (applicable only for Android): This template contains 2 notification controls - drag to expand indicator & the X button if a notification is set as sticky. Both these controls will be present in collapsed mode. You can set the color of these controls as light or dark, depending on the contrast and theme of your push notification. Make sure that the visibility is fine in both light and dark mode. 

mceclip8.png

Step 2: Rich content

This tab contains same options as are present for a basic notification with the additional option of adding a custom large icon (applicable only for Android). The large icon will only be present in the collapsed mode.

To add a large icon, switch on the toggle "Use large icon in Notification". Once you do that, use any of the 3 options as shown in the image below. If you select app icon, the large icon will be picked from your app bundle.

We suggest that you use large icon files of size 48X48 dp for best experience.

mceclip7.png

Step 3: Actions

This tab is also same as the Actions tab of Basic notification. If you plan to add Action buttons, you get the option to customise the action button names by adding a color, emoji or styles such as bold, italic, underline or strikethrough (applicable only for Android as the iOS buttons have to be added from the dropdown and are not customisable)

Here is a snapshot of how your stylised basic notification configuration looks like:

mceclip9.png

 

2. Simple Image Carousel

Using this template, you can create a carousel or slide-show consisting of 2 to 5 images. Here are some important features of image carousel:

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

To configure a simple image carousel, select simple image carousel from the template dropdown. 

Step 1: Message

This step remains same as the Stylised basic notification.

Step 2: Actions and Content

In this tab, start by adding default click action. Add a large icon if you wish to use a large icon, as explained in the Step3: Actions under Stylised basic notification.

Next, add content for Carosel:

1. Select the carousel transition - automatic or manual.

mceclip10.png

If automatic, the carousel will start moving on its own when the push notification is opened in expanded mode. In case of auto-play, the default direction of its movement will be Right to Left and transition time of 3 seconds. In case of manual:

  • Android: User will see left & right transition arrows on either side of the screen to move between the images. 
  • iOS: User can swipe left or right to move between the images. Hence, no arrows will be shown. 

2. Now its time to upload images. You will see 2 slides present by default as minimum 2 slides are required to create a carousel push. Use Add slide option to add more images. 

mceclip11.png

  • Add image to each slide. You can personalise each image based on last seen products by the user or any other personalisation criteria. For carousel, we would highly recommend to use all the images with same size/ aspect ratio for consistent user experience across slides.
  • You can add an CTA corresponding to each image as shown below. However no action buttons are provided for this template. 

mceclip12.png

  • If you have not added an image action for an image in the carousel, the default click action will kick in. This means that if user clicks on that image, the user will be redirected as per the CTA set for the default action. 
  • In case of iOS if neither default action nor image action is configured, then nothing will happen if user clicks on an image. 
  • As you add your slides, check how they look in the Preview. In case of automatic transition, use mceclip14.png button present at the bottom of the device to play/pause the carousel
  • In case of manual transition, use left/right transition buttons in the preview itself to interact with carousel for Android. For iOS, transition buttons are provided at the bottom of the device. However, on actual device, users will be able to transition between slides by swiping left/right.

captured__3_.gif 

Once you are done setting up your templates and ready to move to next step, you will see mceclip16.png instead of Next button. 

Backup configuration 

Since templates are supported from Android SDK version 10.3.00 and later and iOS version 6.2.0 and later, we need to maintain support on older SDK versions so that the users who have updated their apps still continue to receive Push notifications.

 

Once you click on Configure Backup button, you will see the backup alert stating the locales that need backup configuration. 

mceclip17.png

To make sure that the users on older SDK versions are not missed out, you will have to configure the Backup notification which is nothing but a Basic push notification without any color/styling or additional options that the template provides. Hence, the backup notification will be rendered as a native push with the support of all the text fields, rich content and actions.

Though we are auto-filling the backup data from the template data, we want you to have full control on your notifications. Hence, it is required for you to review the backup data and make any necessary changes.

Now let us understand how backup works.Once you click the Configure button, Backup configuration dialog will open. It will contain the heading as shown below, along with pending locales.

mceclip18.png

 If your campaign contains:

1. No locale & no variation:

  • You will be required to configure backup for a default locale shown with an exclamation mark like this mceclip21.png (A push campaign always contain a default locale)
  • You will see that the data for the selected platforms will be auto-filled. We will map all the common fields from the template data to backup data. You will also see an exclamation mark for each platform. mceclip22.png 
  • This means that the backup is not yet saved for these platforms. 
  • To save backup, go to Android tab and verify that all the fields are OK. Edit any fields as per your liking and once you are satisfied click the mceclip20.pngpresent at bottom of Android tab. 
  • Once you click Save, you will see the success message and a progress bar with 50% progress at the bottom of the screen.mceclip23.png
  • Also, you will see a check mark next to Android tab, meaning that the backup is saved for Android. mceclip24.png
  • Now repeat the same steps for iOS and save the backup for iOS. The progress bar will show 100% progress. mceclip25.png
  • Now, you will see a check mark next to iOS tab as well. Also, since both the platforms are saved, you will now see check mark next to the locale tab also indicating that the backup is fully configured. mceclip26.png

 

2. No locale but multiple variations:

  • You will still be required to configure backup for a default locale. In case of multiple variations, we save only 1 backup and the users who are on older SDK but belong to different variations get the same notification. There are 2 reasons for taking this appraoch:
    • One, your intention would be to perform A/B test on templates. Hence, it doesn't matter that the users on older SDK versions get same notifications across variations
    • Two, this simplifies the campaign creation process.
  • In case of multiple variations, here's how backup data is mapped:
    • If any of the variations contain Basic notification then the backup data will be mapped from this variation
    • If none of the variations contain Basic notification, then the backup data will be copied from Stylised Basic Notification
    • If none of the variations contain Stylised Basic Notification, then the backup data will be copied from Simple image carousel. In this case, we will map the 1st image of the carousel. 
  • Follow the same process as explained for No locale & no variation option above to review and save your backup data.

3. Multiple locales and multiple variations:

  • In case of multiple locales, you will need to configure backup for each locale. The locales that need backup configuration will be shown with an exclamation mark. Example: Default, shreylocale & spanish need backup configuration.
  • If you haven't added templates for some locales, those locales will be shown with neither an exclamation mark or a check mark. Example: geet_locale, ddfd and new locale don't need a backup.

mceclip27.png

  • So, in this case you will need to save backup for Default, shreylocale & spanish locales.
  • Go to each locale that has an exclamation mark by clicking the locale button and save the backup as per the instructions given in No locale & no variation option.
  • For each locale, the backup data will be mapped as per the same logic: 
    • If any of the variations in that locale contain Basic notification then the backup data will be mapped from this variation
    • If none of the variations contain Basic notification, then the backup data will be copied from Stylised Basic Notification
    • If none of the variations contain Stylised Basic Notification, then the backup data will be copied from Simple image carousel. In this case, we will map the 1st image of the carousel. 
    • For mapping the backup data for a particular locale, we will look only at the template data within that locale. 
  • You are now ready to move to the next and last step of campaign creation. 

Click Next button to configure campaign scheduling and then launch the campaign.

Image rendering for templates (Android):

For all templates (excluding Basic notification), the images will be rendered as per the following logic. Though we still suggest to use images in 2:1 aspect ratio. 

Image will be divided into 2 categories:

  • Category 1. Image height >= Image width: Scale image height to available height (image area of notification) and then scale image width as per Aspect ratio. This might lead to whitespaces on left & right side of the image

  • Category 2. Image height < Image width: Scale image width to available width and then scale image height as per Image Aspect Ratio.

    • If computed height > available height, image will be centre aligned and might get truncated from top & bottom.

    • If computed height < available height, image will be centre aligned and might lead to whitespaces on top & bottom of the image.

  • For Basic notification, image will be entirely filled width-wise and then centre-cropped (default handling mechanism of OS). 

 Important guidelines

  • Check the preview in both light and dark mode when you apply background color or text color. This will ensure that your notification looks alright in both the device modes
  • Check the preview in both collapsed and expanded mode using mceclip3.png button, present on the left side of device preview in dashboard
  • For carousel, make use of the play/pause buttons present on the bottom of the device to check the transitions.

 Please Note

  • Push templates are not supported for Import campaign
  • Push Amp+ is not supported via Templates
  • Due to templates data, if payload size exceeds 4kB, only backup payload will be sent so delivery will not be impacted
  • In iOS, the system doesn't allow to show custom formatting in collapsed view. Hence in collapsed view, the notification will look like 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 personalise your templates the same way as Basic push notifications
Was this article helpful?
0 out of 0 found this helpful