How to design Webpush template with customisation options to add action buttons and image.
Handlebarsjs
language. You can check how the message will look in the preview section on the right side. Once designed, you can save the web 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.
Field | Description |
---|---|
Title | Small message text box. Note that this field will be displayed in single line only, and very long content can get curtailed. Use handlebarsjs to add variables. |
Large Icon | The small icon will show up to the right of the notification text. SuprSend puts your organisation logo as default in the large icon, which you can set from ‘Organisations Tab’. This will be shown by default and cannot be changed. |
Message | Large message text box. Use handlebarsjs to add variables. |
Image | Optional Recommended banner filetypes are PNG , JPG , JPEG . SuprSend will auto-scale your image so that it doesn’t get cropped. |
Action URL | Provide a URL where a user will go when he clicks on the push notification. Use handlebarsjs to add variables. |
Action Buttons | Optional Enter up to 3 Button names and URL. You can use variable names using handlebarsjs in both action name and URL. You can give your android deeplink URL as well. The action button name color is picked up from your organisation settings. You cannot change button color in a template once it is created. |
Declaring Variables in the global 'Variables' button:
Using variables in the templates:
handlebarsjs
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 handlerbarsjs 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:{{var1.var2.var3}}
. Eg. to refer to city in the example above, you need to enter{{event.location.city}}
{{var1.[index].var2}}
. Eg. to refer toproduct_name
of the first element of the arrayarray
, enter{{array.[0].product_name}}
{{event.[first name]}}
Variables
button.
handlebarsjs
guideline.