HTML Builder

HTML Builder: Chat with Noti (AI)

7 min read

The HTML Builder uses a floating Noti chat (Notifal AI) to create and edit template HTML. Notifal 3.0.0 replaced the old one-shot popup wizard with this chat so you can keep refining the canvas in the same conversation.

Need a full notification (template plus appearance, timing, and display rules) instead of HTML only? Use Generate a Notification with AI on the OnPage Notifications list.

New to the builder? Start with Creating a Template with the HTML Builder. For stronger results, read AI Prompt Best Practices and Examples. Account setup: Connecting Your Notifal AI Account.

Chat vs OnPage wizard

SurfaceHow AI works
HTML BuilderFloating Noti chat. First message creates a template if the canvas is empty. Later messages edit the current HTML and apply it to the canvas.
OnPage Notifications listGuided wizard that imports a disabled draft (template plus settings).

There is no create vs edit chooser in the builder. Noti always works with whatever is on the canvas right now.

Open Noti

From the HTML Builder:

  1. Click Generate with AI in the top toolbar when the canvas is empty, or Edit with AI when the template already has content.
  2. On the welcome screen, click Generate with AI.
  3. Click the minimized Noti pill (bottom-right by default) if the chat is docked.

The chat docks bottom-right. You can drag it by the header, resize the panel, and minimize it back to a pill. Position and size are remembered for the current browser tab.

Connect once: If this site is not linked yet, Noti shows the passwordless Connect step inside the chat. Pro sites auto-link from the license. See Connecting Your Notifal AI Account.

Create a template (empty canvas)

  1. Open Noti.
  2. Describe the template in your own language (English is not required). Mention the offer, audience, buttons, tags, and style.
  3. Optionally click a suggestion chip (for example an exit-intent offer with email capture) and edit it before sending.
  4. Optionally attach up to 3 reference images (JPEG, PNG, WebP, or GIF, 2 MB each). Images stay in the browser until you generate. They are not saved to the Media Library.
  5. Click Send.

Noti applies the HTML to the canvas when the job finishes. Keep chatting for more changes, then Save or Publish.

Templates are layout-agnostic. Popup, toast, or top bar is set later on the notification Appearance tab. You can still mention a layout in the first message so Noti sizes the HTML appropriately. See Layouts and Use Cases.

Edit the current template

If the canvas already has HTML, every message is an edit of that HTML:

  1. Open Edit with AI or expand Noti.
  2. Ask for a change (for example "Add a countdown before the action button" or "Make the form UI match the rest of the template").
  3. Wait for the canvas to update. Use Undo in the builder if you want the previous snapshot.
Edit privacy: Your current template is sent securely to Notifal AI as context with each request. It is never returned in API responses to the browser.

While Noti is generating, canvas editing is paused so your clicks are not overwritten. You can Cancel from the chat. After apply, keep chatting, start a New chat, or close the panel.

Forms: Noti creates and connects them

When your prompt asks for lead capture (email signup, newsletter, quiz, and similar), Noti generates a Notifal Form in the template.

After the HTML is applied, the builder:

  1. Creates a Form CPT (same as Create & connect in the Form Content panel).
  2. Sets data-form-id on the form in the template.
  3. Syncs field names and types from the generated markup to that Form.

You then open Notifal → Forms to configure emails and integrations. Visual design stays in the builder.

PlanAuto-connect
FreeOne Form. Extra unbound forms stay disconnected until you connect an existing Form or upgrade to Pro.
ProMultiple Forms can be created and connected.

Ask Noti for a multi-step form when you want steps and Next/Back navigation. You do not need to build that markup by hand.

See Notifal Forms Overview.

Suggestion chips, images, and feedback

ControlWhat it does
Suggestion chipsOne-click starter prompts. Empty canvas shows create ideas. A template with a form shows form-aware chips (for example update the form UI).
Attach imagesUp to 3 reference images so Noti can match a look. Reference images use more credits.
Rate this responseMark a turn as good or needs improvement, with optional category badges and a comment.
New chatStart a fresh conversation when the thread gets long.

Paste HTML from another tool

Hosted Noti is the recommended path. If you generated HTML elsewhere:

  1. Click I have HTML on the welcome screen, or open View HTML.
  2. Paste a notification fragment only (no <!DOCTYPE>, <html>, or <body> wrappers).
  3. Click Load HTML.

After generation: tags and notifications

  1. Turn on Preview mode. Tags should show sample data, not raw {tag} text.
  2. Fix misspelled tags via Insert Tag if needed.
  3. For WooCommerce tags, enable them in Settings → Tags. See WooCommerce Setup.

Assign the template:

  1. Save the template.
  2. Go to Notifal → OnPage Notifications and open a notification.
  3. Set Content Source Type to Dynamic or Static in General.
  4. Select your template in the Template section.
  5. Turn Status on when ready.

Troubleshooting

ProblemWhat to try
Buttons do not workConfirm notifal-action-button and notifal-close-button classes.
Styles look wrong on siteAvoid position: fixed or z-index in CSS. See HTML Sanitization.
Tags show as plain textCompare spelling with Insert Tag; enable the tag category in Settings → Tags.
Connect step failsSee Connecting Your Notifal AI Account.
Result looks wrongSend a clearer follow-up, use Undo, or start a New chat.
Form is not storing submissionsConfirm data-form-id is connected. Free includes one Form. See the Form Content panel.
No generations leftWait for the monthly reset or upgrade your plan.

Checklist

  • [ ] Opened Generate with AI or Edit with AI and used the floating Noti chat
  • [ ] Connected the site (Free email code, or Pro auto-link)
  • [ ] Described the template or the edit in detail
  • [ ] (Optional) Attached reference images or used a suggestion chip
  • [ ] Confirmed forms were created and connected when you asked for lead capture
  • [ ] Verified tags show sample data in preview
  • [ ] Saved the template and assigned it to a notification

HTML Builder series

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

More in HTML Builder