Notification variants: top bar, popup, toast, tooltip

Choose how a notification is presented and when to use each variant.

The variant defines how a notification looks when a visitor sees it. You choose one variant per notification. In the editor you can click the eye icon next to a variant to preview it.

Variant	How it appears	Good for
Top bar	A bar at the top of the page.	Short, site-wide announcements: maintenance windows, promotions, important notices.
Popup	A modal window covering the page.	Big launches and changes that need attention.
Toast	A small message in the lower left corner.	Light-touch news and tips that should not block the page.
Tooltip	A tooltip next to the update button of the widget.	Pointing visitors to the widget when something new is inside.

The widget

Independently of the variant, notifications with the Widget channel are listed in the widget opened from the bell on your site. Header copy (default “What’s new?”), the Published date prefix and shared Read post / Open labels live under Notifications → Translations. Colors, font sizes and shadow are set under Notifications → Appearance. Individual notifications can override item-level colors when you turn off “Use account defaults”. Opening that widget is what marks notifications as seen for Targeting.

Attaching the button to your own element

In the notification bell settings you can choose a custom CSS selector for an element already on your page. Visitors then click your own element to open the panel. You can also change the trigger background and icon colors.

Choosing a link target

The variant’s button reads “Read Post” and opens the notification’s page on app.hubbo.io. If you set a Custom URL on the notification, the button reads “Open” and goes to your URL instead. Default wording for both CTAs (and the widget header / Published prefix) is set under Notifications → Translations; each notification can still override Read post / Open on its own Translations tab. The same custom URL is used when a visitor clicks a notification in the bell panel. The panel has no “Open Chat” button; discussion happens on the notification page, and you can close the panel with the Escape key.

Stacking when several are visible

Hubbo does not queue notifications, NPS or surveys. When several are visible at once they stack in a fixed order, highest first: popup, survey, NPS, then top bar / toast, then tooltip and the bell. A popup therefore covers everything else. See Install with the HTML snippet for how this interacts with your own page.

Tips

Use popups sparingly: they interrupt the visitor.
Keep top bar text to one line.
The preserve option makes a notification show on every visit even after it has been closed. Combine it with a top bar for ongoing notices.
Check popups and toasts on mobile in the preview before publishing.