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.
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.
When dismissed, the notification bar will slide up out of view. Set the transition duration to control the speed of the transition
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
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' )