Notification Bar

This element provides a simple way to add a dismissable notification bar to your header. The notification will slide up when dismissed with options on if/when to reshow the notification to the same user. Ideal for bringing attention to current promotions etc.

Adding the Notification Bar

The notification bar should be placed above your other content inside of your header template.

Note – if using Bricks v1.5 experimental feature, ‘Add Element ID & class as needed’, make sure to add an ID to the notification bar as it’s needed for it to function. Either create a custom ID, or simple add styles to the element (for eg a background colour) using the ID instead of a class, this will ensure the ID is always output.

Reshow Notification

Choose prevent the notification from being shown again to the same user based on if they have seen it before or if they have dismissed it already.

Show again on next visit – The notification will be visible each time the user visits the page.

Show again until user clicks dismiss – The notification will continue to show unless the user clicks the dismiss button. After that, they won’t see the notification.

Never show again – This will ensure never the user only sees the notification once

Only show after: Set the number of days and hours that need to pass before the notification would be allowed to be shown to the same user.

Slide up

When dismissed, the notification bar will slide up out of view. Set the transition duration to control the speed of the transition

Dismiss Button

You can customise the dismiss button, add text, style it how you want.


Developer Docs: Manual Triggering

You can also show/close the notification bar programmatically in JS with the xShowNotification() and xCloseNotification() functions.

Just pass in the selector of your Notification element, eg if the element’s ID is my-notification-bar, to show it inside your JS code you’d add this;

xShowNotification( '#my-notification-bar' )