When you use the AI Prompt in the HTML Builder, you pick a display layout and a use case. These choices tell the AI what shape and purpose your notification should have.
The layout you pick in the AI form is a design guide for HTML width and structure. The actual on-screen position (corner popup, top bar, etc.) is set later on the notification's Appearance tab.
Related: HTML Builder: AI Prompt Workflow and Creating a Template with the HTML Builder.
Display layouts
Three layouts appear in the HTML Builder AI picker. Each maps to a common notification display type.
| Layout | Also known as | Typical width | Best for |
|---|---|---|---|
| Floating Side Box | Toast | About 360 to 500 px | Social proof, quick alerts, small promos |
| Popup (Modal) | Popup | About 480 to 560 px | Sign-up forms, discounts, important messages |
| Floating Bar (Top Bar) | Top bar | Full width strip | Announcements, free shipping bars, cookie notices |
How layout connects to your live notification
| Step | Where | What you set |
|---|---|---|
| 1 | HTML Builder AI form | Layout guides the HTML design |
| 2 | Notification Appearance tab | Display type controls how Notifal shows it (popup, toast, top bar, etc.) |
| 3 | Notification Appearance tab | Position controls corner or edge placement |
Use cases
Use cases describe why the notification exists. They shape the AI's copy, call-to-action, and structure.
| Use case | What it is for |
|---|---|
| Increase Sales | Discounts, limited offers, product highlights |
| Grow Email List | Newsletter sign-ups, lead capture, multi-step opt-in |
| Boost Engagement | Encourage clicks, comments, or interaction |
| Build Trust and Social Proof | Recent purchases, reviews, visitor counts |
| Communicate with Visitors | Announcements, support messages, contact prompts |
| Recover or Retain Visitors | Exit intent, return offers, stay-on-page messages |
| Promote Social Channels | Follow us on social, share buttons |
| Content Blocking | Gate content until action is taken |
| Grow AOV | Upsells, bundles, "customers also bought" |
| Prevent Cart Abandonment | Cart reminders, checkout nudges |
Pick the use case closest to your goal. You can edit the AI text afterward in the builder.
Pattern examples (layout + use case pairs)
Notifal ships ready-made pattern examples that combine a layout with a use case:
| Pattern name | 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 |
Load a pattern from the AI Prompt panel, then adjust industry, goal, and colors.
Practical examples
Recent purchase popup (WooCommerce)
- Layout: Floating Side Box or Popup
- Use case: Build Trust and Social Proof
- Template tags:
{product_name},{order_meta__billing_city} - Notification Appearance: Toast or Popup, bottom corner
See WooCommerce Setup for Notifal for tag setup.
Free shipping top bar
- Layout: Floating Bar
- Use case: Communicate with Visitors
- Notification Appearance: Top bar, full width
Exit intent discount
- Layout: Popup
- Use case: Recover or Retain Visitors or Increase Sales
- Notification Timing: Exit intent trigger
Layout tips for clean designs
| Do | Avoid |
|---|---|
| Design content to fit the layout width | Hard-coding position: fixed or z-index in template CSS |
Use one inline <style> block in HTML | External stylesheets or @import |
Use notifal-* class names for buttons and images | Full page HTML wrappers |
| Match AI layout to planned display type | Mixing a narrow toast HTML with a full-screen popup setting |
Details on allowed CSS: HTML Sanitization and Allowed HTML.
Other editors
Layout presets in the AI form apply to the HTML Builder. The Block Editor uses a Template Container with column layouts instead. Elementor uses its own section and column system.
Checklist
- [ ] Chose a display layout that matches your planned notification type
- [ ] Picked a use case that matches your business goal
- [ ] Loaded a pattern example if you want a faster start
- [ ] Set notification Appearance display type to match the HTML design
- [ ] Previewed on desktop and mobile before going live
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
- HTML Builder: Layouts and Use Cases (you are here)
- HTML Sanitization and Allowed HTML