How can I make the alert banner on the LibGuides A-Z page schedulable and dismissable?

Answer

Similar to our setup in Primo VE, we can make the alert on the LibGuides A-to-Z page schedulable, so it starts and ends showing on designated days. We can also make it dismissable, which is good practice to accommodate users who don't want to see it.

Note that some of this depends on our setup at Los Rios so will not be usable by other institutions without some adaptation.

Process

Go to A-Z Databases -> Alerts & Announcements -> A-Z Announcements.

  1. In the Alert Text editor, enter your alert text. (We always leave Alert Title blank.)
  2. Switch the editor to Source.
  3. Wrap the text in a div with id lr-alert.
  4. Add any or all of the following attributes to the lr-alert div:
    • data-start - this is the first day that the alert will start showing. If you omit this, it will show immediately.
    • data-end - this is the last day that the alert will show. If you omit this, the alert will continue to show indefinitely
    • data-cookie - this is the name of the cookie that will be set when a user dismisses the alert. If you omit this, a cookie will still be set, but it will have a default name
    • data-hide - the number of days that the cookie is set for. If you omit this, it will be set for 14 days. In general you'd want the cookie to be set for as long as the alert will be active, so a user who dismisses it doesn't see it again.
  5. Click the Save Changes button.

It's a good idea to switch away from Source and back again to ensure that the editor didn't make changes to the data you entered.

Here is an example of what an alert of this type would look like:

<div id="lr-alert" data-start="2024-06-19" data-end="2024-06-19" data-cookie="maintenance" data-hide="1">
    <p>
        Access to databases may be interrupted during district network maintenance.
    </p>
</div>

Note that the date format must be YYYY-MM-DD.

In the above example, the alert will show for just one day. We only set the cookie for one day because it's not necessary for it to be there longer.

Underlying code

We are using a custom header in our A-to-Z and hiding the default header area where the admin box normally appears. Before going live, we had already added some JavaScript to move the box to the top of our custom header. So we now modify that JavaScript to enable the scheduling. The modified code checks if

  • today is the day or past the day designated as the start day
  • today is not past the day designated as the end day
  • a cookie is not set indicating the banner should not be shown.

If it passes these tests, i.e. it's within the window of showing and a cookie is not found, only then does the script move the alert to the proper area so that it displays.

The code also adds a button to the alert and sets a listener which, if the user clicks the button, removes the alert and sets the cookie.

The JavaScript is included in our private repository. The following elements need to be added to each college's JS customization file:

  • abbr constant at top of file
  • lrSetCookie and lrGetCookie functions
  • block of code marked as "alert box customization"

Once you add the code, the "dismiss" button will appear on alerts. If you then use the data elements as described above, scheduling alerts will be possible.

Here is the relevant code as it exists at time of publishing:

 

Topics

  • Last Updated Sep 05, 2024
  • Views 9
  • Answered By Jeff Karlsen

FAQ Actions

Was this helpful? 0 0