HTML Builder

Creating a Template with the HTML Builder

6 min read

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

SituationHTML Builder is a good fit
You want full control over HTML and CSSYes
You paste HTML from another tool or AIYes
You already use Elementor for everythingConsider Elementor instead
You prefer WordPress blocksConsider the Block Editor instead

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:

OptionBest for
I have HTMLYou already have HTML code (from AI, a developer, or another tool)
Generate with AIChat with Noti to create the design, then keep refining it. See HTML Builder: Chat with Noti (AI)

Paste existing HTML

  1. Click I have HTML.
  2. Paste your notification HTML into the box.
  3. Click Load HTML.
Important: Paste only the notification content, not a full web page. Do not include <!DOCTYPE>, <html>, <head>, or <body> tags.

If you pasted HTML from another tool, keep a notification fragment only. Do not include full-page wrappers. Hosted Noti already returns the correct fragment format.

Step 3: Design in the builder

The builder has three main areas:

AreaWhat you do here
Left panelSwitch between Structure (the complete element tree) and Widgets (ready-made elements and Notifal features).
CanvasLive preview of your notification. Click elements to edit them.
Right panelProperties for the selected element: Style, Content, or HTML tabs

Add and reorganize elements

  • Open Widgets to insert headings, paragraphs, images, buttons, countdowns, forms, dividers, spacers, and other ready-made elements.
  • Click a widget to insert it inside the selected Structure element.
  • Drag a widget for exact before, inside, or after placement.
  • Drag existing Structure rows to reorder or nest elements.
  • Right-click a Structure row for Copy, Paste, Copy styles, Paste styles, Duplicate, and Remove.
  • Select a Structure element and press Delete or Backspace to remove it.

See HTML Builder: Widgets and Structure for placement indicators, widget settings, and troubleshooting.

Top toolbar actions

ButtonWhat it does
BackReturn to Notifal → Templates
TitleRename your template
Generate with AI / Edit with AIOpen the floating Noti chat to create or update template HTML
View HTMLSee or edit raw HTML code
Insert TagOpen the tag picker for dynamic text like {product_name}
Frontend PreviewOpen a preview in a new tab with sample data
Preview modeToggle preview inside the canvas
Save / PublishSave your work

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 General, set Content Source Type:
  4. - Dynamic if your template uses tags like {product_name} or {cart_total} (Notifal pulls live data).
  5. - Static if the template has fixed text with no dynamic tags.
  6. Open the Template section and select your new template.
  7. 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
  • [ ] Set Content Source Type (Dynamic or Static) and selected template in Template section
  • [ ] Assigned the template to a notification and turned Status on

HTML Builder series

  1. Creating a Template with the HTML Builder (you are here)
  2. HTML Builder: Widgets and Structure
  3. HTML Builder: Buttons, Close Icon, and Click Tracking
  4. HTML Builder: Chat with Noti (AI)
  5. HTML Builder: AI Prompt Best Practices and Examples
  6. HTML Builder: Layouts and Use Cases
  7. HTML Sanitization and Allowed HTML

Other template editors

More in HTML Builder