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 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. Defaults to your organisation logo (set in Organisation Settings). Cannot be changed per template. 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. Chrome 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:
{
  "event": {
    "order_id": "11200123",
    "first_name": "Nikita"
  },
  "product_name": "RayBan Sunglasses",
  "product_image_url": "https://yourapp.com/images/product.jpg"
}
  • 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. 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.

​
Common scenarios

FieldValue
TitleBack in stock: {{product_name}}
BodyThe item you were watching is available again.
Banner Image URL{{product_image_url}}
Action URLhttps://yourapp.com/product/{{product_id}}
Button 1Buy Now → https://yourapp.com/cart/add/{{product_id}}
FieldValue
TitleNew article: {{article_title}}
Body{{article_excerpt}}
Banner Image URL{{cover_image_url}}
Action URLhttps://yourblog.com/{{article_slug}}
FieldValue
TitlePrice dropped on {{product_name}}
BodyNow {{new_price}} (was {{old_price}})
Action URLhttps://yourapp.com/product/{{product_id}}
Button 1View Deal → https://yourapp.com/product/{{product_id}}
Button 2Add to Cart → https://yourapp.com/cart/add/{{product_id}}

​
Frequently asked questions

FeatureChromeFirefoxSafari (macOS)Edge
Title + BodyYesYesYesYes
Banner ImageYesYesNoYes
Action ButtonsYes (up to 2)NoNoYes (up to 2)
Large IconYesYesNoYes
Action buttons are labelled “Chrome Action Buttons” in the editor because they only render on Chromium browsers. Design your notification so the core message is in the title + body, with buttons as an enhancement.
The large icon defaults to your organisation logo set in Organisation Settings on the SuprSend dashboard. It cannot be changed per template — update it in your org settings if you need a different 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.