This article details how to display 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 that needs no code, Page Pops display a dismissible alert across all selected pages on any device.
💡 Quick answers
- 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.
- Where does the announcement 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. Nothing already in the field may be deleted or edited; other tools on the site depend on those entries.
- Can the banner text and link be customized before pasting? Yes. Download the provided code snippet and update the covidText and covidLink values before pasting it into the theme.
- Does the banner need to be added more than once? External Assets is set per theme. A site running several themes, such as a separate athletics theme, needs the snippet added to each one, and each domain has its own themes.
- What should be checked if the banner does not display properly on a fixed-header site? Submit a Support request. Sticky or fixed headers may require adjustments by the Finalsite team.
In this article
- Quick solution: Display a page pop
- Prepare the code configuration
- Add the customized banner to every domain
This article outlines the options available to districts that need to display important information across all domains' headers at once.
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.
The text file attached to this article contains the snippet. Update the background, text, and link colors as needed, and update the link to point to a specific page.
⚠️ Important Note
- This uses the same code as a COVID or emergency banner that may already be in place. The two may not display properly together.
- On a site with a sticky or fixed header, the banner may not display properly. 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 example banner attached below.
-
Step 2: Update the highlighted sections. Modify the bolded
covidTextcontent between the double quotes to change the header text, and the boldedcovidLinkcontent 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 cannot break the page design. External Assets writes to the head section only. Deleting the added snippet and clicking Update restores the previous state.
- The banner appears only 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 has not been granted. Refresh the page first. Access is granted by the implementation team at launch. 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.
Comments
Please Sign in to leave a comment if you don't see the comment box below.