When you edit a Notifal template in Elementor, three widgets appear in the Notifal category. They are built for notification behavior: context-aware images, tracked buttons, and dismiss controls.
These widgets only appear for Notifal templates, not on regular Elementor pages.
New to Elementor templates? Start with Creating a Template with Elementor.
The Block Editor and HTML Builder offer the same features. See Notifal Gutenberg Blocks Reference or HTML Builder: Buttons, Close Icon, and Click Tracking.
Widget overview
| Widget | What it does |
|---|---|
| Featured Image | Shows product, post, or page image from notification data |
| Close Icon | Lets visitors dismiss the notification |
| Action Button | Main CTA with link, copy, cart, or close behavior |
Featured Image
Displays the image that matches the notification's live data (for example the product someone just bought).
You do not pick one fixed product image for live notifications. Notifal loads the correct image from the content source when the notification shows.
Content tab
| Control | Purpose |
|---|---|
| Lazy Load | Loads image when needed (better performance). Default: on |
| Image Resolution | WordPress size: thumbnail, medium, large, full |
| Preview Image Source | What to show while designing: Auto, Post, Page, Product |
Preview Image Source: Auto picks a sample image based on tags in your template:
- Product or order tags → product image
- Post tags → post featured image
- Page tags → page image
Style tab highlights
- Alignment, width, height
- Border, border radius, box shadow
- Opacity (normal and hover), hover animation
- CSS filters (brightness, contrast, blur, etc.)
- Object fit (cover, contain)
- Force Transparent Background
Close Icon
Adds a clickable control to dismiss the notification. Close events appear in OnPage Analytics.
Content tab
| Control | Default |
|---|---|
| Icon | Elementor close (X) icon |
| Alignment | Right |
Style tab
- Size (responsive)
- Color (normal and hover)
- Hover animation
- Background (solid or gradient)
- Border, border radius, shadow, padding
The widget is keyboard accessible with a "Close Notification" label for screen readers.
Action Button
The main call-to-action. Default text is Buy Now. Supports Elementor dynamic tags and Notifal tags in the label.
Content tab: Button settings
| Control | Purpose |
|---|---|
| Text | Button label |
| Link Type | What happens on click (see table below) |
| Alignment | Left, center, right, justified |
| Width | Inline or full width |
| Add Icon | Optional icon left or right of text |
Link Type options
| Link Type | Visitor experience |
|---|---|
| Post Link (default) | Opens the product, post, or page from the notification's content source. Shows loading text while redirecting. |
| Copy Text | Copies your text to the clipboard |
| Custom Link | Opens any URL. Supports new tab and nofollow |
| Close Notification | Dismisses the notification |
| Custom Trigger | Show or hide elements on the page via CSS selectors (e.g. #popup-form,.hidden-offer) |
| Ajax Add to Cart | Adds product to WooCommerce cart without leaving the page |
Ajax Add to Cart (WooCommerce only)
| Option | Choices |
|---|---|
| Quantity | 1 to 99 |
| After adding | Stay on page, redirect to cart, redirect to checkout |
| Success text | Message after add (default: "Added!") |
| View Cart Link | Style WooCommerce's "View cart" link separately |
Style tab
- Typography, text color
- Background (solid or gradient)
- Border, radius, shadow, padding
- Icon size, color, spacing
- Hover colors
Clicks are tracked for analytics and revenue attribution.
Dynamic tags in Elementor
Beyond the three Notifal widgets, use tags in Heading and Text Editor widgets:
- Edit text in the widget.
- Open the Notifal tags panel (when editing a Notifal template).
- Insert tags like
{product_name},{order_meta__billing_city},{cart_total}.
Tags are replaced on the live site and in template preview.
Enable categories under Notifal → Settings → Tags. Store setup: WooCommerce Setup for Notifal.
Standard Elementor widgets
You can mix Notifal widgets with any Elementor element:
| Use standard Elementor for… | Use Notifal widgets for… |
|---|---|
| Headings, spacers, backgrounds | Context-aware product/post image |
| Decorative icons and shapes | Buttons that link to notification data |
| Countdowns, sliders (third-party) | Close control with analytics |
Third-party Elementor widgets generally work. Notifal captures their CSS when the notification renders. If something looks unstyled on the live site, see Elementor and Notifal Compatibility.
Widget vs Block Editor vs HTML Builder
| Feature | Elementor widget | Block Editor block | HTML Builder class |
|---|---|---|---|
| Image | Featured Image | Featured Image | notifal-post-feature-image |
| Button | Action Button | Action Button | notifal-action-button |
| Close | Close Icon | Close Icon | notifal-close-button |
Checklist
- [ ] Featured Image uses Auto or correct preview source
- [ ] Action Button Link Type matches your goal (Post Link, Copy, Add to Cart, etc.)
- [ ] Close Icon aligned top-right (or your preferred corner)
- [ ] Tags added to headings and button text
- [ ] Template previewed before assigning to notification
What to read next
Elementor series
- Creating a Template with Elementor
- Notifal Elementor Widgets Reference (you are here)
- Elementor and Notifal Compatibility