Setting up dynamic header and footer integration

How to set up dynamic header and footer integration for your Newsroom

During the onboarding process our Newsroom developers create a template based on the styling of your website, so the Newsroom completely blends in with the look and feel of your main corporate website.

Part of this process is re-creating the header and footer of your main site. A drawback of this method however is that your header and/or footer may change over time, and as a consequence, the header or footer of the newsroom will have to be changed accordingly. It's a bunch of extra work for everyone involved.

Another method is dynamic header and footer integration. With this method, you can update the header / footer on your main website and these changes will be reflected on the newsroom immediately.

In order for us to implement this properly, we will need to receive a standalone header, footer and library file. In practice, this means that you'll need to provide us with an online URL to a header.html, a footer.html and a head.html file. e.g. https://example.com/assets/header.html and so on.

• The header.html file contains the header of your website, typically containing menus and navigation
• The footer.html file contains the footer of your website
• The head.html file contains all the necessary stylesheets (CSS) and Javascript that are needed to run the header and footer functionalities.

The HTML files should not contain any meta tags.

Any URLs in the file should be absolute. This means that the URL should not just contain the path but also the domain itself.

The CSS in the head.html file should be stripped to essentials and is preferably wrapped in a wrapper-class to prevent it from overwriting newsroom styling. For example, you can wrap in the inline CSS in a div like <div class="example-wrapper"> and then prefix your css with this class (except the outer elements body and html). 

So, for example, replace cases like

  ul li {
      position: relative;
      margin: 0;
  }

with

.example-wrapper ul li {
      position: relative;
      margin: 0;
  }

Another thing to keep in mind is, if possible, to avoid the use of too generic class names to prevent conflicts with class names in our template.

Finally, if the newsroom is hosted on a subdomain, make sure that your server doesn't have a CORS policy preventing the origin from loading assets such as fonts from your website.

To have this set up for your Newsroom, please contact Support.