Notifal adds five blocks to the WordPress Block Editor. They appear in the Notifal category when you edit a template under Notifal → Templates.
These blocks only show for Notifal templates, not for regular posts or pages.
New to block templates? Start with Creating a Template with the Block Editor.
The HTML Builder and Elementor offer the same features with classes or widgets. See HTML Builder: Buttons, Close Icon, and Click Tracking or Notifal Elementor Widgets Reference.
Block overview
| Block | What it does |
|---|---|
| Template Container | Outer frame for the whole notification |
| Featured Image | Shows product, post, or page image from live data |
| Action Button | Main button (shop link, copy code, close, add to cart) |
| Close Icon | Dismiss button for the notification |
| Icon | Custom SVG graphic (stars, checkmarks, etc.) |
Template Container
The root wrapper for every block editor template. It is inserted automatically when you create a new template.
Layout presets
When you first add the container, pick a starting layout:
- 2 Columns: split ratios like 50/50, 30/70, 75/25
- 3 Columns Equal
- Single Row
- Group Container
- Empty Canvas
After choosing a preset, add blocks inside the columns or groups.
Sidebar panels
| Panel | Controls |
|---|---|
| General | Column count, flex direction, alignment |
| Dimension | Width (full or custom), min/max height |
| Padding | Inner spacing (desktop, tablet, mobile) |
| Background | Solid color, gradient, or image |
| Border | Border style, radius, color |
| Box Shadow | Drop shadow |
| Custom CSS | Extra CSS for advanced styling |
Featured Image
Shows the main image tied to the notification's data (for example the product in a recent purchase alert).
You do not upload a fixed product image for live notifications. Notifal picks the image from the content source at display time.
Key settings
| Setting | Options |
|---|---|
| Preview Image Source (editor only) | Auto, Post, Page, Product (Product needs WooCommerce) |
| Image Resolution | Thumbnail, Medium, Large, Full |
| Alignment | Left, center, right |
| Width / Height | Responsive sizing |
| Border and shadow | Visual styling |
| Object fit | Cover, contain, etc. |
| Lazy load | On or off |
| Force transparent background | Removes background behind the image |
Preview Image Source: Auto
Notifal detects which image to show based on tags in your template:
- Product or order tags → product image
- Post tags → post featured image
- Page tags → page featured image
Action Button
The main call-to-action. Default label is Buy now. You can change the text and add tags like {product_name}.
Link Type options
| Link Type | What happens when clicked |
|---|---|
| Post Link (default) | Opens the product, post, or page from the notification's content source |
| Copy Text | Copies your text to the visitor's clipboard |
| Custom Link | Opens any URL you enter |
| Close Notification | Dismisses the notification |
| Custom Trigger | Shows or hides page elements using CSS selectors (e.g. #signup-form) |
| Ajax Add to Cart | Adds the product to WooCommerce cart without leaving the page |
Ajax Add to Cart options (WooCommerce only):
- Quantity (1 to 99)
- After adding: stay on page, go to cart, or go to checkout
- Success message text
- View Cart Link styling
Style settings
- Typography, text color, background (solid or gradient)
- Border, padding, border radius, box shadow
- Hover colors
- Optional icon (upload image, left or right)
- Alignment and full-width toggle
Clicks are tracked automatically for OnPage Analytics.
Close Icon
Lets visitors dismiss the notification. Close events are tracked in analytics.
Settings
| Setting | Default |
|---|---|
| Icon style | Built-in X icon, or upload a custom image |
| Alignment | Right (common for top corner placement) |
| Size | Responsive |
| Color | Normal and hover |
| Background | Solid or gradient |
| Border, padding, shadow | Visual styling |
The block is keyboard accessible with a "Close Notification" screen reader label.
Icon
A decorative SVG icon block for badges, stars, checkmarks, or custom graphics.
Settings
| Setting | Purpose |
|---|---|
| SVG code | Paste your SVG markup in the sidebar |
| Size | Responsive |
| Primary color | Tints the SVG |
| Background, border, padding, shadow | Frame the icon |
Use standard WordPress heading or image blocks if you prefer simpler content.
Dynamic tags in blocks
Tags work in:
- Paragraph and heading blocks
- Action Button text (RichText field)
Insert tags via the Notifal Tags sidebar: click to copy, then paste.
Enable categories under Notifal → Settings → Tags. Store tags: WooCommerce Setup for Notifal.
Block vs HTML Builder vs Elementor
| Feature | Block Editor | HTML Builder | Elementor |
|---|---|---|---|
| Featured image | Featured Image block | notifal-post-feature-image class | Featured Image widget |
| Button | Action Button block | notifal-action-button class | Action Button widget |
| Close | Close Icon block | notifal-close-button class | Close Icon widget |
| Layout | Template Container columns | Custom HTML/CSS | Elementor sections |
Checklist
- [ ] Template Container layout chosen
- [ ] Featured Image set to Auto or a specific preview source
- [ ] Action Button Link Type matches your goal
- [ ] Close Icon placed in a corner
- [ ] Tags pasted into text and button labels
What to read next
Block Editor series
- Creating a Template with the Block Editor
- Notifal Gutenberg Blocks Reference (you are here)
- Block Editor Template Preview