Before you assign a template to a live notification, preview it to see how tags, images, and buttons look with sample data. Notifal replaces placeholders like {product_name} so you are not staring at empty braces.
This guide covers front-end preview for Block Editor templates. For HTML Builder preview, see Creating a Template with the HTML Builder. For Elementor, see Creating a Template with Elementor.
Why preview matters
| Without preview | With preview |
|---|---|
Tags show as {product_name} | Tags show sample text like "Sample Product" |
| Featured Image may look empty | A sample product or post image appears |
| Button links untested | Buttons render with realistic markup |
Preview does not publish the notification. It only shows the template design.
How to open a template preview
- Go to Notifal → Templates.
- Find your block editor template in the list.
- Click Preview (or the preview link on the template row).
Notifal opens a standalone preview page on your site:
- No theme header or footer (clean view of just the notification)
- Sample data filled in for tags and images
- Styles and scripts loaded the same way as on the live site
You must be logged in as a user who can edit templates. Draft templates can be previewed before publish.
What sample data is used
Notifal analyzes tags in your template and picks realistic sample content:
| Tags in template | Sample data loaded |
|---|---|
{product_name}, {product_link}, etc. | A sample product from your store |
{order_meta__billing_city}, order tags | A sample order |
{post_title}, post tags | A sample blog post |
{page_title}, page tags | A sample page |
{cart_total}, cart tags | Sample cart values (if WooCommerce is active) |
{user_first_name}, user tags | Your user account or a sample user |
If real data is missing, Notifal uses friendly fallbacks (for example "Sample Product" or "John") so the layout still makes sense.
Featured Image in preview
If Featured Image is set to Preview Image Source: Auto, the preview image follows the same rules as the live site:
- Product tags in the template → sample product image
- Post tags → sample post featured image
Change Preview Image Source in the block sidebar to force a specific type while designing.
Preview vs live notification
| Aspect | Template preview | Live notification |
|---|---|---|
| Purpose | Check design and tags | Shown to real visitors |
| Data | Sample or random records | Content source filters and live context |
| Timing rules | Not applied | Delay, exit intent, frequency apply |
| Display rules | Not applied | Page and user targeting apply |
| Status | Template draft or publish | Notification Status must be on |
Always test the full notification on your site after assigning the template. See Understanding Notification Status.
In-editor view
While editing in the Block Editor, you also see a canvas preview inside WordPress. Tags may be processed there too, depending on the block.
For the most accurate check (especially for Featured Image and button markup), use the front-end Preview link from the Templates list.
Preview for other builders
The same preview system works for all template types:
| Builder | Preview behavior |
|---|---|
| Block Editor | Renders blocks + replaces tags with sample data |
| HTML Builder | Renders HTML + class placeholders + sample tags |
| Elementor | Loads Elementor frontend styles + sample tags |
Elementor-specific tips: Elementor and Notifal Compatibility.
Troubleshooting
| Problem | Things to check |
|---|---|
| Preview page is blank | Save the template first; confirm Template Container has content |
Tags still show {braces} | Enable tag category in Settings → Tags; confirm tag spelling |
| Wrong sample image | Change Featured Image Preview Image Source or add product tags to template |
| Preview asks to log in | Log in as an administrator or editor with template access |
| Styles look different live | Notification Appearance settings (position, animation) apply only on live notifications |
Checklist
- [ ] Saved template before preview
- [ ] Opened Preview from Notifal → Templates
- [ ] Confirmed tags show sample text, not raw
{tag}names - [ ] Featured Image and Action Button look correct
- [ ] Assigned template to notification and tested live with Status on
What to read next
Block Editor series
- Creating a Template with the Block Editor
- Notifal Gutenberg Blocks Reference
- Block Editor Template Preview (you are here)