Display type is the biggest visual choice for your notification. It controls the overall shape and how it sits on the page.
Open a notification → Appearance tab → Display Type. See Notification Editor Tabs Overview if you need help finding the editor.
Display types in the editor
Notifal offers four display types when Notifal Pro is active (three in Free):
| Display type | Also called | Best for |
|---|---|---|
| Floating Side Box | Toast | Quick alerts, social proof, small messages in a corner |
| Popup (Modal) | Popup | Important offers, forms, messages that need full attention |
| Floating Bar (Top Bar) | Topbar | Site-wide banners, announcements, promo strips |
| Inline (in content) | Inline | Banners and messages embedded inside page content (Pro) |
When you change the type, the description under the dropdown updates to explain the choice.
Floating Side Box (Toast)
A compact box that slides in from the side of the screen.
Good for:
- "Someone just bought…" social proof
- Short confirmations and tips
- Messages that should not block the whole page
Position options: corners and center on desktop; top, bottom, or center on mobile. See Position and Device Visibility.
Popup (Modal)
A centered dialog with a backdrop (dimmed overlay behind it).
Good for:
- Exit-intent offers
- Newsletter signups
- Any message where you want the visitor to focus
Extra settings appear when Popup is selected:
- Backdrop Background Color (supports transparency)
- Backdrop Blur (soft blur behind the popup)
Position is always centered. You do not pick a corner for popups.
Floating Bar (Top Bar)
A full-width bar that slides in from an edge (usually the top).
Good for:
- Free shipping banners
- Cookie or policy notices
- Limited-time sale strips
Extra settings:
- Bar position: top, bottom, left, or right (desktop and mobile)
- Floating Bar Placement , fixed on top of everything vs above your site header. See Topbar Above Header (Theme Compatibility).
Inline (in content) — Pro
Renders inside your page flow instead of floating over the viewport. Timing, behavior, content source, and tracking work the same as other display types.
Good for:
- Product page upsells below the Add to Cart area
- In-content banners inside blog posts or landing pages
- WooCommerce checkout or thank-you messages in context
Placement options:
- Shortcode — copy
[notifal-onpage-notification id="123"]into a page builder, widget, or theme template - Automatic placement — pick a curated location (WooCommerce product, cart, checkout, thank you, or before/after content)
See Inline On-Page Notifications (Pro) for the full guide.
Which type should I pick?
| Your goal | Suggested type |
|---|---|
| Subtle social proof | Floating Side Box |
| Strong call to action or form | Popup |
| Announcement across the whole site | Floating Bar |
| Message inside page content or WooCommerce templates | Inline (Pro) |
You can change the display type anytime. Save and preview to compare.
Display type and animations
Each type works with entry and exit animations (fade, slide, bounce, etc.). See Animations and Transitions.
Checklist
- [ ] Opened Appearance → Display Type
- [ ] Chose Side Box, Popup, Bar, or Inline (Pro) based on my goal
- [ ] Adjusted position settings for my chosen type
- [ ] Previewed on desktop and mobile
What to read next
Appearance series
- Display Types: Toast, Popup, Topbar, Floating (you are here)
- Position and Device Visibility
- Animations and Transitions
- Custom CSS for Notifications
- Notification Audio
- Topbar Above Header (Theme Compatibility)
- Inline On-Page Notifications (Pro)