close
Skip to main content
The Inbox editor lets you build notification cards that appear inside your product’s notification center. Each card supports a header, body (with Markdown), avatar, action buttons, click URL, and advanced options like pinning, expiry, and tags for tab filtering. Content is personalised with Handlebars variables ({{variable_name}}).
BERJAYA

​
Inbox fields

Header — heading shown in bold at the top of the card. Use it for the summary: New comment received, Your story has got 30 views. Text — body of the message. Supports Markdown syntax — headings, bold, italic, blockquotes, links, and code. Avatar — public image URL (.jpeg, .png). Use it to show the actor’s profile picture or a static icon based on notification type. Subtext — clickable footer line. Use for secondary info like comment count, task ID, or timestamps. Action URL — URL the user is redirected to on card click. Toggle Open in new tab if needed. Action Buttons — up to 2 buttons with text + URL. Use for CTAs like “View”, “Approve”, or inline actions. See custom click handlers for advanced button behaviour.

​
Adding dynamic content in the template

There will always be the case where you need to add dynamic content to personalise notifications for your users. You can add variables in the template, which are replaced with actual data at the time of sending. Pass these values while triggering the communication from one of the frontend or backend SDKs. We use Handlebars as the templating language. You can add variables as {{variable_name}}. We also support Handlebars helpers for complex use cases like if-else conditions, default values, and array iteration.
1

Add variables in the Variables panel

Add sample data in the Variables panel (Input Payload section) on the left side of the editor. This defines the structure of your variables, enables auto-suggestions while designing, and powers the live preview. For the full guide on setting up variables, see Adding dynamic content.
2

Use variables in the template fields

Type {{ in any text field — auto-suggestions appear based on the data in the Variables panel. You can also manually type variable names following Handlebars syntax.Examples using this sample data:
{
  "array": [
    {
      "product_name": "Aldo Sling Bag",
      "product_price": "3,950.00"
    },
    {
      "product_name": "Clarles & Keith Women Slipper",
      "product_price": "2,549.00"
    }
  ],
  "event": {
    "location": {
      "city": "Bangalore",
      "state": "KA"
    },
    "order_id": "11200123",
    "first_name": "Nikita"
  },
  "product_page": "https://www.suprsend.com"
}
  • Nested variable: {{event.location.city}} → renders as Bangalore
  • Array element: {{array.[0].product_name}} → renders as Aldo Sling Bag
  • Variable with space in name: {{event.[first name]}}
The preview section shows sample values rendered in real-time. If a variable doesn’t render, check:
  1. The variable is defined in the Variables panel.
  2. The variable name matches the Handlebars syntax exactly.
If a variable in the template cannot be rendered at send time (due to mismatch or missing data), SuprSend discards the Inbox notification for that user. Other channels in the same template group are still sent.

​
Advanced configurations

BERJAYA
Tags Tags filter and organise notifications inside multiple tabs. You can filter tabs by tag, notification category, or read status — e.g., show all unread notifications with the mentions tag in a “Mentions” tab. Use them to separate updates from mentions, product releases from events.
Tags in Inbox template vs Tags in Workflow: Template tags filter notifications in inbox tabs. Workflow tags only group workflows on the listing page and do not affect inbox filtering. To filter inbox tabs, add tags in the template and reference them in your inbox tab configuration.
BERJAYA
Pin notification Pinned notifications display with a pinned badge and stay at the top of the notification list until the user reads or archives them. Reserve for notifications requiring immediate action — compliance tasks, plan renewals, or limited-time offers. Always combine with an expiry so stale pins don’t persist indefinitely.
BERJAYA
Expiry Expiry auto-archives the notification when the period elapses. Add a 15-day (or longer) expiry to most notifications to keep inboxes clean. Use shorter durations for time-sensitive content like flash sales or event reminders. Avoid expiry on long-lived notifications users might reference later (product updates, blog posts). Relative expiry Set a duration relative to when the notification is sent — e.g., 2 days 6 hours.
BERJAYA
Absolute expiry Set a fixed date and time. The timestamp uses your local timezone.
BERJAYA
Dynamic expiry For expiry computed from your event or user data, use a Handlebars variable — e.g., {{expiry_time}}. The value can be:
  • An ISO-8601 timestamp (e.g., 2024-03-02T20:34:07Z) — must be in the future.
  • A relative duration: an integer (seconds) or an interval string like 2d 6h 30m 0s.
Show expiry timer Enable this to display a countdown timer on the notification card. The timer shows in grey when more than 1 hour remains and turns red below 1 hour to drive urgency.
BERJAYA
Extra Data A JSON field for passing custom key-value pairs alongside the notification. Use this for app-level metadata that your frontend can process — e.g., deep link parameters, feature flags, or tracking IDs.

​
Preview and test

The right panel shows a live preview of the inbox notification card, updated in real time as you edit. Variables render using data from the Variables panel — select a recipient or tenant to preview with real data. Click Test in the top-right corner to send a real notification to a real user’s inbox. This uses the live version — commit your changes before testing. See Testing a Template for the full guide.

​
Commit

Click Commit in the top bar to publish the current draft as a new live version. Add an optional description for versioning. Once committed, all notifications triggered after this point use the new content. Committing snapshots everything: field content, advanced configurations (tags, pinning, expiry), and variable references.

​
Frequently asked questions

Use Avatar for the actor’s profile photo, Header for the action summary (e.g., {{actor_name}} commented on your post), Text for the excerpt, and Subtext for relative timestamps. Tag with mentions to route into a dedicated Mentions tab.
FieldValue
Header{{actor_name}} commented on your post
Text"{{comment_excerpt}}"
Avatar{{actor_avatar_url}}
Subtext{{time_ago}}
Action URLhttps://yourapp.com/posts/{{post_id}}#comment-{{comment_id}}
Tagsmentions
Use bold markdown in the text to highlight key details. Set a 7-day expiry so delivered-order notifications don’t clutter the inbox. Add a tracking button via Action Buttons.
FieldValue
HeaderOrder #{{order_id}} shipped
TextYour package is on the way! Expected delivery: **{{delivery_date}}**
Action URLhttps://yourapp.com/orders/{{order_id}}
Button 1Track Order → https://yourapp.com/track/{{order_id}}
ExpiryRelative: 7 days
Use Pin so the notification stays at the top. Set a short expiry (e.g., 3 days) so stale approvals auto-archive. Use custom click handlers for in-line Approve/Reject without leaving the page.
FieldValue
HeaderExpense report needs approval
Text{{requester_name}} submitted a {{amount}} expense report for {{category}}.
Button 1Approve → https://yourapp.com/expenses/{{expense_id}}/approve
Button 2Reject → https://yourapp.com/expenses/{{expense_id}}/reject
PinEnabled
PinEnabled
ExpiryRelative: 3 days
Use a static product logo as the Avatar and a product-updates tag to route into a dedicated tab. Avoid setting expiry — users may want to reference announcements later.
FieldValue
HeaderNew feature: {{feature_name}}
Text{{feature_description}}
Avatar(static product logo URL)
Action URLhttps://yourapp.com/changelog/{{release_id}}
Tagsproduct-updates
  • Pin — for notifications that must stay at the top until the user acts (compliance, critical alerts). Always combine with an expiry so they don’t stay pinned forever.
  • Expiry — for time-sensitive content (flash sales, event reminders). Use relative expiry for consistent durations, absolute for fixed deadlines, and dynamic for computed values from your payload.
Tags added in the template filter notifications into Inbox tabs. For example, tag with mentions to show in a “Mentions” tab, or product-updates for a “Product” tab. Tags in the template are different from workflow tags — workflow tags only group workflows on the listing page.
Use a Handlebars variable like {{expiry_time}} in the Dynamic Expiry field. The value can be an ISO-8601 timestamp (e.g., 2024-03-02T20:34:07Z) or a relative duration (integer for seconds, or 2d 6h 30m 0s format).