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 ... ?>) |
| Plugin shortcodes (forms, WooCommerce, etc.) | External CSS files or @import |
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) classand supporteddata-*attributes (needed for Notifal widgets, buttons, countdowns, and tracking)- Dynamic tags in text content
- WordPress shortcodes from any active plugin (see below)
WordPress and plugin shortcodes
You can embed shortcodes inside HTML Builder templates. WordPress processes them when the notification renders on the front end. This is useful for:
- Contact or newsletter forms (Contact Form 7, WPForms, Mailchimp, etc.)
- WooCommerce elements (product grids, add-to-cart buttons, cart fragments)
- Countdown timers, star ratings, or other plugin widgets
Paste the shortcode directly in your HTML, for example:
<div class="notifal-form-wrap">[contact-form-7 id="123"]</div>For native Notifal lead forms, prefer the Form widget (class="notifal-form") instead of a third-party shortcode. See Notifal Forms Overview.
Shortcodes are not a replacement for Notifal dynamic tags. Use {product_name} and similar tags for notification data, Notifal Forms for native lead capture, and shortcodes when you need another plugin feature.
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.
HTML Builder widget attributes
Widgets added from the palette use data-notifal-widget on their root element:
<p data-notifal-widget="paragraph" class="notifal-hb-paragraph">
Add your message here.
</p>This attribute identifies the element in the builder and displays its widget badge. It does not add frontend behavior by itself. Buttons, close controls, featured images, and countdowns still use their required Notifal classes and data attributes.
Restricted saves preserve data-notifal-widget and the supported Notifal data attributes on common elements. If you manually edit widget HTML, keep the attribute value unchanged to retain widget recognition.
See HTML Builder: Widgets and Structure.
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 Noti in the HTML Builder, generation already follows these rules. After apply, 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: Chat with Noti (AI).
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 - [ ] Shortcodes tested on the front end if used for forms or plugin widgets
- [ ] 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: Widgets and Structure
- HTML Builder: Buttons, Close Icon, and Click Tracking
- HTML Builder: Chat with Noti (AI)
- HTML Builder: AI Prompt Best Practices and Examples
- HTML Builder: Layouts and Use Cases
- HTML Sanitization and Allowed HTML (you are here)