Notifal 3.0.0 adds a Widgets palette and drag-and-drop organization to the HTML Builder. Widgets insert useful HTML quickly, while Structure remains the complete element tree for your template.
Widgets do not lock your design into a separate format. The saved template is still normal HTML, and you can keep using View HTML or the selected element's HTML tab whenever you need full control.
New to the builder? Start with Creating a Template with the HTML Builder.
Structure and Widgets tabs
The left panel has two tabs:
| Tab | Purpose |
|---|---|
| Structure | View, select, reorder, nest, duplicate, copy, or remove every editable HTML element |
| Widgets | Insert ready-made HTML elements and Notifal features |
When Notifal recognizes widget HTML, its Structure row shows a small widget badge. Regular HTML without a widget badge remains fully supported.
Built-in widgets
| Category | Widget | Purpose |
|---|---|---|
| Basic | Heading | Add an editable h2 headline |
| Basic | Paragraph | Add editable body copy |
| Basic | List | Add a three-item benefit or steps list |
| Media | Image | Add a static image, then choose its URL or use Media Library |
| Media | Featured Image | Add the dynamic featured image for the current product, post, or page |
| Actions | Button | Add a tracked Notifal action button |
| Actions | Close Button | Add a control that dismisses the notification |
| Actions | Countdown | Add a Notifal countdown (evergreen, due date, or product sale date) |
| Actions | Form | Add a Notifal Forms lead form with data attributes |
| Layout | Divider | Add a horizontal divider |
| Layout | Spacer | Add adjustable vertical space |
For button behavior and tracking, see HTML Builder: Buttons, Close Icon, and Click Tracking. For Forms fields, steps, and settings, see the Forms documentation.
Insert a widget with one click
- Open Structure and select the container that should receive the widget.
- Open Widgets.
- Click the widget you want.
The widget is inserted inside the selected element. If the template is empty, Notifal creates the initial document structure and inserts the widget into it.
Drag a widget to an exact location
Drag a widget from the palette onto a row in the compact Structure tree.
The row is divided into three drop areas:
| Pointer position | Result |
|---|---|
| Top edge | Insert before the target |
| Middle | Insert inside the target |
| Bottom edge | Insert after the target |
A purple line shows before or after placement. When nesting inside a container, the target receives a highlighted outline and an Inside label.
Elements such as img, hr, and input cannot contain children. For these elements, Notifal offers before or after placement instead.
Reorder or nest existing elements
You can also drag rows directly in Structure:
- Drag the row for the element you want to move.
- Hover over another row.
- Use the insertion line for before or after, or the highlighted middle area for inside.
- Release to move the element.
The selected element stays selected after the move. Notifal prevents moving an element into itself or one of its own descendants.
Right-click menu (Structure)
Right-click a Structure row to open the context menu:
| Action | What it does |
|---|---|
| Copy | Copy the element's HTML fragment |
| Paste | Paste the copied element as the first child inside the target (disabled until you copy) |
| Copy styles | Copy inline styles from the element and its descendants |
| Paste styles | Apply copied styles onto the target (disabled until you copy styles) |
| Duplicate | Insert a copy of the element next to the original |
| Remove | Delete the element |
Keyboard remove
- Select the Structure row and press Delete or Backspace.
- Delete and Backspace do not remove an element while you are typing in an input, textarea, or other editable field.
Edit widget settings
Select a widget in Structure or on the canvas, then use the right panel.
| Widget or element | Useful controls |
|---|---|
| Heading, paragraph, list | Content text and Typography styles |
| Image | Image URL or Media Library, size, and object fit |
| Featured Image | Dynamic image size and border radius |
| Button | Label, action type (copy, Ajax add to cart, custom trigger, and more), typography, background, spacing, and size |
| Close Button | Close control content and styles |
| Countdown | Type, duration or due date, visible units, labels, completion behavior, gap, alignment, and radius |
| Form | Form CPT connection, multi-step, success message/redirect, captcha mode |
| Form field | Field name/type, required, unique, regex, conditionals |
| Spacer | Height |
| Layout containers | Flex direction, alignment, gap, wrapping, and Items |
If an element uses a CSS gradient, choosing Background Color replaces that gradient with a solid color. Notifal shows a note before making this change.
Countdown types
Select a countdown widget, then open Content.
| Type | How the timer runs |
|---|---|
| Evergreen timer | Duration you set (days, hours, minutes, seconds). Starts when the notification is shown. |
| Due date | Counts down to a date and time in the site timezone. |
| Product sale date | Uses the product sale end date when the notification has a product. |
You can show or hide units and set custom labels. When the timer ends, choose Keep showing 00:00, Hide the timer, or Close the notification.
Forms in the builder
Insert a Form widget, or ask Noti to add a lead form.
- Connect an existing Form, or use Create & connect.
- When Noti generates a form, it can create the Form CPT and bind
data-form-idautomatically. - Emails and integrations stay on Notifal → Forms. Design stays on the canvas.
Widgets and custom HTML work together
Widgets are shortcuts, not restrictions:
- You may edit widget markup in the HTML tab.
- You may paste or write any allowed custom HTML.
- AI-generated HTML can mix recognized widgets with custom layout markup.
- The
data-notifal-widgetattribute identifies a widget to the builder; frontend behavior still comes from the HTML and Notifal classes.
For readable and editable templates, put copy in semantic text elements such as p, span, headings, links, and buttons. Use div or section primarily for layout.
Good structure:
<div class="notifal-alert-row">
<span class="notifal-alert-icon" aria-hidden="true">!</span>
<span>Only {stock_quantity} left in stock!</span>
</div>Avoid mixing all copy directly into a layout container:
<div class="notifal-alert-row">! Only {stock_quantity} left in stock!</div>Widgets generated by AI
Noti includes the registered widget structures. When a widget fits the request, the HTML can contain data-notifal-widget so Structure shows a widget badge.
AI may still use free HTML when no widget fits. This is expected.
See HTML Builder: Chat with Noti (AI).
Troubleshooting
| Problem | What to check |
|---|---|
| Click inserted the widget in the wrong place | Select the intended parent in Structure first, or drag the widget for exact placement |
| No Inside drop area appears | The target cannot contain children; use before or after |
| An element cannot be dropped | You may be trying to move it into itself or one of its own descendants |
| Paste or Paste styles is disabled | Copy an element or copy styles first |
| Widget badge disappeared after editing HTML | Keep data-notifal-widget="widget-id" on the widget's root element |
| Button or countdown is visible but does not work | Keep the required Notifal class and data attributes; see the button guide |
| Gradient still shows | Choose Background Color to replace the gradient with a solid color |
What to read next
HTML Builder series
- Creating a Template with the HTML Builder
- HTML Builder: Widgets and Structure (you are here)
- 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