To promote efficient, consistent communication on all UB sites, select UBCMS content can be included on non-UBCMS sites.
Last reviewed: April 8, 2022
Adding this content to your site outside of UBCMS will require the knowledge and ability to edit your site's HTML templates. A developer's skill set is required
Automatically display a yellow Issues Communications banner on your site to communicate ongoing, university-wide concerns (e.g. COVID-19). For UBCMS websites, this is normally displayed in the upper header.
The banner requires jQuery. The latest version (3.4.1) is recommended, but any version will probably work. If you do not have jQuery on your page, you can add this to the HTML of your page:
Once you have jQuery, add this script tag to the page HTML anywhere after the jQuery tag:
You probably want the banner on every page of your site, so you will need to add these tags to every page, such as adding it to your site header's 'include' files.
You can treat this code as evergreen and keep it on your pages after the COVID-19 communication ends; we will likely repurpose the same channel for future similar communications.
If you need to load the banner in a specific location in the page other than the top of the <body> add an empty <div class="long-term-alert-banner"></div> element in the page where you'd like the banner to be inserted. You should test that your page looks ok with that element but without the banner filled in in case the banner is turned off. (For example, keep the <div> but remove the <script> temporarily.)
To test a version of the callout banner with alternate content if the real banner is not currently in use (not visible), add this before the long-term-alert-banner.js <script> tag:
An orange callout with the latest headlines on UB's COVID-19 site. For UBCMS websites, this is located in /content/shared/www/coronavirus/modules/audience-pages and deployed with a Shared Content Reference.
To add the Coronavirus callout to a page, add this code to your site's HTML where you would like the callout to appear:
The callout will be the width of its container and as tall as it needs to be to contain its content. It will resize if the browser window is resized. The callout does not require jQuery.
You should keep track of where you add this callout so that it can be removed when Coronavirus communications wind down. It will not disappear on its own like the banner.