When you save a template in the HTML Builder, Notifal runs your HTML through a sanitizer. This keeps your site safe while still letting you use rich designs, inline CSS, and Notifal-specific class placeholders.
This guide explains what is allowed, what gets removed, and how to avoid surprises after save.
Working in the Block Editor or Elementor? Those editors handle markup differently. See Notifal Gutenberg Blocks Reference or Notifal Elementor Widgets Reference.
What to paste or build
Your template should contain only the notification content, not a full web page.
| Include | Do not include |
|---|---|
HTML elements (div, p, a, img, etc.) | <!DOCTYPE> |
One inline <style> block | <html>, <head>, <body> |
| Notifal class placeholders | External CSS files or @import |
Dynamic tags like {product_name} | PHP code (<?php ... ?>) |
Allowed HTML (all users)
Notifal allows standard WordPress post HTML plus a few extras:
- Headings, paragraphs, lists, links, images, tables
- Inline
<style>blocks (for your notification CSS) classanddata-*attributes (needed for Notifal buttons and tracking)- Dynamic tags in text content
Notifal class placeholders
These special classes turn plain HTML into working Notifal features on the front end:
| Class | Purpose |
|---|---|
notifal-action-button | Clickable button with tracking and link behavior |
notifal-close-button | Dismiss control |
notifal-post-feature-image | Context-aware featured image |
notifal-track-click | Extra click tracking for analytics |
Full guide: HTML Builder: Buttons, Close Icon, and Click Tracking.
Use the notifal- prefix for custom classes and IDs when possible. This avoids clashes with your theme.
CSS guidelines
| Allowed | Not recommended |
|---|---|
| Colors, fonts, padding, borders, flexbox | position: fixed, absolute, or sticky |
| Border radius, shadows, backgrounds | High z-index values |
| Width and height inside the notification | Rules that try to position the popup on the page |
Notifal's notification wrapper handles where the popup appears on screen. Your template CSS should style what is inside the notification box.
What gets removed or changed
Notifal always removes or adjusts these items for security:
| Item | What happens |
|---|---|
PHP tags (<?php ... ?>) | Removed. You may see a warning to use Notifal tags instead. |
Inline event handlers (onclick, onload, etc.) | Stripped silently |
javascript: in links or image sources | Replaced with # |
| Invalid characters | Cleaned or the text |
Script tags
| Your account | Script tags (<script>) |
|---|---|
| Administrator with unfiltered HTML permission | Allowed |
| Other roles | Removed on save, with a warning |
Most site owners edit templates as administrators, but if scripts disappear after save, this permission is the reason.
Save warnings
After you click Save or Publish, Notifal may show warnings such as:
- "PHP is not supported. Use Notifal tags or WordPress shortcodes."
- "Script tags were removed because your account does not have permission to use unfiltered HTML."
The template still saves. Review the warning, adjust your HTML, and save again if needed.
Dynamic tags vs PHP
Use Notifal tags for live data, not PHP:
| Instead of PHP | Use a Notifal tag |
|---|---|
| Custom PHP to print product name | {product_name} |
| PHP for order city | {order_meta__billing_city} |
| PHP for cart total | {cart_total} |
Enable tag categories under Notifal → Settings → Tags. For store tags, see WooCommerce Setup for Notifal.
AI-generated HTML tips
If you use the AI Prompt workflow, the prompt already tells the AI to follow these rules. After pasting AI output, quickly check:
- No
<html>or<body>wrappers - Buttons use
notifal-action-buttonandnotifal-close-button - No inline
onclickhandlers - CSS avoids page positioning (
fixed,z-index)
See HTML Builder: AI Prompt Workflow.
Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| Styles missing after save | External CSS or @import | Move rules into an inline <style> block |
| Button clicks do nothing | Missing Notifal classes | Add notifal-action-button with data-notifal-action |
| Scripts stopped working | Account lacks unfiltered HTML | Use Notifal features instead of custom scripts |
Tag shows as literal {product_name} | Tag not in enabled category | Enable tag in Settings → Tags |
| Close button not accessible | Custom HTML stripped attributes | Use notifal-close-button class; Notifal adds accessibility attrs |
Checklist
- [ ] Template is a fragment (no
<html>/<body>) - [ ] CSS is in an inline
<style>block - [ ] No PHP or inline JavaScript event handlers
- [ ] Action and close elements use Notifal placeholder classes
- [ ] Dynamic data uses
{tags}, not PHP - [ ] Reviewed any save warnings and fixed HTML if needed
What to read next
HTML Builder series
- Creating a Template with the HTML Builder
- HTML Builder: Buttons, Close Icon, and Click Tracking
- HTML Builder: AI Prompt Workflow
- HTML Builder: Layouts and Use Cases
- HTML Sanitization and Allowed HTML (you are here)