Creating a Template with the HTML Builder

The HTML Builder is Notifal's visual editor for custom notification designs. You build the layout in a fullscreen workspace, add dynamic tags, preview how it looks, then save the template and assign it to a notification.

Prefer WordPress blocks or Elementor? See Creating a Template with the Block Editor or Creating a Template with Elementor.

If you are new to Notifal, start with Your First On-Page Notification to import a ready-made design first.

When to use the HTML Builder

Step 1: Open the Templates screen

1. In WordPress, go to Notifal → Templates.
2. Click Add New then click Create with HTML Builder.

Notifal creates a new template and opens the HTML Builder in fullscreen mode.

Step 2: Choose how to start

When the builder opens, you see a welcome screen with two paths:

Paste existing HTML

1. Click I have HTML.
2. Paste your notification HTML into the box.
3. Click Load HTML.

Step 3: Design in the builder

The builder has three main areas:

Top toolbar actions

The builder also auto-saves after a short idle period.

Step 4: Insert dynamic tags

Tags are placeholders Notifal replaces with live data when the notification shows (for example {product_name} or {cart_total}).

1. Click Insert Tag in the toolbar.
2. Browse or search for a tag.
3. Click to insert it into the selected text area.

If you use WooCommerce tags, enable them first under Notifal → Settings → Tags. See WooCommerce Setup for Notifal.

Step 5: Preview your design

Before saving, check how the template looks:

• Preview mode (toolbar toggle): quick check inside the builder
• Frontend Preview (toolbar link): opens your site with sample data filled in

Sample data helps you see tags and var tags replaced even when no real order or product is loaded.

Step 6: Save or publish

1. Click Save to keep the template as a draft, or Publish when you are ready.
2. Notifal checks your HTML for safety and may show warnings if something was adjusted (see HTML Sanitization and Allowed HTML).
3. After save, you return to the Templates list or stay in the builder depending on your action.

Step 7: Assign the template to a notification

A template on its own does not appear on your site. You link it to a notification:

1. Go to Notifal → OnPage Notifications.
2. Open a notification (or create one).
3. In the General tab, choose your new template.
4. Turn Status on when ready. See Understanding Notification Status.

Responsive preview

Use the width controls above the canvas to switch between Desktop, Tablet, and Mobile views. This helps you confirm the design fits smaller screens.

Checklist

• [ ] Opened Notifal → Templates and created a new HTML Builder template
• [ ] Loaded or built notification HTML (fragment only, not a full page)
• [ ] Added tags where needed via Insert Tag
• [ ] Previewed with Frontend Preview
• [ ] Saved or published the template
• [ ] Assigned the template to a notification and turned Status on

What to read next

HTML Builder series

1. Creating a Template with the HTML Builder (you are here)
2. HTML Builder: Buttons, Close Icon, and Click Tracking
3. HTML Builder: AI Prompt Workflow
4. HTML Builder: Layouts and Use Cases
5. HTML Sanitization and Allowed HTML

Other template editors

• Creating a Template with the Block Editor
• Creating a Template with Elementor