This article details how to display a Priority Alert Banner, a full-width announcement banner across all domain headers in Finalsite Composer, including how to customize the code snippet and where to paste it in the Theme's External Assets field. For a faster option without code, page pops display a dismissible alert across all selected pages on any device.
💡 Quick answers
- When is a Priority Alert Banner the right choice? When a short, urgent message needs to appear at the top of every page, such as a weather closure, a safety update, a facility outage, or a mark of respect. The banner links to a page with the full details.
- What is the quickest way to display urgent information across all domains? Use a page pop. It appears across all selected pages on desktop, tablet, and mobile, and visitors must interact with it before doing anything else on the page.
-
Which code file fits the site? Use
alert-banner.txtfor one banner color across every domain. Usealert-banner-locations.txtwhen each domain should display its own primary color. - Where does the Priority Alert Banner code go in Composer? In the Themes section, click the site theme, then paste the snippet into the External Assets field and click Update to apply it to all pages using that theme.
- Where in the External Assets box does the snippet go? Above any code already in the box. Existing entries stay in place; other tools on the site depend on those entries.
-
How are the banner text and link customized? Download one of the two provided code snippets and update the
alertTextandalertLinkvalues before pasting it into the theme. - How many times is the banner added? External Assets is set per theme. A site running several themes, such as a separate athletics theme, receives the snippet in each one, and each domain has its own themes.
- Who handles the banner display on a site with a fixed header? The Finalsite team. Sticky or fixed headers may require adjustments, so submit a Support request.
In this article
- When to use a Priority Alert Banner
- Quick solution: Display a page pop
- Prepare the code configuration
- Add the customized banner to every domain
When to use a Priority Alert Banner
A Priority Alert Banner is a full-width bar across the top of every page in a site header. It carries one short message and a link to a page with the full details, so urgent news reaches visitors on every page they open
Real-world scenarios
A Priority Alert Banner fits any short, time-sensitive message that every visitor should see right away. In each example, the message goes in alertText and the page with the full details goes in alertLink:
- Weather closures and delays. A message such as "Schools are closed Thursday due to winter weather" links to the district's closure page.
- Safety and emergency updates. A message such as "Safety update for the Lincoln campus" links to the page where the district posts official information.
- Facility or system outages. A message such as "District phone lines are down; email the main office" links to the contact page.
- Marks of respect. A message such as "In memory of a beloved member of our community" links to a tribute page.
- District-wide schedule changes. A message such as "Graduation has moved to the Main Gym" links to the updated event details.
- Urgent deadlines. A message such as "Enrollment closes Friday" links to the enrollment page.
For a message that visitors must acknowledge before using the page, a page pop is the better fit.
Quick solution: Display a page pop
For a quick solution, page pops are a built-in feature that display the information in the headers and link from there to a more centralized page or hub.
The benefit of a page pop is that visitors must interact with it before doing anything else on the page, since the background is grayed out. A page pop also displays consistently across desktop, tablet, and mobile devices.
Prepare the code configuration
A full-width banner in the header requires a small code snippet, customized before it is inserted onto the site. Two code files are available, and the right one depends on how the banner color should behave across the district's domains:
-
alert-banner.txtapplies one set of colors to every domain. The snippet includes background, text, and link color settings with hex codes, such as black for a mark of respect or red for an emergency. Use it when the banner should look the same on every site. -
alert-banner-locations.txtpicks up each site's own primary color for the background, with white text and a white link, so no color edits are needed. Use it when domains or locations have their own brand colors and each should display its own. [confirm when to use the locations file]
In both files, update the banner text and the link to point to a specific page.
⚠️ Important Note
- This uses the same code as an emergency or alert banner that may already be in place. The two may display inconsistently together.
- On a site with a sticky or fixed header, the banner display may need adjustment. Submit a Support request so the Finalsite team can investigate.
Add the customized banner to every domain
Follow these steps to add a customized version of the banner to a Composer site.
-
Step 1: Download the banner file that fits the site. Use
alert-banner.txtfor one custom color across every domain, oralert-banner-locations.txtwhen each domain should display its own primary color.
Download alert-banner.txt Download alert-banner-locations.txt -
Step 2: Update the highlighted sections. Modify the bolded
alertTextcontent between the double quotes to change the header text, and the boldedalertLinkcontent between the double quotes to change the link. - Step 3: Copy the entire snippet.
- Step 4: Go to the Themes section of the Composer navigation and click the theme for the site.
- Step 5: Scroll to the External Assets box. Drag the handle in the bottom right corner to expand it.
- Step 6: Click at the very beginning of the first line already in the box, paste the snippet, then press Enter so the existing entries move down to their own line. New code always goes above existing code.
- Step 7: Click Update in the bottom right corner of the screen, then publish the homepage.
- Step 8: Repeat steps 4 through 7 for every additional theme applied to pages on the site, such as an athletics theme, and for every domain that should display the banner.
⚠️ Important Note
- Add the banner snippet above any existing code. Place the cursor at the very top of the box and paste there, so the existing entries move down.
- Never delete or edit existing entries. Other tools on the site depend on them. Removing a line that another service relies on takes that service offline.
- Adding code here keeps the page design intact. External Assets writes to the head section. Deleting the added snippet and clicking Update restores the previous state.
- The banner appears on pages using a theme that has the snippet. Repeat the steps on every theme and every domain that should display it.
- A grayed-out field means access is granted by the implementation team at launch. Refresh the page first. If the field is still grayed out, contact the Project Management Team.
For the full procedure and a list of other services that use this field, see Adding third-party code to your site.