Adding a Custom Hyperlink to the Cookie Consent Banner

Print Friendly and PDF Follow

These customizations require the updated versions of the cookie consent banner files first released in the Aeon v5.1.29 default web pages. For information on updating your existing web pages to use the new cookie consent banner files, see the implementing web page release changes documentation.

The aeon.css file should also be updated with the changes made in the Aeon v5.1.38 default web pages release to ensure that the default color of the custom hyperlink meets accessibility requirements. For more information on making the CSS changes, see the implementing web page release changes documentation.

The default cookie consent banner used on the Aeon web interface can be modified to include a custom hyperlink, such as a link to another web page hosting your institution's privacy policy. To add the custom hyperlink, the atlasCookieConsent.js file in your Aeon web directory should be modified to add the code for the hyperlink following the instructions in this article.

Cookie Banner

Adding the Custom Hyperlink

Follow the steps below to locate and edit the atlasCookieConstent.js file to include your custom hyperlink:

  1. Navigate to the js folder in the Aeon web directory on the Aeon server (default location: C:\Program Files (x86)\Aeon\Web or in GitHub)
  2. Locate atlasCookieConsent.js and open the file in a text editing application such as Notepad++ or directly in the GitHub editor
  3. Edit the "description" property on line 18 of atlasCookieConsent.js to add an anchor element containing the hyperlink as shown below:

    description: '<a href="[URL]">[Text to display for the link]</a>',

    Example:

    description: '<a href="https://www.atlas-sys.com/">Learn more</a>',
  4. [Optional] Add modifications to open the link in a new tab and/or to add font weight to the link text according to the instructions in the Optional Modifications section below
  5. Save and close the atlasCookieConsent.js file 
  6. The changes are now live. Review and test your changes in a web browser to confirm that everything looks and works as expected

Optional Modifications

Several formatting options are available for the hyperlink that can be added within the anchor element (<a>) after the href attribute containing the URL (see examples below). These are optional modifications that can be added if preferred but are not necessary.

Open Hyperlink in New Tab | Add Weight to Hyperlink Font


Open Hyperlink in New Tab

To have the hyperlink open in a new tab when clicked, the following two attributes should be added to the code for the anchor element (<a>):

target="_blank" rel="noreferrer noopener" 

Example:

description: '<a href="https://www.atlas-sys.com/" target="_blank" rel="noreferrer noopener">Learn more</a>', 

Add Weight to Hyperlink Font

To add additional weight to the font used for the hyperlink, the following attribute should be added to the code for the anchor element (<a>):

class="cc-link" 

Example:

description: '<a href="https://www.atlas-sys.com/" class="cc-link">Learn more</a>',

Before:

Without added font weight, the link will display as shown below using the default styling options in the aeon.css stylesheet:

Cookie banner default font weight

After:

When additional font weight is added, the link will display with a slightly more vibrant appearance using the default styling options in the aeon.css stylesheet:

Cookie banner with additional font weight

Questions?

If this article didn’t resolve your issue, please contact Atlas Support for assistance:

Contact Support