How to design Inbox template with customisation options like action buttons, tags, pinning, and expiry.
{{var}}
. We also support handlebars helpers for handling complex template use case like adding if-else condition, showing a default value when variable is absent or handling complex arrays.
To create a template, go to SuprSend dashboard -> templates tab and enable Inbox channel.
Field | Type | Description |
---|---|---|
Header | Single line text field | Heading of the message shown in bold at the top of the content. Use it to show the summary of your message like New comment received , Your story has got 30 views |
Text | Multi-line text field | Body of your message. This is where the message content will be shown. We support markdown syntax in body field to add links, blockquotes, showing some content in bold etc. All supported markdown syntax in text field are mentioned here. |
Avatar | image public URL in .jpeg , .png format | This can be used to show image of the actor as LinkedIn or some static images based on the type of message as used in HubSpot. |
Subtext | Single line text field | Subtext is like the footer of your content. It is clickable, so you can use it to show subtle information like in LinkedIn, you would see number of comments and likes in subtext or Jira uses it to show the task’s card number. |
Action URL | http / https URL | This is the URL user will be redirected on card click. You can select Open in new tab if you want the link to open in a new tab. |
Action buttons | text - URL pair | You can add up to 2 buttons in your template. Buttons can be used to redirect users to a link or perform any inline actions like opening a modal or calling an internal function like Approve button to internally approve the request. Refer Custom click handler to customize click action on a button. You can select Open in new tab if you want the button link to open in a new tab. |
unread
notifications with mentions
tag inside Mentions
tab.
Inbox with tabs - All, mentions and replies
pinned
tag on top in your notification list. Enable the switch to pin the notification. You can use this to send critical alerts where you want user to complete some critical action within your platform like finish compliance or renew plan or some limited time offer.
**d **h **m **s
or an absolute timestamp, like 2024-04-01 2:00 pm
. Absolute timestamp added in form takes the time in your local timezone.
{{expiry_time}}
.
50
, considered as duration in seconds.
**d **h **m **s
, where d = day, h = hour, m = minutes and s = seconds
Expiry timer with different expiry left
Declaring Variables in the global 'Mock data' 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 ‘Mock data’ button, then they will come as auto-suggestions when you type a curly bracket {
. This will remove the chances of errors 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 is an example 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:Enter a nested variable
{{var1.var2.var3}}
. e.g. to refer to city in the example above, you need to enter {{event.location.city}}
Refer to an array element
{{var1.[*index*].var2}}. e.g. to refer to
product_nameof the first element of the array
array, enter {{array.[0].product_name}}`
In case of a space inside your variable name:
{{event.[first name]}}
Variables
button.
handlebarsjs
guideline.
All, Product releases and Upcoming events
. Learn how to implement tabs in notification here.