This guide shows how to create a notification from scratch instead of importing a ready-made design. You will add a blank notification, fill in each tab, and save it.
If you prefer a faster start, see Your First On-Page Notification to import a template from the library.
1. Open the notifications list
- In WordPress, go to Notifal → OnPage Notifications.
- Click Add New at the top of the list.
You land in the notification editor with a sidebar of tabs on the left and the settings area on the right.
2. Start with the General tab
The General tab is open by default. Set these first:
| Field | What it does |
|---|---|
| Enable Notification | Turn on when you are ready for visitors to see it. Leave off while you are still editing. |
| Notification Name (Internal) | A name only you see in the admin list. Visitors never see this. |
| Notification Labels | Optional tags to organize notifications (see Labels and Organizing Notifications). |
| Campaign | Optional. Link the notification to a campaign schedule (see Linking a Notification to a Campaign). |
| Content Source Type | Dynamic uses live store or site data. Static keeps fixed text. |
3. Pick a template (Template tab)
- Click Template in the sidebar.
- Browse templates grouped by builder: HTML Builder, Elementor, or Block Editor.
- Click a template card to select it.
If you do not have a template yet, create one under Notifal → Templates, or import from the marketplace. See Browsing the Template Library.
4. Set where and when it shows
Work through these tabs in any order. Each one has its own guide in this documentation:
| Tab | Purpose |
|---|---|
| Display Rules | Which pages and visitors see the notification |
| Content Source | Data that fills dynamic tags in the template |
| Appearance | How the notification looks on screen (type, position, colors) |
| Timing | When it appears and how often |
| Behavior | Close rules, accessibility, and interaction options |
See Notification Editor Tabs Overview for a full walkthrough of every tab.
5. Save your work
- When you are happy with the settings, click Save Notification in the sidebar.
- Wait for the success message.
After the first save, you also get a Preview button to open the notification on your site in a new tab.
6. Turn it on and test
- Make sure Enable Notification is on in the General tab (or use the Status switch in the list).
- Open your website in a private/incognito window.
- Check that the notification appears based on your timing and display rules.
If nothing shows, check Status, timing, and display rules before changing the template.
Checklist
- [ ] Clicked Add New on Notifal → OnPage Notifications
- [ ] Gave the notification an internal name
- [ ] Selected a template
- [ ] Reviewed appearance, timing, and display rules
- [ ] Saved and tested on the front end
What to read next
Notifications & Editor series
- Creating a Notification from Scratch (you are here)
- Notification Editor Tabs Overview
- Labels and Organizing Notifications
- Duplicating and Bulk Actions
- Linking a Notification to a Campaign
- Generate a Notification with AI
Related topics
- Display Types: Toast, Popup, Topbar , choose how the notification appears
- When Should the Notification Show? , delay, scroll, and page load triggers