Adding a Custom Global Header

Hon Lin

Last Updated: October 18, 2023 18:23

Custom Banner 1.png

Customers now have the ability to inject their own custom global banner that will be shown at the top of all pages for all users of the application, whether logged in or not. This allows government users to add “An agency of xxxx” to all pages on their domain (see example above). See local regulations to determine whether or not this is legally required in your jurisdiction.

Custom Banner 2.png

How it works:

The feature is accessed via Site Appearance → Header tab. The new input is called Global Header Banner HTML and will accept HTML, CSS and Script tags. Any input in this control is implicitly trusted as safe and will be injected into a specific "<section>" element in the header for all pages.

<div id="custom-global-banner">
   <%= custom_banner_content %>
   <div id="custom-banner-anchor"></div>
</div>

It is imperative that the content is placed here as all css formatting for the banner is based around this element. Any input that is entered into the Global Header Banner HTML control will be placed inside this container. In the case of raw html and css, no further steps are necessary. The banner should display as desired (see below for the Mass banner example). In instances where the customer wants to inject a banner that is generated from a javascript file, additional steps may be necessary (see the Virginia banner example below). Any input entered for the custom banner is validated to ensure it is valid HTML.

Special Considerations

Javascript or raw HTML? Example Notes

Javascript Example

Injecting a banner via javascript for the State of Virginia)

Ex. The state of Virginia has developed their own javascript file that will generate and inject their banner into a web page. By default it will look for the body element on in the HTML document and attach it there. This will not work for our site. The html for the banner

MUST be placed inside the custom-global-banner div we have created for this purpose. Fortunately, this script has an input that allows us to specify an element id to attach the banner to instead of the body. We have created the custom-banner-anchor for this purpose.

https://www.developer.virginia.gov/downloads/commonwealth-banner/

Raw HTML Example

Injecting a banner with raw HTML for the State of Customer

Ex. A customer has created a custom banner which is raw HTML. We have templetized it to provide an example. Inputting HTML into Site Appearance is simple and straight forward. A user should copy their code directly into the “Global Header Banner HTML” field highlighted above.

(Note: the example code is for demonstration purposes only and will not work on a live customer domain)

<div class="{your agency}__header_slim">
  <div class="{your agency}__header_slim__utility">
    <div class="{your agency}__header_slim__utility-container {your agency}__container">
    </div>
  </div>
  <header class="{your agency}__header_slim__header" id="header">
    <div class="{your agency}__header_slim__header-container {your agency}__container">
      <div class="{your agency}__header_slim__logo">
        <div class="{your agency}__site-logo">
          <a href="{link to homepage/website}" title="{homepage/webiste name">
            <img 
              class="{your agency}__image"
              src="{Image URL}"
              alt="{image description}"
              width="45"
              height="45"
            />
            <span>{URL of Agency}</span>  
          </a>  
        </div>
      </div>
    </div>
  </header>
</div>
<link  rel="stylesheet"  href={Image URL} />

FAQ

Adding a Custom Global Header

How it works:

Special Considerations

Javascript Example

Raw HTML Example

FAQ

Comments

Articles in this section