Footer release
Instructions to include ANU Footer in your website
Effect
Note
If your root element font size is NOT 16px, you can refer to this troubleshooting - "Meeting line is not consistent"
Steps
Step 1
<footer class="anu-wf-footer" aria-label="Footer banner" role="contentinfo" data-tracker="anu" >| HTML element or attributes | Required | Description |
|---|---|---|
<footer></footer> | Yes | For the bundle.js to locate and populate the content.Essential for rendering the footer. |
class="anu-wf-footer" | Yes | For the bundle.js to locate and populate the content.Essential for rendering the footer. |
aria-label="Footer banner" | Yes | For Accessibility (AA) test. |
role="contentinfo" | Yes | For Accessibility (AA) test. |
data-tracker="anu" | Depends | For Google Tag Manager(GTM)
For development/test websites, this attribute must NOT be included. For production websites, this is REQUIRED. |
data-env="dev" | No | You may find this in your rendered footer. They are added automatically by the bundle.js to indicate which environment you are in, "dev" for development and "pro" for production. |
Notes:
Yes means required to render the footer widget.
Yes means required to pass Accessibility Test (AA), but will NOT affect the rendering.
means strictly prohibited.
No means NOT required. Users don't need to worry about this.
Step 2
bundle.js BEHIND the footer element.
| Environment | Code |
|---|---|
| Development/Test websites | <script src="https://webstyle-dev.anu.edu.au/widgets/bundle.js"> |
| Production websites | <script src="https://webstyle.anu.edu.au/widgets/bundle.js"> |
Correctly assigning webstyle-dev or webstyle is important since it informs the bundle.js which environment (development/test/production) your websites are in, and relevant addresses (such as image src) will be switched accordingly.
Platforms
HTML skeleton
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ANU Footer</title>
</head>
<body>
<footer class="anu-wf-footer" aria-label="Footer banner" role="contentinfo" data-tracker="anu"></footer> <script src="https://webstyle.anu.edu.au/widgets/bundle.js"></script>
</body>
</html>
Drupal / WordPress / Others
Please refer to HTMLCheatsheet
Below are codes convenient for your different cases. You do NOT need to change anything, including attribute values and order.
| Case | Code snippet | Sample |
|---|---|---|
| Development/Test websites | | Sample |
| Production websites | | Sample |
Trouble shooting
Reason: The order of footer element and bundle.js may not be right.
Solution:
bundle.js should be behind <footer>
Reason: For font-size, we are using rem unit, which would depend on your website root element's font size, namely html. Ours html font size is 16px. If you are using different size, this would be the problem.
Solution 1: Change your root element font size to 16px
Pro: Simple.
Con: If your other layouts are also using rem, their font-size will be affected as well.
Solution 2: Use em rather than rem and set the <footer> font size as 16px. em is relevant to parent element.
Pro: Dependent on your other layouts.
Con: May need a bit effort.