Pro Alert

Add multiple-purpose alert boxes to your pages, either to be fixed to the viewport or added inside page content. Control if/when to show them again to returning visitors.

Reshow Alert

Out of the box the alert will just show where you place it, however you can prevent it 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 alert will be visible each time the user visits the page.

Show again until user clicks dismiss – The alert will continue to show unless the user clicks the built-in close icon. After that, anytime they visit the page they won’t see the same alert box.

Never show again – This will strictly never show the same alert to the same user, only on the very first visit.

Only show after: Set the number of days and hours that need to pass before the alert would be allowed to be shown to the same user. After that time passes, the trigger goes back to doing what it did the first time they visited.

Positioning

Choose between either placing the alert inline on the page (default) or fixed to the viewport.

Alert Content

These are the possible sources for the alert content:

  • Editor
  • Add Elements (coming soon)

Developer Docs: Triggering & Events

You can show/close the alert box programmatically in JS with the xShowAlert() and xCloseAlert() functions.

Just pass in the selector of your Pro Alert element, eg if the alert ID is alert-1:

xShowAlert( '#alert-1' )

The alert also triggers events when opening and closing. You can listen for the events x_alert:show and x_alert:close to run your code as they happen.

Sample code:

const alert = document.getElementById('alert-1')

alert.addEventListener("x_alert:show", function() {
 // do something here when alert is seen by user
})

alert.addEventListener("x_alert:close", function() {
 // do something here when alert has been dismissed
})