Creating a Notification from Scratch
Add a blank notification and walk through every editor tab to build your own setup.
Documentation Hub
Notifal Documentation
Guides, tutorials, and references for every Notifal feature.
/
Search results
No articles found. Try different keywords.
Browse by module
Pick a Notifal area to explore guides.
Getting Started
Install Notifal, activate Pro, and publish your first notification.
7 articles
Templates
HTML Builder, Block Editor, Elementor, and the template library.
5 topics · 30 articles
On-Page Notifications
Appearance, timing, display rules, content source, and analytics.
7 topics · 43 articles
Campaigns
Schedules, linked notifications, and campaign management.
2 topics · 6 articles
Watch Me Do It
Short video walkthroughs with step-by-step written guides.
1 topic · 2 article
Developers
Hooks, REST API, architecture, and integration guides.
5 topics · 18 articles
HTML Builder
Visual editor for custom and AI-generated HTML templates.
7 articles
Notifications & Editor
Create, duplicate, import, and manage notifications.
6 articles
Campaign Basics
Create campaigns, link notifications, and control status.
3 articles
Global Settings
Site-wide Notifal options and tag category toggles.
0 articles
Getting Started
Boot order, architecture entry point, and how to extend Notifal.
1 article
WooCommerce
Video guides for WooCommerce notifications and store setup.
2 articles
Block Editor
Notifal Gutenberg blocks and container layouts.
3 articles
Appearance
Display type, position, animations, audio, and styling.
6 articles
Scheduling & Priority
Timezone-aware schedules, expiry, and priority.
3 articles
Notifal Pro & Licensing
Connect & Activate, updates, and Free vs Pro.
0 articles
Architecture
Modules, service providers, DI container, and CPT slugs.
1 article
Elementor
Notifal Elementor widgets and template workflow.
3 articles
Timing & Triggers
Schedule, show timing, duration, and frequency.
4 articles
Import & Export
Move notifications and templates between sites.
0 articles
REST API
notifal/v1 endpoints for eligibility, tracking, tags, and preferences.
1 article
Template Library
Local templates and marketplace imports.
6 articles
Behavior & Accessibility
Dismiss rules, focus trap, ARIA, and tab badge.
4 articles
Integrations
WooCommerce, marketplace, and third-party tools.
0 articles
Hooks
Action and filter reference grouped by domain.
10 articles
Dynamic Tags
Personalize templates with live site and store data.
11 articles
Display Rules
Target pages, URLs, users, and cart conditions.
7 articles
Cookbook
Copy-paste integration examples for common extension tasks.
5 articles
Content Source
Dynamic data pools, smart targeting, and filters.
9 articles
Analytics & Attribution
Impressions, clicks, revenue, and order attribution.
7 articles
Creating a Template with the HTML Builder
Open the HTML Builder, design your notification, insert tags, preview, and save.
Getting Started for Developers
Boot order, dependency injection, and where to hook into Notifal from your plugin or theme.
How to Add a WooCommerce Sales Notification
Video walkthrough: how to add a live WooCommerce sales notification on your store, from install to front-end result.
What Are Campaigns?
Campaigns group notifications under one shared schedule and status so you can run promos as a set.
Creating a Campaign
Add a campaign, set its schedule, link notifications, and save from Notifal → Campaigns.
How to Create a Cart Abandonment Popup for WooCommerce (Step-by-Step)
Video walkthrough: create a cart abandonment popup that fires on exit intent when shoppers have items in their cart.
HTML Builder: Widgets and Structure
Insert ready-made widgets, place them before, inside, or after elements, and reorganize your HTML visually.
Notification Editor Tabs Overview
A simple tour of every tab in the notification editor and what each one controls.
Campaign Status and Linked Notifications
See how campaign on/off and status badges control whether linked notifications can show.
HTML Builder: Buttons, Close Icon, and Click Tracking
Add working buttons and a close icon with special CSS classes that Notifal recognizes automatically.
Labels and Organizing Notifications
Tag notifications with labels so you can find and group them in the admin list.
Duplicating and Bulk Actions
Copy a notification, move several to trash, or export them from the list screen.
HTML Builder: AI Generation Workflow
Generate template HTML with hosted Notifal AI or copy a prompt for an external AI tool, then load the result into the builder.
HTML Builder: AI Prompt Best Practices and Examples
Ten example prompts and tips for writing a detailed goal so the AI returns better notification HTML.
Linking a Notification to a Campaign
Assign a notification to a campaign from the General tab so the campaign controls its schedule.
Generate a Notification with AI
Create a full notification draft with hosted Notifal AI or copy a prompt for an external AI tool and import the JSON.
HTML Builder: Layouts and Use Cases
Choose a display layout and use case so AI and templates match how your notification appears on site.
HTML Sanitization and Allowed HTML
See what HTML and CSS is allowed in templates and how Notifal keeps your designs safe.
Architecture Overview
Modules, service providers, the DI container, and CPT slugs used across Notifal.
Campaign Schedule and Timezone
Set campaign start and end dates using your WordPress site timezone.
Creating a Template with the Block Editor
Create a notification template using Notifal blocks in the WordPress Block Editor.
Display Types: Toast, Popup, Topbar, Floating
Pick how your notification appears: side box, centered popup, or full-width bar.
Campaign Expiry and Auto-Deactivation
When a campaign end date passes, linked notifications stop showing and the campaign shows Ended.
Notifal Gutenberg Blocks Reference
Learn what each Notifal block does and how to configure it in the Block Editor.
Position and Device Visibility
Choose screen position per device and control whether the notification shows on desktop, tablet, or mobile.
Animations and Transitions
Pick how your notification animates in and out, and how long the motion lasts.
Block Editor Template Preview
Preview your block template with sample data before you assign it to a notification.
Campaign Priority vs Notification Priority
Campaign schedule sets the date window; notification timing and Pro priority handle show order.
Custom CSS for Notifications
Fine-tune one notification's look with scoped custom CSS (Notifal Pro).
Notification Audio
Play a sound when your notification appears or disappears, with built-in sounds or your own file.
Topbar Above Header (Theme Compatibility)
Put a top bar before your site header and control sticky behavior on scroll.
Creating a Template with Elementor
Create a notification template in Elementor with Notifal widgets and dynamic tags.
REST API Reference
All notifal/v1 REST routes, methods, parameters, and response notes.
When Should the Notification Show?
Control whether the notification appears on page load, after a delay, or when the visitor scrolls.
Notifal Elementor Widgets Reference
Reference for Notifal Elementor widgets: Featured Image, Action Button, and Close Icon.
Schedule Windows (Start/End Dates)
Limit a notification to a date and time range using your WordPress site timezone.
Elementor and Notifal Compatibility
Keep Elementor templates in sync with notifications, preview correctly, and avoid common theme conflicts.
Frequency and Session Limits
Show once per visit, cap how many times per session, and honor when visitors close the notification.
Advanced Timing (Pro)
Pro-only timing controls for consent, inactive tabs, single instances, and priority order.
Browsing the Template Library
Open the library, filter and search templates, preview on desktop or mobile, and find the right design fast.
Dismiss Rules
Choose how visitors close your notification: with a close button, after a timer, or both.
Hook Reference Hub
Central index of Notifal hooks by domain. Start here, then open the article for your area.
Hooks: Lifecycle and Bootstrap
Hooks fired during Plugin.php boot, Maintenance activation, migrations, and infrastructure registration.
Importing a Template from the Marketplace
Pick a marketplace design, choose your builder version, and import a full notification in a few clicks.
User Interaction Dismiss Options (Pro)
Let visitors dismiss notifications by clicking outside, pressing Esc, scrolling, or swiping (Pro).
Accessibility: Focus Trap and ARIA
Help screen reader and keyboard users interact with your notifications comfortably.
Hooks: Notifications and Eligibility
Reference for notification lifecycle hooks, settings sanitization filters, and the eligibility REST pipeline.
Managing Local Templates
List, search, duplicate, trash, import, and export templates saved on your WordPress site.
Requesting a Missing Builder Version
Ask Notifal to add HTML Builder, Elementor, or Block Editor when that import option is not available yet.
Free vs Pro Templates in the Library
Understand the Pro badge, filter Free or Pro templates, and know what you need on your site.
Hooks: Templates and Rendering
Hooks for template lifecycle, builders (Elementor, HTML), preview routes, and rendered HTML processing.
Tab Badge Behavior (Pro)
Catch attention when visitors switch tabs by updating the browser tab title or badge (Pro).
Browsing Templates on notifal.com
Use the public gallery at notifal.com/templates/ to preview designs, filter, and read details before you import in WordPress.
Hooks: Tags and Dynamic Data
Register custom tags, modify resolved values, extend dynamic key discovery, and hook TagManager rendering.
Hooks: Display Rules and Content Source
Hook into page targeting validation, product/order pools, smart targeting, and WooCommerce cart rules.
Hooks: Analytics and Tracking
Track events, modify validation, extend analytics calculations, and hook order attribution in WooCommerce.
Hooks: Admin UI Extension
Inject admin UI into Notifal pages, customize list tables, and extend notification and campaign editor tabs.
Hooks: Pro Integration Bridge
How Notifal Pro attaches to base plugin hooks for license checks, features, analytics, and comment content source.
Hooks: Hosted Notifal AI
Extend hosted AI gateway requests, generation capabilities, sanitized output, and JavaScript config without editing core AI services.
Cookbook: Modify Notification Before Display
Filter notification data in NotificationDataPreparer before templates render for the frontend.
Display Rules Basics
Choose where your notification may appear, or leave rules empty to show site-wide.
What Are Dynamic Tags?
Placeholders like {product_name} that Notifal replaces with real data when a notification shows.
Cookbook: Add Custom Dynamic Tag
Register custom dynamic tags on notifal/tag/register using Tag, TagManager, and TagCategory.
Page and Post Targeting
Show notifications only on chosen pages, posts, or post types, or exclude specific ones.
User, Post, and Page Tags
Tags from WordPress users, blog posts, and pages for personalized notification text.
Cart Display Rules (WooCommerce)
Target visitors by what's in their WooCommerce cart: products, totals, coupons, and more.
Cookbook: Customize Template Import
Filter the import result array returned by Templates Importer after JSON or ZIP processing.
WooCommerce Product and Order Tags
Product and order tags for store notifications: names, prices, links, IDs, and custom order fields.
Cart Tags (WooCommerce)
Tags for the visitor's live cart: totals, item count, coupons, and checkout links.
Cookbook: Extend Display Rules
Mirror the Notifal Pro display rules pattern with section actions and display rule filter hooks.
Multiple Display Rules with AND/OR (Pro)
Combine several display rules so notifications show only when the right mix of conditions is true (Pro).
Category Display Rules (Pro)
Show notifications on category archive pages or specific categories (Pro).
Cookbook: Register a Custom HTML Builder Widget
Register reusable HTML in the widget palette and teach Notifal's AI prompts the same structure.
Counter Tags
Show totals like {order_counter} and {product_counter} that match your content source restrictions.
Custom Meta Tags
Pull any custom field with tags like {user_meta_nickname} or {product_meta__sku}.
URL Conditions (Pro)
Show notifications when the page URL or UTM parameters match your conditions (Pro).
Date Formatting Tags
Show dates as 2 days ago or in your own format using date tag suffixes.
User Display Rules (Pro)
Show notifications based on who is visiting: guests, members, roles, and visit history (Pro).
Comment Tags (Pro)
Pro comment tags for reviews, testimonials, and social proof from WordPress comments.
Tags Generator for Custom Post Types (Pro)
Generate tags for custom post types like events or listings from Notifal Pro Settings.
Managing Tag Categories in Settings
Turn tag categories on or off site-wide so editors only see what they need.
Combining Dynamic Tags: Creative Examples
Combine tags with display rules and timing to build notifications visitors actually respond to.
What Is Content Source?
Content source tells Notifal which live data fills your template's dynamic tags.
Product Pool Content Source
Pull random or filtered products into your notification text and images.
Order Pool Content Source
Show real recent orders in social proof toasts with buyer and product details.
Post, Page, and User Pools
Use blog posts, pages, or user profiles as the data behind your dynamic tags.
Cart-Based Content Source
Fill notification tags with products from the visitor's cart, including related and upsell items.
Smart Targeting (Pro)
Automatically align notification content with the page or category the visitor is viewing (Pro).
Comment Content Source (Pro)
Show real comments or reviews in notifications with comment-based dynamic tags (Pro).
Content Source Filters
Narrow product, order, and post pools with categories, dates, sale status, and combined rules.
Retrigger Variants
Rotate different pool items when the notification shows again on the same page.
On-Page Analytics Dashboard
Find and use the analytics dashboard to see how your notifications perform.
Understanding Metrics (CTR, Conversions, Revenue)
What impressions, clicks, CTR, conversions, and revenue mean in your dashboard.
Enhanced Analytics (Pro)
Charts, trends, top notifications, and full engagement stats with Notifal Pro.
Per-Button Click Analytics (Pro)
See which buttons in a notification get the most clicks (Pro).
Order Attribution in WooCommerce
See in WooCommerce which notification helped drive an order.
Click Tracking on Custom Buttons
Track clicks on any custom button or link by adding one CSS class.
Attribution Window and Conversion Settings
How long after a click an order counts, and which order statuses count as a sale.
Installing and Activating Notifal (Free + Pro)
Install and activate Notifal on your WordPress site, then connect Notifal Pro when you are ready.
Your First On-Page Notification (Ready-Made Template)
Import a ready-made notification, turn it on in the list, and see it on your site.
What Is Notifal? (Free vs Pro)
Understand on-page notifications and see what the free plugin includes versus what Pro unlocks.
Navigating the Notifal Admin Menu
Learn what each item under the Notifal menu does and where to go for common tasks.
Understanding Notification Status (Draft, Active, Off)
See what happens when a notification is a draft, live, or turned off, and how the free plan limits active notifications.
WooCommerce Setup for Notifal
Turn on WooCommerce tags and content source so your notifications can use live product, order, and cart data.
Connecting Your Notifal AI Account
Verify your email once for hosted Notifal AI, or connect automatically when Notifal Pro is activated on the site.
No articles in this section yet. Check back soon.