Skip to main content
The Web Push editor is a form with title, body, image, action URL, and buttons - with a live preview on the right (toggle between Windows and macOS). Content is personalised with Handlebars variables ({{variable_name}}).

Web Push editor with Windows/macOS preview toggle

​
Web Push fields

Title - single-line heading. Keep under 40 characters (Windows truncates aggressively; macOS is more generous). Supports Handlebars variables. Large Icon - shown to the right of the notification text. Set it per template in the Icon field (recommended 256 × 256 px). The field is empty by default, so no icon is sent unless you set one. Body - 2-3 lines max. One sentence with a clear CTA is ideal. Supports Handlebars variables. Banner Image URL - optional. 2:1 aspect ratio (recommended 720x480), under 200 KB for instant rendering. Formats: PNG, JPG, JPEG. Action URL - URL opened on notification click. Always include one - without it, clicking does nothing. Supports Handlebars variables. Action Buttons - optional. Up to 2 buttons with action-oriented labels (2-3 words: “View Order”, “Shop Now”). Supports Handlebars. Only visible on Chromium browsers (Chrome, Edge, Brave) - on Firefox and Safari, only the title, body, and click action are shown.

​
Adding dynamic content

You can add variables in the template to personalise it for each recipient. Variables are replaced with actual data at send time.
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 powers auto-suggestions and the live preview. For the full guide, see Adding dynamic content.
2

Use variables in the template

Type {{ in any field - matching variables appear as auto-suggestions. You can also type variable names manually following Handlebars syntax.Examples using this sample data:
  • Nested variable: {{event.order_id}} → renders as 11200123
  • Variable with space in name: {{event.[first name]}}
The preview section shows sample values rendered in real-time. If a variable isn’t rendering, check:
  1. The variable is defined in the Variables panel.
  2. The variable name matches the Handlebars syntax exactly.
If a variable cannot be rendered at send time (missing or mismatched data), SuprSend discards the Web Push notification for that user. Other channels in the same template group are still sent.

​
Preview and test

The right panel shows a live notification preview (toggle Windows / macOS). Variables render using data from the Variables panel. Click Test in the top-right corner to send a real web push to a real browser. In the editor this uses the draft version; from the live view it uses the live version. 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.

​
Common scenarios

​
Frequently asked questions

Action buttons only render on Chromium browsers. Design your notification so the core message is in the title + body, with buttons as an enhancement.
Set it in the template’s Icon field (recommended 256 × 256 px). The field is empty by default, so set it on each template that should show an icon.
Web push has higher opt-out rates than other channels. Send only high-value, time-sensitive notifications to maintain subscriber trust. Over-sending is the fastest way to lose subscribers.
SuprSend discards the Web Push notification for that user. Other channels in the same template group are still sent if they render successfully.