The HTML Builder includes an AI Prompt helper. You describe what you want, Notifal builds a detailed prompt, you paste that prompt into an external AI tool (ChatGPT, Claude, etc.), then paste the returned HTML back into the builder.
You stay in control: Notifal does not call AI services directly. You choose which AI tool to use.
New to the builder itself? Start with Creating a Template with the HTML Builder.
When AI helps most
| Situation | AI workflow helps |
|---|---|
| You know the goal but not the HTML | Yes |
| You want a starting layout fast | Yes |
| You already have finished HTML | Use I have HTML instead (no AI needed) |
| You use Elementor or blocks | Try those editors: Block Editor or Elementor |
Step 1: Open the AI Prompt panel
From the HTML Builder:
- Click AI Prompt in the top toolbar, or
- On the welcome screen, click Generate with AI
The AI form opens with fields to describe your notification.
Step 2: Pick layout and use case (optional)
These choices guide the AI toward the right shape and copy style.
Display layout
| Layout | Best for |
|---|---|
| Floating Side Box | Quick messages, social proof sliding in from the side |
| Popup (Modal) | Forms, important offers, center-screen focus |
| Floating Bar (Top Bar) | Site-wide announcements, promo strips |
Full details: HTML Builder: Layouts and Use Cases.
Use case
Pick the goal closest to yours, for example:
- Increase Sales
- Grow Email List
- Build Trust and Social Proof
- Recover or Retain Visitors
- Prevent Cart Abandonment
Each use case includes guidance text that shapes the AI's tone and call-to-action.
Step 3: Load a pattern example (optional)
Click Load example to fill the form with a starter pattern. Notifal includes patterns such as:
| Pattern | Layout | Use case |
|---|---|---|
| Popup for cart recovery | Popup | Recover or retain visitors |
| Side box for social proof | Floating Side Box | Build trust and social proof |
| Top bar announcement | Floating Bar | Grow email list |
| Popup for discount | Popup | Increase sales |
| Side box for contact | Floating Side Box | Communicate with visitors |
| Multi-step opt-in popup | Popup | Grow email list |
Patterns are starting points. Edit the fields to match your brand.
Step 4: Fill in your details
| Field | What to write |
|---|---|
| Industry | Your business type (e.g., fashion store, SaaS, restaurant) |
| Goal | What the notification should achieve (be specific) |
| Primary color | Your brand color (used in the AI design) |
The more specific your goal, the better the AI result.
Step 5: Copy the prompt and run it in your AI tool
- Click Copy prompt in the builder.
- Open ChatGPT, Claude, or another AI chat tool.
- Paste the prompt and send it.
- Wait for the AI to return HTML.
The prompt tells the AI to output a notification fragment only (no full page), with Notifal-friendly classes like notifal-action-button and notifal-close-button. See HTML Builder: Buttons, Close Icon, and Click Tracking.
The AI may also suggest Notifal notification settings (timing, display rules, appearance). Use those as ideas when you configure the notification later.
Step 6: Paste HTML into the builder
- Copy the HTML the AI returned.
- In the HTML Builder, open the paste dialog (I have HTML or View HTML).
- Paste the code and click Load HTML.
- Review the design in the canvas. Adjust styles in the right panel if needed.
- Click Save or Publish.
<!DOCTYPE> or <body> tags, remove them. Only the inner notification markup should be pasted.Step 7: Add tags and assign to a notification
- Click Insert Tag to add dynamic text like
{product_name}or{cart_total}. - Save the template.
- Assign it to a notification under Notifal → OnPage Notifications.
For WooCommerce tags, enable them in Settings → Tags first. See WooCommerce Setup for Notifal.
AI output and import JSON (advanced)
The AI prompt can also describe a full notification export (template plus settings) in JSON format. That format is mainly used when generating complete notifications from the OnPage Notifications screen, not only a standalone HTML template.
For HTML Builder work, you typically need only the HTML fragment from the AI response.
Troubleshooting
| Problem | What to try |
|---|---|
| AI returned a full web page | Remove <html>, <head>, and <body>. Keep only the notification markup and <style> block. |
| Buttons do not work | Confirm the HTML uses notifal-action-button and notifal-close-button classes. |
| Styles look wrong on site | Avoid position: fixed or z-index in your CSS. Notifal handles placement. See HTML Sanitization and Allowed HTML. |
| Tags show as plain text | Insert tags via Insert Tag or type them exactly, e.g. {product_name}. |
Checklist
- [ ] Opened AI Prompt in the HTML Builder
- [ ] Chose layout and use case (or loaded a pattern)
- [ ] Filled industry, goal, and primary color
- [ ] Copied prompt to external AI and received HTML
- [ ] Pasted HTML fragment into the builder (no full page wrapper)
- [ ] Added tags, saved, and assigned template to a notification
What to read next
HTML Builder series
- Creating a Template with the HTML Builder
- HTML Builder: Buttons, Close Icon, and Click Tracking
- HTML Builder: AI Prompt Workflow (you are here)
- HTML Builder: Layouts and Use Cases
- HTML Sanitization and Allowed HTML