Android Push Template

This section is a step-by-step guide on how to design and publish android push notification template.

Design Template

You can design template with a simple form editor tool. You can add variables with Handlebars language. You can check how the message will look in the preview section on the right side.
Once designed, you can save the push notification template by clicking on Save Draft. When you are ready, you can Publish Draft by providing a name to the version. This will become the Live version, and will be used whenever the associated workflow is triggered.

Android Push Notification Fields Description

Android Push - Advanced Configurations (Optional)

📘

Required - Supported SDK version for app icon and sound

• App icon functionality is supported in Android native and react native version 0.1.8 and above.
• Custom Sound is supported in Android native and react native version 2.2.0 and above.

If you are using an older SDK version, please upgrade to the latest SDK version

How to change the small icon for a notification?

To show a small app icon in your notification, you'll have to add a small icon in the drawable folder of application modules. You can either use a vector drawable or a png image. We recommend naming this file as ic_suprsend_app_icon

📘

Generate icon images with alpha transparency

Note that Android only uses the alpha channel for the icon. It will display monochrome in the status bar but an accent color can be applied to the left side the notification itself.

Option A. Adding a vector drawable

You can add a vector drawable icon to the default drawable folder of your application module(androidApp/src/main/res/drawable/). Check out a sample vector drawable link.

Option B. Adding a png icon for small icon

You can add a icon in .png format. To render this png icon as a small icon in your push notification, you will have to create icons of below sizes and place them in their respective folders. Refer below table:

Follow below steps to add icons in .png format

Step 1. Generate icon

Option A. Using Android Asset Studio (Recommended)

To quickly generate small icons with the correct settings, you can use Android Asset Studio.

Option B. Manually create icons

If you prefer to create your own icons, you must make your icons for all sizes and make the small ones in white with a transparent background.

Step 2. Create project paths

Make sure the following paths exist in your App -> main folder, create any folders you are missing. Place images of each size in their respective folders.

Your project should look similar to this depending on your SDK. Sample png drawable link

🚧

Troubleshooting Icons Not Showing

• If you see the default SuprSend bell icon even after adding app icon in your template, you did not add all icon sizes. Please add all icons sizes and correct paths.
• If you see a solid square, you set the image to the correct path, but the image does not have alpha transparency. For more help, try using images from this Android Asset Studio clipart.

How to add a custom sound file in your android project?

From Android O onwards, notification sound became a property of notification channel and is only set at the time of new category creation (Notification channel is identified as notification category in SuprSend). This means that for a user when you first time send the notification in a particular category, the sound is set for that category and even if you change the sound in your template, the sound in that category will not change. The updated sound will play for the user either if you send notification in a new category or user uninstalls and reinstalls the app.

For devices on android version before O, the sound will be set at individual notification level and whenever you change the sound on a template, it will play the new sound for user. Leaving the sound field blank will play the default notification sound on the device.

To change the notification sound you will have to add the sound file to the raw folder of your android app.

projectroot/app/res/raw

📘

Recommendation

Please keep the file name in lower case and avoid using space in the file name instead you can use underscore(_) in place of space

Ex - notification.mp3, notificationMusic.mp3,notification_music.mp3

🚧

Sound is set at channel level for android version >= 8.0

From Android O onwards (~95% of the android users), notification sound became a property of notification channel and is only set at the time of new category creation. So, the new sound set at template will only change for users if

• you are sending the notification in a new notification category
• user is installing the app for the first time or getting notification in that category for the first time
• user has uninstalled and reinstalled the app

Adding Dynamic Content in Android Push

There will always be the case where you would be required to add dynamic content to a template, so as to personalise it for your users. To achieve this, you can add variables in the template, which will be replaced with the dynamic content at the time of sending push. To send actual values to replace variables at the time of communication trigger, use one of our frontend or backend SDKs.
Here is a step by step guide on how to add dynamic content in android push:

Step 1: Declaring Variables in the global 'Variables' button:

If you are at this stage, it is assumed that you have declared the variables along with sample values in the global Mock data button.
To see how to declare variables before using them in designing templates, refer to this section in the Templates documentation.

Step 2: Using variables in the templates:

Once the variables are declared, you can use them while designing the android push template. We support handlebars to add variables in the template. As a general rule, all the variables have to be entered within double curly brackets: **{{variable_name}}**

If you have declared the variables in the global 'Variables' button, then they will come as auto-suggestions when you type a curly bracket {. This will remove the chances of error like variable mismatch at the time of template rendering.

Note that you will be able to enter a variable name even when you have not declared it inside the 'Variables' button. To manually enter the variable name, follow the handlerbars guide here.

Below are some examples of how to enter variables in the template design. For illustration, we are using the same sample variable names that we declared in the 'Templates' section:

{
  "array": [
    {
      "product_name": "Aldo Sling Bag",
      "product_price": "3,950.00"
    },
    {
      "product_name": "Clarles & Keith Women Slipper, Biege, 38UK",
      "product_price": "2,549.00"
    },
    {
      "product_name": "RayBan Sunglasses",
      "product_price": "7,899.00"
    }
  ],
  "event": {
    "location": {
      "city": "Bangalore",
      "state": "KA"
    },
    "order_id": "11200123",
    "first_name": "Nikita"
  },
  "product_page": "https://www.suprsend.com"
}

1. To enter a nested variable, enter in the format {{var1.var2.var3}}. Eg. to refer to city in the example above, you need to enter {{event.location.city}}
2. To refer to an array element, enter in format {{var1.[_index_].var2}}. Eg. to refer to product_nameof the first element of the arrayarray, enter {{array.[0].product_name}}`
3. If you have any space in the variable name, enclose it in square bracket {{event.[first name]}}

You will be able to see the sample values in the Preview section, as well as in the Live version when you publish a draft.
If you cannot see your variable being rendered with the sample value, check one of the following:

1. Make sure you have entered the variable name and the sample value in the Variables button.
2. Make sure you have entered the correct variable name in the template, as per the handlebars guideline.
   
   

🚧

What happens if there is variable mismatch at the time of sending?

At the time of sending communication, if there is a variable present in the template whose value is not rendered due to mismatch or missing, SuprSend will simply discard the template and not send that particular notification to your user.

Please note that the rest of the templates will be sent. Eg. if there is an error in rendering Android Push template, but email template is successfully rendered, Android Push notification will not be triggered, but email notification will be triggered by SuprSend.

Image Optimisations

SuprSend does some image optimisations in push notifications for images that are static in nature, ie. image is uploaded in 'Banner Image' field on template, so that the push notification delivery rate increases and the time of delivery for push notification reduces. These optimisations are as below:

1. Image optimisation based on Screen Width:

If there is a very large image in the "Banner Image" field, SuprSend will reduce the image size to fit as per the mobile screen width of your user.

2. Image optimisation based on network:

Your users might be on different network, namely wifi, 4G, 3G, 2G. And therefore, depending on your user's network we optimise the image size. This improves the push notification delivery for users whose network is not very fast.