Help Center

Menu

Funnelback for higher education results page configuration - header and footer

This guide applies to the Squiz Experience Cloud version of Funnelback for higher education. See the v15.x Funnelback for higher education documentation for earlier releases.

The header and footer are static content blocks that are always displayed at the top and bottom of the page.

The header usually contains a logo, a navigation menu and the search box.

content header

The footer usually contains additional links, contact details and copyright notices.

content footer

For a seamless search experience it’s recommended that the header and footer on the search results page are identical to the ones on the main website.

Header types

Static header and footer are implemented directly in the Funnelback template, usually by copying the HTML code of the website / CMS inside the Funnelback template.

  • Advantage: Easy to setup.

  • Disadvantages: Extra maintenance needed when the header changes as the Funnelback copy will need to be updated.

This is a simple method to get started with, but causes maintenance problems on the long run as the Funnelback version of the HTML needs to be kept in sync with any changes made on the header and footer of the website.

To use a custom header and footer, simply edit the relevant Freemarker template file and insert the HTML code fragment for the header, footer or html header.

Three template files are available for static header and footer includes:

html_header.ftl

This header includes static resources (such as CSS and Javascript) to include in the <head> section of the page.

content_header.ftl

This template contains the client-specific header (e.g. menu, banner, etc.), in the form of a static HTML fragment.

content_footer.ftl

This template contains the client-specific footer, in the form of a static HTML fragment.

Header remotely sourced from the website or CMS

This information applies when Funnelback is serving the whole results page. If the Funnelback search results are nested within a CMS page the headers and footers will be returned directly by the CMS. See: website integration options.

Funnelback can include HTML fragments to use as header and footer. The HTML fragment can be sourced from a single HTML file (e.g. http://example.com/for-funnelback/header.html and ttp://example.com/for-funnelback/footer.html) or can be extracted from a complete web page (e.g. http://example.org/ , with configuration specifying which part of the page to extract as the header, and which part to extract as the footer, based on regular expressions).

  • Advantages: Header and footer are still controlled in the main website or CMS and any changes made to them will be reflected automatically in Funnelback

  • Disadvantages:

    • Harder to setup as it needs the website or CMS to provide static HTML files, or configuration to extract the HTML fragments from a complete page.

    • If the HTML fragments are extracted from a complete page and the structure of the page change, the extraction of the header and footer may break.

This form of integration introduces a dependency on the website when the includes are being sourced. If the site design is updated the integration has a chance of breaking and the search may lose the headers/footers and styling.

Remote includes are configured in the results page configuration:

Results page configuration
stencils.client_includes.html_header.url=https://example.com/_incl/html_header.html
stencils.client_includes.content_header.url=https://example.com/_incl/content_header.html
stencils.client_includes.content_footer.url=https://example.com/_incl/content_footer.html

The URL should point to an HTML document containing a fragment to inject in the <head> block, or in the content header and footer of the page. The HTML is expected to be a partial fragment and not a complete page. For example the document should only contain an HTML fragment with <header>…​</header> or <div class="header">…​</div>.

Alternatively the URL can be pointed to the client website homepage and regular expressions can be used to extract the relevant section of the page, based on the HTML source:

Results page configuration
stencils.client_includes.content_footer.url=https://example.com/
stencils.client_includes.content_footer.start=<footer
stencils.client_includes.content_footer.end=</footer>

stencils.client_includes.content_header.url=https://example.com/
stencils.client_includes.content_header.start=<a href="#main-content"
stencils.client_includes.content_header.end=</header>

stencils.client_includes.html_header.url=https://example.com/
stencils.client_includes.html_header.start=<meta http-equiv="X-UA-Compatible"
stencils.client_includes.html_header.end=main-styles.css">

This will cause Funnelback to request https://example.com/ and attempt to extract snippets of HTML based on the start and end regular expressions.

This is a powerful technique to easily get a header and footer without needing the client do provide separate HTML document, but it is likely to be brittle as the regular expressions may not match anymore if the structure of the page changes.

To mitigate this, it is recommended to ask the client to place comment markers in the source code to make it easier for Funnelback to locate the fragments to extract. For example:

Source code of website where the header is being extracted
<html>
<head>...</head>
<body>
  ...
  <!-- start:funnelback_header -->
  <header>...</header>
  <!-- end:funnelback_header -->
  ...
</body>
</html>

The inclusion can then be implemented with:

Results page configuration
stencils.client_includes.content_header.url=https://example.org/
stencils.client_includes.content_header.start=<!-- start:funnelback_header -->
stencils.client_includes.content_header.end=<!-- end:funnelback_header -->

Additional options are provided via the base stencil. The full list is included within the stencils base templates documentation.