University Marketing & Communications

Alert banner

The following is information on how to activate the UW Alert Banner on your Web site. Please note, this is not the same as the UW Alert System. The Alert System is responsible for SMS, e-mail, phone and other push-style notification options. While certain emergencies will require activation of both the UW Alert System and the Banner, they are separate entities.

When active, the banner displays a brief “alert” on any page where you’ve pasted the code (see the installation section below). The banner links to our emergency blog, which contains more details about the emergency or event that triggered the alert.  The blog also has links and resources that could be useful during non-emergency situations.

Color description

The banner is designed to display three different colors, depending on the type of alert.  Here are the general guidelines for when a certain color will be used.  The content of the alert will always provide a much better sense of the actual emergency than the color will.  Also, because events and emergencies are often in gray areas, similar alerts may be classified differently.

RED – High level emergency or threat

ORANGE – Medium emergency or threat

STEEL – Ideal for info posted between alerts like campus weather closures.

Installation

The banner will only show up on the page where you have put the code. If you want the banner to show on every page, then you’ll want to have your header and footer in an include or delivered via a content management system. The script is very lightweight and only contains a few lines of javascript.

NOTE: If you copy and paste the script make sure to replace the smart quotes with straight quotes.

Above the </body> tag:

<script src="//www.washington.edu/static/alert.js" type="text/javascript"></script>

That’s it!

Testing

To verify the banner will not disrupt any elements on the page, the test code is available below. The banner will display a color of your choosing and a brief message.

Append a #uwalert-red, #uwalert-orange, or #uwalert-steel to your pages URL.

Example:

Original URL: http://www.washington.edu/static/UW-Alert-Banner/
Test URL: http://www.washington.edu/static/UW-Alert-Banner/#uwalert-red