Configure a custom header and footer

You can use HTML, CSS, and JavaScript to create a custom header and footer.

You must have a Vega Discover Premium or Consortia license to use this feature.

The following default components are available to add to your custom header:

  • Bookmark button (opens and closes the interface for making lists)
    <vega-toggle-bookmarks-button></vega-toggle-bookmarks-button>
  • Help button
    <vega-help-button></vega-help-button>
  • Language list
    <vega-language-switcher></vega-language-switcher>
  • Library info button
    <vega-library-info-button></vega-library-info-button>
  • Log in/log out button
    <vega-login-button></vega-login-button>
  • One Trust cookie
    <vega-cookie-settings></vega-cookie-settings>

  • If you don’t provide the default components above, you won’t be able to switch languages or log out of your customized Vega Discover.

  • If you make a mistake in your configuration and can’t switch to another language or log out of Vega Discover, you can temporarily disable your custom code in the Vega administration system and refresh your browser to go back to the basic Vega header configuration.

  • It is recommended that you document your code.

  1. From the Settings menu, select Page Customizations > Header and Footer.
  2. On the Header and Footer page, select the Configure button that corresponds to the language that you want to configure a custom header or footer for.
    The Edit Config page opens.
  3. If you want to upload a logo to your site, do the following:

    1. Select Upload logo.

    2. Browse to select an image.

    3. Select Open.

  4. If you want to upload a custom favicon, do the following:

    1. Select Upload Favicon.

    2. Browse to select an image.

    3. Select Open.

  5. In the Library Name box, enter the name of the library.
  6. Under Link to Library Privacy Policy, enter a display name for the link and a URL to the policy.
  7. If you want to add a custom link, do the following:

    1. In the Custom Link section, enter the display text for the link.

    2. Enter a URL.

  8. Do one of the following:
    • If you want the header to remain fixed when patrons scroll on a page, select Fixed Header.
    • If you want the header to scroll with the content, clear the Fixed Header checkbox.
  9. Select one or both of the following:
    • Use Customized Header Code
    • Use Customized Footer Code

    A code input box opens for each of the options you select.

  10. Enter your custom code.
  11. To preview your code, select Preview.
    Each preview URL includes a unique configuration ID, so you can share the preview URL with others.
  12. Select Save.
  • On the Edit Config page, clear the checkbox for the header or footer that you want to disable.

Troubleshoot custom header issues

Updates and features released to Vega Discover may affect customizations your library has made using header and footer code that extend beyond the standard header area. Customizations your library makes to the Vega Discover UI using header and footer code are your responsibility to maintain and troubleshoot. Clarivate support can't assist you with any customization or UI issues caused by customizations made by your library.

If you experience UI issues, you can temporarily disable your custom header code to determine whether it's causing the issue by appending the stopcustom=true parameter to your Vega Discover URL.

Home page

Add ?stopcustom=true to the end of the home page URL.

Example:

https://HOST.ENV.iiivega.com/?stopcustom=true

Search results page

Add &stopcustom=true to the end of a search results URL.

Example:

https://HOST.ENV.iiivega.com/search?query=cats&searchType=everything&pageSize=10&stopcustom=true

Full card details page

Add &stopcustom=true to the end of a full card details URL.

Example:

https://HOST.ENV.iiivega.com/search/card?id=6d3a4da2-2282-566f-a4bd-15c9abcc9622&entityType=FormatGroup&stopcustom=true

  • You must use a card URL from your Vega Discover not this particular ID.

After opening the affected page with the stopcustom=true suffix applied:

  • If the issue no longer occurs, your custom header code is likely causing the problem. Review your customizations for code that may be breaking the UI display.

  • If the issue persists with the stopcustom=true suffix applied, contact Support for further assistance.

See also