The OnPage Generate with AI wizard asks you to pick a display layout and a goal. In the HTML Builder, templates are layout-agnostic: mention popup, toast, or top bar in your Noti message (or use an empty-canvas chip), then set the real display type on the notification Appearance tab.
The layout you describe is a design guide for HTML width and structure. Corner placement and bar vs popup behavior come from Appearance.
Related: HTML Builder: Chat with Noti (AI) and Creating a Template with the HTML Builder.
Display layouts
Three layouts appear in the OnPage AI wizard. You can describe the same shapes to Noti in the HTML Builder. 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 | OnPage wizard, or your Noti brief | 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 |
Browse all use cases with real examples on notifal.com/use-cases.
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 |
Use these pairs as a starting brief for Noti or the OnPage wizard, 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 OnPage AI wizard apply to the imported draft. In HTML Builder, describe the same layout to Noti. The Block Editor uses a Template Container with column layouts instead. Elementor uses its own section and column system.
Checklist
- [ ] Mentioned layout in your Noti brief, or picked it in the OnPage wizard
- [ ] Picked a use case that matches your business goal
- [ ] 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: Widgets and Structure
- 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 (you are here)
- HTML Sanitization and Allowed HTML