Skip to content

Commit 0c21c23

Browse files
GarneaumaGarneauma
committed
Thematique: Updated AI Answers to support implementation into AEM
1 parent 7f09367 commit 0c21c23

File tree

3 files changed

+264
-1
lines changed

3 files changed

+264
-1
lines changed

‎méli-mélo/th-ai-answers/ai-answers.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,15 @@
6969
dateModifiedElm.insertAdjacentHTML("afterend", banners.rescue[lang]);
7070

7171
if (!closed) {
72-
pageHeader.insertAdjacentHTML("beforebegin", banners.main[lang]);
72+
// If in AEM page
73+
if ( document.querySelector(".global-header") ) {
74+
const skiplinks = document.querySelector(".global-header > nav");
75+
76+
document.body.insertAdjacentHTML("afterbegin", banners.main[lang]);
77+
document.body.prepend(skiplinks);
78+
} else {
79+
pageHeader.insertAdjacentHTML("beforebegin", banners.main[lang]);
80+
}
7381

7482
const closeBtn = document.querySelector(".aia-close");
7583

‎méli-mélo/th-ai-answers/edge-case.html‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
---
2+
{
3+
"layout": null,
4+
"title": "Edge case for AI Answers banner",
5+
"language": "en",
6+
"dateModified": "2025-12-04"
7+
}
8+
---
9+
<!doctype html>
10+
11+
12+
<html class="no-js" dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
13+
14+
<head prefix="og: http://ogp.me/ns#">
15+
<title>Edge case for AI Answers banner - Canada.ca</title>
16+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
17+
<meta charset="utf-8" />
18+
<meta content="width=device-width,initial-scale=1" name="viewport" />
19+
20+
<link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
21+
<link rel="canonical" href="https://www.canada.ca/en/service-canada/thang/sp22/4623-gcweb.html" />
22+
<link rel="alternate" hreflang="en" href="https://www.canada.ca/en/service-canada/thang/sp22/4623-gcweb.html" />
23+
<link rel="alternate" hreflang="fr" href="https://www.canada.ca/fr/service-canada/thang/sp22/4623-gcweb.html" />
24+
25+
<meta name="author" content="Service Canada" />
26+
<meta name="dcterms.title" content="4623-gcweb" />
27+
<meta name="dcterms.creator" content="Service Canada" />
28+
<meta name="dcterms.language" title="ISO639-2/T" content="eng" />
29+
<meta name="dcterms.issued" title="W3CDTF" content="2025-12-03" />
30+
<meta name="dcterms.modified" title="W3CDTF" content="2025-12-03" />
31+
<meta name="dcterms.spatial" content="Canada" />
32+
<meta name="dcterms.identifier" content="Service_Canada" />
33+
34+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous" />
35+
<script blocking="render" src="https://www.canada.ca/etc/designs/canada/wet-boew/js/gcdsloader.min.js"></script>
36+
<link rel="stylesheet" href="/dist/GCWeb/css/theme.css" />
37+
<link href="https://www.canada.ca/etc/designs/canada/wet-boew/assets/favicon.ico" rel="icon" type="image/x-icon" />
38+
39+
<noscript>
40+
<link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/css/noscript.min.css" />
41+
</noscript>
42+
43+
<link rel="stylesheet" href="/dist/GCWeb/méli-mélo/gc-thématique.css" />
44+
</head>
45+
46+
<body vocab="http://schema.org/" typeof="WebPage" resource="#wb-webpage" class="">
47+
<div class="par iparys_inherited">
48+
<div class="global-header">
49+
<nav>
50+
<ul id="wb-tphp">
51+
<li class="wb-slc"><a class="wb-sl" href="#wb-cont">Skip to main content</a></li>
52+
<li class="wb-slc"><a class="wb-sl" href="#wb-info">Skip to &#34;About government&#34;</a></li>
53+
</ul>
54+
</nav>
55+
<header>
56+
<div id="wb-bnr" class="container">
57+
<div class="row">
58+
<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
59+
<h2 class="wb-inv">Language selection</h2>
60+
<div class="row">
61+
<div class="col-md-12">
62+
<ul class="list-inline mrgn-bttm-0">
63+
<li>
64+
<a lang="fr" href="/content/canadasite/fr/service-canada/thang/sp22/4623-gcweb.html">
65+
<span class="hidden-xs" translate="no">Fran&ccedil;ais</span>
66+
<abbr title="Fran&ccedil;ais" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase" translate="no">fr</abbr>
67+
</a>
68+
</li>
69+
</ul>
70+
</div>
71+
</div>
72+
</section>
73+
<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" resource="#wb-publisher" typeof="GovernmentOrganization">
74+
<a href="/content/canadasite/en.html" property="url">
75+
<img src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg" alt="Government of Canada" property="logo" />
76+
<span class="wb-inv"> /
77+
<span lang="fr">Gouvernement du Canada</span>
78+
</span>
79+
</a>
80+
<meta property="name" content="Government of Canada" />
81+
<meta property="areaServed" typeof="Country" content="Canada" />
82+
<link property="logo" href="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg" />
83+
</div>
84+
<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
85+
<h2>Search</h2>
86+
<form action="/content/canadasite/en/sr/srb.html" method="get" name="cse-search-box" role="search">
87+
<div class="form-group wb-srch-qry">
88+
<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
89+
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca" />
90+
<datalist id="wb-srch-q-ac">
91+
</datalist>
92+
</div>
93+
<div class="form-group submit">
94+
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
95+
</div>
96+
</form>
97+
</section>
98+
</div>
99+
</div>
100+
<hr />
101+
<div class="container">
102+
<div class="row">
103+
<div class="col-md-8">
104+
<nav class="gcweb-menu" typeof="SiteNavigationElement">
105+
<h2 class="wb-inv">Menu</h2>
106+
<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
107+
<ul role="menu" aria-orientation="vertical" data-ajax-replace="https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-en.html">
108+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/jobs.html">Jobs and the workplace</a></li>
109+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></li>
110+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://travel.gc.ca/">Travel and tourism</a></li>
111+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/business.html">Business and industry</a></li>
112+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
113+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/health.html">Health</a></li>
114+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
115+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></li>
116+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/defence.html">National security and defence</a></li>
117+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></li>
118+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></li>
119+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></li>
120+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li>
121+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/finance.html">Money and finances</a></li>
122+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/science.html">Science and innovation</a></li>
123+
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/life-events.html">Manage life events</a></li>
124+
</ul>
125+
</nav>
126+
</div>
127+
</div>
128+
</div>
129+
<nav id="wb-bc" property="breadcrumb">
130+
<h2 class="wb-inv">You are here:</h2>
131+
<div class="container">
132+
<ol class="breadcrumb">
133+
<li><a href='/content/canadasite/en.html'>Canada.ca</a></li>
134+
</ol>
135+
</div>
136+
</nav>
137+
</header>
138+
</div>
139+
</div>
140+
<main property="mainContentOfPage" resource="#wb-main" typeof="WebPageElement" class="container">
141+
<div class="mwstitle section">
142+
<h1 property="name" id="wb-cont" dir="ltr">4623-gcweb</h1>
143+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
144+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
145+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
146+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
147+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
148+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
149+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
150+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
151+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
152+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
153+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
154+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
155+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
156+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
157+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
158+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
159+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
160+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
161+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
162+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
163+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
164+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
165+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
166+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
167+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
168+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
169+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
170+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
171+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
172+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint neque harum qui fugit officia.</p>
173+
</div>
174+
<div class="mwsgeneric-base-html parbase section">
175+
<div class="ai-answers-trigger"></div>
176+
</div>
177+
<section class="pagedetails">
178+
<h2 class="wb-inv">Page details</h2>
179+
<gcds-date-modified>
180+
2025-12-03
181+
</gcds-date-modified>
182+
</section>
183+
</main>
184+
185+
<div class="par iparys_inherited">
186+
<div class="global-footer">
187+
<footer id="wb-info">
188+
<h2 class="wb-inv">About this site</h2>
189+
<div class="gc-main-footer">
190+
<div class="container">
191+
<nav>
192+
<h3>Government of Canada</h3>
193+
<ul class="list-col-xs-1 list-col-sm-2 list-col-md-3">
194+
<li><a href="/content/canadasite/en/contact.html">All contacts</a></li>
195+
<li><a href="/content/canadasite/en/government/dept.html">Departments and agencies</a></li>
196+
<li><a href="/content/canadasite/en/government/system.html">About government</a></li>
197+
</ul>
198+
<h4><span class="wb-inv">Themes and topics</span></h4>
199+
<ul class="list-unstyled colcount-sm-2 colcount-md-3">
200+
<li><a href="/content/canadasite/en/services/jobs.html">Jobs</a></li>
201+
<li><a href="/content/canadasite/en/services/immigration-citizenship.html">Immigration and citizenship</a></li>
202+
<li><a href="https://travel.gc.ca/">Travel and tourism</a></li>
203+
<li><a href="/content/canadasite/en/services/business.html">Business</a></li>
204+
<li><a href="/content/canadasite/en/services/benefits.html">Benefits</a></li>
205+
<li><a href="/content/canadasite/en/services/health.html">Health</a></li>
206+
<li><a href="/content/canadasite/en/services/taxes.html">Taxes</a></li>
207+
<li><a href="/content/canadasite/en/services/environment.html">Environment and natural resources</a></li>
208+
<li><a href="/content/canadasite/en/services/defence.html">National security and defence</a></li>
209+
<li><a href="/content/canadasite/en/services/culture.html">Culture, history and sport</a></li>
210+
<li><a href="/content/canadasite/en/services/policing.html">Policing, justice and emergencies</a></li>
211+
<li><a href="/content/canadasite/en/services/transport.html">Transport and infrastructure</a></li>
212+
<li><a href="https://www.international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li>
213+
<li><a href="/content/canadasite/en/services/finance.html">Money and finances</a></li>
214+
<li><a href="/content/canadasite/en/services/science.html">Science and innovation</a></li>
215+
<li><a href="/content/canadasite/en/services/indigenous-peoples.html">Indigenous Peoples</a></li>
216+
<li><a href="/content/canadasite/en/services/veterans-military.html">Veterans and military</a></li>
217+
<li><a href="/content/canadasite/en/services/youth.html">Youth</a></li>
218+
<li><a href="/content/canadasite/en/services/life-events.html">Manage life events</a></li>
219+
</ul>
220+
</nav>
221+
</div>
222+
</div>
223+
<div class="gc-sub-footer">
224+
<div class="container d-flex align-items-center">
225+
<nav>
226+
<h3 class="wb-inv">Government of Canada Corporate</h3>
227+
<ul>
228+
<li><a href="https://www.canada.ca/en/social.html">Social media</a></li>
229+
<li><a href="https://www.canada.ca/en/mobile.html">Mobile applications</a></li>
230+
<li><a href="https://www.canada.ca/en/government/about.html">About Canada.ca</a></li>
231+
<li><a href="/content/canadasite/en/transparency/terms.html">Terms and conditions</a></li>
232+
<li><a href="/content/canadasite/en/transparency/privacy.html">Privacy</a></li>
233+
</ul>
234+
</nav>
235+
<div class="wtrmrk align-self-end">
236+
<img src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg" alt="Symbol of the Government of Canada" />
237+
</div>
238+
</div>
239+
</div>
240+
</footer>
241+
</div>
242+
</div>
243+
244+
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
245+
<script src="/dist/wet-boew/js/wet-boew.js"></script>
246+
<script src="/dist/GCWeb/js/theme.js"></script>
247+
<script src="/dist/GCWeb/méli-mélo/gc-thématique.js"></script>
248+
</body>
249+
250+
</html>

‎méli-mélo/th-ai-answers/meta.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,14 @@ pages:
2323
- title: Thématique réponses IA
2424
language: fr
2525
path: index-fr.html
26+
- title: Edge case for AI Answers banner
27+
language: en
28+
path: edge-case.html
2629
sponsor: Marc-André Garneau, Principal Publisher on behalf of Digital Transformation Office (DTO)
2730

2831
changes:
32+
- date: 2025-12-04
33+
description: Added edge case example page to demonstrate behaviour when integrated into AEM.
2934
- date: 2025-12-01
3035
description: This thematic provides a top banner to invite users to the beta testing of AI Answers. The banner includes a close button to dismiss the banner. The thematic also includes a rescue link at the bottom of the page for users who missed the banner or dismissed it by mistake. The intent of this thematic is to inform users about the AI Answers beta testing and to provide them with a way to access the beta testing page. It is meant to be temporary and used on around 100 pages (EN and FR) during the testing period.
3136
departmentImpact: This banner is necessary in order to provide our partner departments (TBS, ESDC EI, HC) with a link and message to try a beta test of AI Answers. The vision for AI Answers is that in 2026, it will be displayed on more and more pages on Canada.ca to provide help to visitors. The beta test this December provides DTO and our partner departments with a consistent method of offering access to AI Answers across a set of pages. By January, we hope that partner departments like IRCC and ESDC can offer access on larger sets of pages, rather than adding one by one.

0 commit comments

Comments
 (0)