diff --git a/Gruntfile.coffee b/Gruntfile.coffee index b8444e205..4eae805d8 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -557,12 +557,12 @@ module.exports = (grunt) -> # src: "_includes/settings.liquid" jekyllRunLocal: options: - banner: """{%- assign setting-resourcesBasePathTheme = "/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/<%= distFolder %>/wet-boew" -%}""" + banner: """{%- assign setting-resourcesBasePathTheme = "/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/<%= distFolder %>/wet-boew" -%}{%- assign setting-root = "" -%}""" position: "bottom" src: "<%= jekyllDist %>/_includes/settings.liquid" jekyllRunDemo: options: - banner: """{%- assign setting-resourcesBasePathTheme = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/wet-boew" -%}""" + banner: """{%- assign setting-resourcesBasePathTheme = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/wet-boew" -%}{%- assign setting-root = "/wet-boew-demos/""" + grunt.option('branch') + """ -%}""" position: "bottom" src: "<%= jekyllDist %>/_includes/settings.liquid" jekyllRunUnminified: diff --git a/_config.yml b/_config.yml index b80c3f89c..8709fd314 100644 --- a/_config.yml +++ b/_config.yml @@ -6,8 +6,8 @@ website: "https://wet-boew.github.io/GCWeb/" # URL of your public facing website global: lang: fr feedbackPath: - en: "/sites/feedback/ajax/report-problem-en.html" - fr: "/sites/feedback/ajax/report-problem-fr.html" + en: "/sites/feedback/ajax/page-feedback-en.html" + fr: "/sites/feedback/ajax/page-feedback-fr.html" # contextualFooter: # Contextual footer settings # title: # fr: "Référence d'implémentation de Canada.ca" diff --git a/_data/sites.json b/_data/sites.json index 1936294d9..fb980658a 100644 --- a/_data/sites.json +++ b/_data/sites.json @@ -181,39 +181,59 @@ "modified": "dct:modified" }, "title": { - "en": "Report a problem (RAP) - Feedback", - "fr": "Signaler un problème (SUP) - Commentaires" + "en": "Feedback area", + "fr": "Zone de rétroaction" }, "description": { - "en": "Documentation on how to use the page feedback form.", - "fr": "Documentation sur l'utilisation de formulaire de commentaires de page." + "en": "Documentation on how to use the elements of the feedback area.", + "fr": "Documentation sur l'utilisation des éléments de la zone commentaires." }, - "modified": "2022-04-26", + "modified": "2023-01-10", "componentName": "feedback", "status": "stable", "pages": { "docs": [ { - "title": "Documentation for Page feedback form", + "title": "Documentation for the feedback area", "language": "en", "path": "feedback-docs-en.html" }, { - "title": "Documentation pour formulaire de commentaire de page", + "title": "Documentation pour la zone de rétroaction", "language": "fr", "path": "feedback-docs-fr.html" } ], "examples": [ { - "title": "Page feedback form", + "title": "Page feedback tool", "language": "en", - "path": "feedback-en.html" + "path": "page-feedback-en.html" }, { - "title": "Formulaire de commentaire de page", + "title": "Outil de rétroaction sur la page", "language": "fr", - "path": "feedback-fr.html" + "path": "page-feedback-fr.html" + }, + { + "title": "Page feedback tool with contact link", + "language": "en", + "path": "page-feedback-contact-en.html" + }, + { + "title": "Outil de rétroaction sur la page avec lien de contact", + "language": "fr", + "path": "page-feedback-contact-fr.html" + }, + { + "title": "Report a problem", + "language": "en", + "path": "report-problem-en.html" + }, + { + "title": "Signaler un problème", + "language": "fr", + "path": "report-problem-fr.html" } ] } diff --git a/components/provisional-en.html b/components/provisional-en.html index 60511cbec..6ee0430af 100644 --- a/components/provisional-en.html +++ b/components/provisional-en.html @@ -7,7 +7,7 @@ { "title": "GCWeb home", "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html" } ], "secondlevel": false, - "dateModified": "2021-01-19", + "dateModified": "2022-12-06", "share": "true" } --- @@ -93,9 +93,16 @@

Provisional feature removal first notice

Template .gc-pg-hlpfl - "Page success widget" design pattern to let users share their experience on the page. + +

"Page success widget" design pattern to let users share their experience on the page.

+

Feature has been revised and renamed to "page feedback tool" (.gc-pft):

+ + v7.0 - + Stable (vX.X.X) (TODO) Plugin .wb-chtwzrd @@ -402,80 +409,3 @@

Icon warning color

With "provisional icon-warning-light" class

-

Page success widget

-

Planned to eventually replace Report a problem. Uses multiple features: wb-postback and data-wb-doaction plugins, as well as nojs-* styles and Font Awesome.

-
-
-
-
-
- - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -
-
- -

- (Don’t include any personal information) -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
diff --git a/components/provisional-fr.html b/components/provisional-fr.html index 253deb5b9..5f95f0a38 100644 --- a/components/provisional-fr.html +++ b/components/provisional-fr.html @@ -7,7 +7,7 @@ { "title": "Accueil GCWeb", "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-fr.html" } ], "secondlevel": false, - "dateModified": "2021-01-19", + "dateModified": "2022-12-06", "share": "true" } --- @@ -95,9 +95,16 @@

Provisional feature removal first notice

Gabarit .gc-pg-hlpfl - "Widget succès de page" configuration de conception pour laisser les utilisateurs partager leur expérience sur la page. + +

"Widget succès de page" configuration de conception pour laisser les utilisateurs partager leur expérience sur la page.

+

Cette fonctionnalité a été révisée et renommée « outil de rétroaction sur la page » (.gc-pft) :

+ + v7.0 - + Stable (vX.X.X) (TODO) Plugin .wb-chtwzrd @@ -408,81 +415,3 @@

Icon warning color

-

Widget succès de page

-

Est prévu pour remplacer Signaler un problème ou une erreur sur cette page éventuellement. Utilises plusieurs fonctionnalités : les plugiciels wb-postback et data-wb-doaction, ainsi que les styles nojs-* puis Font Awesome.

-
-
-
-
-
- - - - -
-
-
-

Avez-vous trouvé ce que vous cherchiez?

-
-
- - -
-
-
- -
-
- Qu’est-ce qui n’allait pas? -
- -
-
- -
-
- -
-
- -
-
- -
-
- -

- (N’incluez pas d’information personnelle) -
- Maximum de 300 caractères -

- -
- -
-
-
-

Merci de vos commentaires

-
-
-
-
-
diff --git a/package-lock.json b/package-lock.json index b3fd8b3e3..8bd4f4535 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6666,7 +6666,7 @@ "jsonpointer.js": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/jsonpointer.js/-/jsonpointer.js-0.4.0.tgz", - "integrity": "sha512-2bf/1crAmPpsmj1I6rDT6W0SOErkrNBpb555xNWcMVWYrX6VnXpG0GRMQ2shvOHwafpfse8q0gnzPFYVH6Tqdg==" + "integrity": "sha1-ACyxI/dnqv3rAZYTLOXE+ZQcyro=" }, "jsprim": { "version": "1.4.1", diff --git a/sites/feedback/_base.scss b/sites/feedback/_base.scss new file mode 100644 index 000000000..e24f6269c --- /dev/null +++ b/sites/feedback/_base.scss @@ -0,0 +1,33 @@ +/* + @title: Page feedback tool - Base + */ + +#gc-pft { + details { + margin-bottom: 15px; + margin-top: 0; + } + + .gc-pft-no { + font-weight: $bold-weight; + } + + /* In noscript/basic HTML mode... */ + .no-js &, + .wb-disable & { + /* Disable row gutters (default selector isn't specific-enough) */ + .row-no-gutters { + @extend .row-no-gutters; + } + + /* Make the legend full width */ + .nojs-col-sm-12 { + @extend .col-sm-12; + } + + /* Left-align the legend and yes/no buttons */ + .nojs-text-left { + text-align: left; + } + } +} diff --git a/sites/feedback/_print.scss b/sites/feedback/_print.scss new file mode 100644 index 000000000..085024e43 --- /dev/null +++ b/sites/feedback/_print.scss @@ -0,0 +1,7 @@ +/* + @title: Page feedback tool - Print view + */ + +#gc-pft { + display: none !important; +} diff --git a/sites/feedback/_screen-md-min.scss b/sites/feedback/_screen-md-min.scss new file mode 100644 index 000000000..91e8c0367 --- /dev/null +++ b/sites/feedback/_screen-md-min.scss @@ -0,0 +1,16 @@ +/* + * Share/feedback-specific overrides (medium view and over) + */ + +/* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */ +.pagedetails { + div { + &:has( #gc-pft ) { + + { + .wb-share-inited { + margin-top: 16px; + } + } + } + } +} diff --git a/sites/feedback/_screen-sm-min-to-screen-sm-max.scss b/sites/feedback/_screen-sm-min-to-screen-sm-max.scss new file mode 100644 index 000000000..e6b888f47 --- /dev/null +++ b/sites/feedback/_screen-sm-min-to-screen-sm-max.scss @@ -0,0 +1,16 @@ +/* + * Share/feedback-specific overrides (small view and over) + */ + +/* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */ +.pagedetails { + div { + &:has( #gc-pft ) { + + { + .wb-share-inited { + margin-top: 29px; + } + } + } + } +} diff --git a/sites/feedback/ajax/deprecated/report-problem-v1-en.html b/sites/feedback/ajax/deprecated/report-problem-v1-en.html new file mode 100644 index 000000000..21a260c3d --- /dev/null +++ b/sites/feedback/ajax/deprecated/report-problem-v1-en.html @@ -0,0 +1,57 @@ +
+
+
+ Report a problem on this page +
+
+
+
+ Please select all that apply: +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

Thank you for your help!

+

You will not receive a reply. For enquiries, please contact us.

+
+
+
+
+
diff --git a/sites/feedback/ajax/deprecated/report-problem-v1-fr.html b/sites/feedback/ajax/deprecated/report-problem-v1-fr.html new file mode 100644 index 000000000..71e725788 --- /dev/null +++ b/sites/feedback/ajax/deprecated/report-problem-v1-fr.html @@ -0,0 +1,57 @@ +
+
+
+ Signaler un problème ou une erreur sur cette page +
+
+
+
+ Veuillez cocher toutes les réponses pertinentes : +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

Merci de votre aide!

+

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

+
+
+
+
+
diff --git a/sites/feedback/ajax/report-problem-v2-en.html b/sites/feedback/ajax/deprecated/report-problem-v2-en.html similarity index 100% rename from sites/feedback/ajax/report-problem-v2-en.html rename to sites/feedback/ajax/deprecated/report-problem-v2-en.html diff --git a/sites/feedback/ajax/report-problem-v2-fr.html b/sites/feedback/ajax/deprecated/report-problem-v2-fr.html similarity index 100% rename from sites/feedback/ajax/report-problem-v2-fr.html rename to sites/feedback/ajax/deprecated/report-problem-v2-fr.html diff --git a/sites/feedback/ajax/deprecated/report-problem-v3-en.html b/sites/feedback/ajax/deprecated/report-problem-v3-en.html new file mode 100644 index 000000000..5424322e8 --- /dev/null +++ b/sites/feedback/ajax/deprecated/report-problem-v3-en.html @@ -0,0 +1,77 @@ +
+
+ Report a problem on this page +
+
+
+
+ + + + + + + +
+ + Please select all that apply: + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

Thank you for your help!

+

You will not receive a reply. For enquiries, please contact us.

+
+

Something went wrong. Please submit your information via an alternative method.

+
+
+
+
diff --git a/sites/feedback/ajax/deprecated/report-problem-v3-fr.html b/sites/feedback/ajax/deprecated/report-problem-v3-fr.html new file mode 100644 index 000000000..f09f06c17 --- /dev/null +++ b/sites/feedback/ajax/deprecated/report-problem-v3-fr.html @@ -0,0 +1,77 @@ +
+
+ Signaler un problème ou une erreur sur cette page +
+
+
+
+ + + + + + + +
+ + Veuillez sélectionner toutes les cases qui s'appliquent : + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

Merci de votre aide!

+

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

+
+

Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.

+
+
+
+
diff --git a/sites/feedback/ajax/deprecated/report-problem-v4-en.html b/sites/feedback/ajax/deprecated/report-problem-v4-en.html new file mode 100644 index 000000000..202c60404 --- /dev/null +++ b/sites/feedback/ajax/deprecated/report-problem-v4-en.html @@ -0,0 +1,93 @@ +
+
+
+ Report a problem on this page +
+
+
+
+
+ +
+
+ + Please select all that apply: + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

Thank you for your help!

+

You will not receive a reply. For enquiries, please contact us.

+
+

Something went wrong. Please submit your information via an alternative method.

+
+
+
+
+
diff --git a/sites/feedback/ajax/deprecated/report-problem-v4-fr.html b/sites/feedback/ajax/deprecated/report-problem-v4-fr.html new file mode 100644 index 000000000..c43331a49 --- /dev/null +++ b/sites/feedback/ajax/deprecated/report-problem-v4-fr.html @@ -0,0 +1,92 @@ +
+
+ Signaler un problème ou une erreur sur cette page +
+
+
+
+
+ +
+
+ + Veuillez sélectionner toutes les cases qui s'appliquent : + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

Merci de votre aide!

+

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

+
+

Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.

+
+
+
+
+
diff --git a/sites/feedback/ajax/page-feedback-en.html b/sites/feedback/ajax/page-feedback-en.html new file mode 100644 index 000000000..5d6990078 --- /dev/null +++ b/sites/feedback/ajax/page-feedback-en.html @@ -0,0 +1,84 @@ +
+
+
+

Give feedback about this page

+
+
+ +
+
+ Did you find what you were looking for? +
+ +
+
+ + +
+
+
+

If not, tell us why below:

+

Tell us why below:

+
+ +
+
+ +

You will not receive a reply. Don't include personal information (telephone, email, SIN, financial, medical, or work details).

+

Maximum 300 characters

+ +
+ +
+
+
+

Thank you for your feedback.

+
+
+
+
diff --git a/sites/feedback/ajax/page-feedback-fr.html b/sites/feedback/ajax/page-feedback-fr.html new file mode 100644 index 000000000..c0c147076 --- /dev/null +++ b/sites/feedback/ajax/page-feedback-fr.html @@ -0,0 +1,84 @@ +
+
+
+

Donnez votre rétroaction sur cette page

+
+
+ +
+
+ Avez-vous trouvé ce que vous cherchiez? +
+ +
+
+ + +
+
+
+

Sinon, dites nous pourquoi ci-dessous :

+

Dites nous pourquoi ci-dessous :

+
+ +
+
+ +

Vous ne recevrez pas de réponse. N'incluez pas de renseignements personnels (téléphone, courriel, NAS, renseignements financiers, médicaux ou professionnels).

+

Maximum de 300 caractères

+ +
+ +
+
+
+

Merci de vos commentaires.

+
+
+
+
diff --git a/sites/feedback/ajax/report-problem-aa-en.html b/sites/feedback/ajax/report-problem-aa-en.html deleted file mode 100644 index 5e2384442..000000000 --- a/sites/feedback/ajax/report-problem-aa-en.html +++ /dev/null @@ -1,107 +0,0 @@ -
-
- Report a problem on this page -
-
-
-
- - - - - - - -
- Please select all that apply: -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
- - -
-
- - -
-
- -
-
-
-

Thank you for your help!

-

You will not receive a reply. For enquiries, please contact us.

-
-

Something went wrong. Please submit your information via an alternative method.

-
-
-
-
diff --git a/sites/feedback/ajax/report-problem-aa-fr.html b/sites/feedback/ajax/report-problem-aa-fr.html deleted file mode 100644 index 5d883e9c3..000000000 --- a/sites/feedback/ajax/report-problem-aa-fr.html +++ /dev/null @@ -1,109 +0,0 @@ -
-
- Signaler un problème ou une erreur sur cette page -
-
-
-
- - - - - - - -
- - Veuillez sélectionner toutes les cases qui s'appliquent : - -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
- - -
-
- - -
-
- -
-
-
-

Merci de votre aide!

-

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

-
-

Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.

-
-
-
-
diff --git a/sites/feedback/ajax/report-problem-en.html b/sites/feedback/ajax/report-problem-en.html index 202c60404..e3b20d197 100644 --- a/sites/feedback/ajax/report-problem-en.html +++ b/sites/feedback/ajax/report-problem-en.html @@ -12,12 +12,10 @@ data-wb-jsonmanager='{ "name": "rap", "extractor": [ - { "interface": "referer", "path": "externalReferer" }, { "selector": "title", "path": "pageTitle" }, { "interface": "locationHref", "path": "submissionPage" }, { "selector": "html", "attr": "lang", "path": "lang" }, { "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageOwner" }, - { "selector": "meta[name=\"dcterms.subject\"]", "attr": "content", "path": "subject" } ] }'>
diff --git a/sites/feedback/ajax/report-problem-v1-en.html b/sites/feedback/ajax/report-problem-v1-en.html deleted file mode 100644 index 5ffa139c1..000000000 --- a/sites/feedback/ajax/report-problem-v1-en.html +++ /dev/null @@ -1,54 +0,0 @@ -
-
Report a problem on this page -
-
-
-
- Please select all that apply: -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
-
-

Thank you for your help!

-

You will not receive a reply. For enquiries, please contact us.

-
-
-
-
diff --git a/sites/feedback/ajax/report-problem-v1-fr.html b/sites/feedback/ajax/report-problem-v1-fr.html deleted file mode 100644 index e9a045d7a..000000000 --- a/sites/feedback/ajax/report-problem-v1-fr.html +++ /dev/null @@ -1,54 +0,0 @@ -
-
Signaler un problème ou une erreur sur cette page -
-
-
-
- Veuillez cocher toutes les réponses pertinentes : -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
-
-

Merci de votre aide!

-

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

-
-
-
-
diff --git a/sites/feedback/ajax/report-problem-v3-en.html b/sites/feedback/ajax/report-problem-v3-en.html deleted file mode 100644 index 1c10340a8..000000000 --- a/sites/feedback/ajax/report-problem-v3-en.html +++ /dev/null @@ -1,78 +0,0 @@ -
-
- Report a problem on this page -
-
-
-
- - - - - - - -
- - Please select all that apply: - -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
- -
-
-

Thank you for your help!

-

You will not receive a reply. For enquiries, please contact us.

-
-

Something went wrong. Please submit your information via an alternative method.

-
-
-
-
diff --git a/sites/feedback/ajax/report-problem-v3-fr.html b/sites/feedback/ajax/report-problem-v3-fr.html deleted file mode 100644 index 6a673dc3a..000000000 --- a/sites/feedback/ajax/report-problem-v3-fr.html +++ /dev/null @@ -1,77 +0,0 @@ -
-
- Signaler un problème ou une erreur sur cette page -
-
-
-
- - - - - - - -
- - Veuillez sélectionner toutes les cases qui s'appliquent : - -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
-
-

Merci de votre aide!

-

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

-
-

Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.

-
-
-
-
diff --git a/sites/feedback/feedback-aa-en.html b/sites/feedback/feedback-aa-en.html deleted file mode 100644 index 1420bce91..000000000 --- a/sites/feedback/feedback-aa-en.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -{ - "title": "Page feedback form using Analytics data attributes", - "language": "en", - "altLangPage": "feedback-aa-fr.html", - "breadcrumbs": [ - { "title": "Canada.ca", "link": "https://www.canada.ca/en.html" } - ], - "secondlevel": false, - "dateModified": "2022-04-26", - "share": "true", - "feedbackPath": "ajax/report-problem-aa-en.html" -} ---- - -

This page feedback form is using analytics data attributes.

-

HTML code

-
<div data-ajax-replace="ajax/report-problem-aa-en.html">
-	<div class="row row-no-gutters">
-		<div class="col-sm-9 col-md-6 col-lg-5">
-			<a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
-		</div>
-	</div>
-</div>
diff --git a/sites/feedback/feedback-aa-fr.html b/sites/feedback/feedback-aa-fr.html deleted file mode 100644 index 0de3a1b7d..000000000 --- a/sites/feedback/feedback-aa-fr.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -{ - "title": "Formulaire de commentaires de page utilisant les attributs de données analytiques", - "language": "fr", - "altLangPage": "feedback-aa-en.html", - "breadcrumbs": [ - { "title": "Canada.ca", "link": "https://www.canada.ca/en.html" } - ], - "secondlevel": false, - "dateModified": "2022-04-26", - "share": "true", - "feedbackPath": "ajax/report-problem-aa-fr.html" -} ---- - -

Ce formulaire de commentaires de page utilise des attributs de données analytiques.

-

Le code HTML

-
<div data-ajax-replace="ajax/report-problem-aa-fr.html">
-	<div class="row row-no-gutters">
-		<div class="col-sm-11 col-md-7 col-lg-6">
-			<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème ou une erreur sur cette page </a>
-		</div>
-	</div>
-</div>
diff --git a/sites/feedback/feedback-docs-en.html b/sites/feedback/feedback-docs-en.html index 3b2176c3d..e697ce38e 100644 --- a/sites/feedback/feedback-docs-en.html +++ b/sites/feedback/feedback-docs-en.html @@ -1,397 +1,379 @@ --- { - "title": "Page feedback (RAP) - Documentation", + "title": "Feedback area - Documentation", "language": "en", "altLangPage": "feedback-docs-fr.html", - "breadcrumbs": [ - { "title": "Canada.ca", "link": "https://www.canada.ca/en.html" } - ], "secondlevel": false, - "dateModified": "2022-04-26", - "share": true, - "feedbackPath": "ajax/report-problem-en.html" + "dateModified": "2023-01-10", + "share": true } ---
Status
Stable
+
Version
+
5.0.0
Type
Canada.ca site functionality
-
Last review
-
2022-04-26
-

Purpose

-

Displays the Page feedback form

+

Introduction

+

Purpose

+

Provide feedback on any given page through a form.

+

Evaluation and report

+

There is no evaluation and report available for this component.

+ +

Guidance

+ -

Working example

+

Variants

+

This component supports the following variants:

+
+

Note

+

All variants are comprised of two sub-components:

+
    +
  • The first one is used for the integration on the page.
    • +
  • The second one is the form which is inserted dynamically via an Ajax call. This sub-component is however out of scope of the API.
    • +
+
+ +

Variant 1: Page Feedback Tool (default) Provisional

+

Iteration 1

-

How to implement

+

Working example(s)

+ +

How to implement

+ +

For more information about Data Ajax plugin, please visit Data Ajax documentation page.

-

Evaluation and report

-

There is no evaluation and report available for this component.

+
GCWeb Jekyll specific
+

To apply this variant's optional attributes on any given page, you will need to do the following in the page's front-matter:

+ +

For example:

+
"feedbackData": {
+	"theme": "Theme",
+	"section": "Section"
+}
+ +

Code sample

+{%- highlight html -%} +
+{%- endhighlight -%} +
+ Ajaxed-in content + {%- highlight html -%} + {%- include_relative ajax/page-feedback-en.html -%} + {%- endhighlight -%} +
+ +

Variant 2: Page Feedback Tool With Contact Link Provisional

+

Iteration 1

+ +

Working example(s)

+ -

API (Version 2.0)

+

How to implement

+ +

For more information about Data Ajax plugin, please visit Data Ajax documentation page.

+ +
GCWeb Jekyll specific
+

To apply this variant on any given page, you will need to do the following in the page's front-matter:

+ +

For example:

+
"feedbackContact": {
+	"link": "Contact link",
+	"url": "https://canada.ca"
+},
+"feedbackData": {
+	"theme": "Theme",
+	"section": "Section"
+}
+ +

Code sample

+{%- highlight html -%} +
+{%- endhighlight -%} +
+ Ajaxed-in content + {%- highlight html -%} + {%- include_relative ajax/page-feedback-en.html -%} + {%- endhighlight -%} +
+

Variant 3: Report a Problem (RAP) Stable

+

Iteration 5

+

Here is a list of changes that happened since the previous iteration:

- - - - + + + + + + - - - - + +
CSS ClassTemplateVisual renderingSchemaBreaking +
    +
  • Removed JSON Manager extraction for "externalReferer" and "subject".
    • +
+
Additions +
    +
  • Added static hidden inputs for "externalReferer" and "subject"
    • +
+
n.a.Version 2.0n.a.n.a.Fixesn/a
-

Template (latest: v2.0)

-

Template migration notes

-

Site template includes

-
-
-
Version 2.0
-

The html inserted by the Data Ajax plugin can be found on the following page: https://github.com/wet-boew/GCWeb/blob/master/sites/feedback/ajax/report-problem-en.html.

-
<div data-ajax-replace="ajax/report-problem-en.html">
-	<div class="row row-no-gutters">
-		<div class="col-sm-9 col-md-6 col-lg-5">
-			<a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
-		</div>
-	</div>
-</div>
-
-
-
Before, version 1.0
-
<details class="brdr-0">
-	<summary class="btn btn-default text-center">Report a problem on this page</summary>
-	<div class="well row">
-		<div class="gc-rprt-prblm">
-			<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" id="wb-auto-4">
-				{ feedback form }
-			</div>
-			<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" id="wb-auto-5">
-				<h3>Thank you for your help!</h3>
-				<p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
-			</div>
-		</div>
-	</div>
-</details>
-
-
+

Working example(s)

+ -

Report a problem (RAP) form (feedback)

-

Implemented ajax files reference

+

How to implement

-
Version 4.0
-
<div class="row row-no-gutters">
-	<div class="col-sm-9 col-md-6 col-lg-5">
-		<details class="brdr-0">
-			<summary class="btn btn-default text-center">Report a problem on this page</summary>
-			<div class="well row">
-				<div class="gc-rprt-prblm">
-					<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl">
-						<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback"
-							data-wb-postback='{
-								"success": ".success-message",
-								"failure": ".failure-message"}'
-							data-wb-jsonmanager='{
-								"name": "rap",
-								"extractor": [
-									{ "interface": "referer", "path": "externalReferer" },
-									{ "selector": "title", "path": "pageTitle" },
-									{ "interface": "locationHref", "path": "submissionPage" },
-									{ "selector": "html", "attr": "lang", "path": "lang" },
-									{ "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageOwner" },
-									{ "selector": "meta[name=\"dcterms.subject\"]", "attr": "content", "path": "subject" }
-								]
-							}'>
-							<div data-wb-json='{
-								"url": "#[rap]",
-								"mapping": [
-									{ "selector": "input", "attr": "name", "value": "/@id" },
-									{ "selector": "input", "attr": "value", "value": "/@value" }
-								]
-							}'>
-								<template>
-									<input type="hidden" name=" value=" />
-								</template>
-							</div>
-							<fieldset>
-								<legend>
-									<span class="field-name">Please select all that apply:</span>
-								</legend>
-								<div class="checkbox">
-									<label for="problem1">
-										<input name="problem1" id="problem1" type="checkbox" value="Yes" >A link, button or video is not working
-									</label>
-									<input name="problem1" type="hidden" value=">
-								</div>
-								<div class="checkbox">
-									<label for="problem2">
-										<input name="problem2" id="problem2" type="checkbox" value="Yes" >It has a spelling mistake
-									</label>
-									<input name="problem2" type="hidden" value=">
-								</div>
-								<div class="checkbox">
-									<label for="problem3">
-										<input name="problem3" id="problem3" type="checkbox" value="Yes" >Information is missing
-									</label>
-									<input name="problem3" type="hidden" value=">
-								</div>
-								<div class="checkbox">
-									<label for="problem4">
-										<input name="problem4" id="problem4" type="checkbox" value="Yes" >Information is outdated or wrong
-									</label>
-									<input name="problem4" type="hidden" value=">
-								</div>
-								<div class="checkbox">
-									<label for="problem5">
-										<input name="problem5" id="problem5" type="checkbox" value="Yes" >Login error when trying to access an account
-									</label>
-									<input name="problem5" type="hidden" value=">
-								</div>
-								<div class="checkbox">
-									<label for="problem11">
-										<input name="problem11" id="problem11" type="checkbox" value="Yes" >I can't find what I'm looking for
-									</label>
-									<input name="problem11" type="hidden" value=">
-								</div>
-								<div class="checkbox">
-									<label for="problem12">
-										<input name="problem12" id="problem12" type="checkbox" value="Yes" >Other issue not in this list
-									</label>
-									<input name="problem12" type="hidden" value=">
-								</div>
-							</fieldset>
-							<button type="submit" class="btn btn-primary">Submit</button>
-						</form>
-					</div>
-					<div class="success-message hide">
-						<h3>Thank you for your help!</h3>
-						<p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
-					</div>
-					<p class="failure-message hide">Something went wrong. Please submit your information via an alternative method.</p>
-				</div>
-			</div>
-		</details>
-	</div>
+
For more information about Data Ajax plugin, please visit Data Ajax documentation page.

+

+	Adobe Analytics implementation
+	
To implement Adobe Analytics in the Report a problem form, simply add the attribute data-gc-analytics-rap to every checkbox with the value being the same as the current language's label, followed by a dash and followed by the other language's label.

+	
For example:

+	
<div class="checkbox">
+	<label for="problem2">
+		<input name="problem2" id="problem2" type="checkbox" value="Yes" data-gc-analytics-rap="It has a spelling mistake-Il y a une erreur d'orthographe ou de grammaire">It has a spelling mistake
+	</label>
+	<input name="problem2" type="hidden" value="">
 </div>

+

+
+
Hidden input fields

+
The Report a problem variant leverages JSON Manager and Data JSON to get information about the page and generate hidden input fields in the form.

+
The following tag needs to be present in the page: <meta name="dcterms.creator" content="[Department name]">
Where [Department name] is a department name from canada.ca controlled vocabulary, for example: gc:institutions/service-canada

+
+
GCWeb Jekyll specific

+
To apply this variant on any given page, you will need to do the following in the page's front-matter or in the site configurations (_config.yml):

+
    
+	
  • set the variable feedbackPath to "ajax/report-problem-en.html".
    • 
+	
  • set the variable feedbackFallback to true.
    • 
+

+
+
Code sample

+{%- highlight html -%}
+

+	

+		

+			Report a problem on this page
+		

+	

+

+{%- endhighlight -%}
+

+	Ajaxed-in content
+	{%- highlight html -%}
+	{%- include_relative ajax/report-problem-en.html -%}
+	{%- endhighlight -%}
+

+
+
Previous iterations

 
-
Previous versions

 

-	Version 3.0
-	
<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{"success":".success-message","failure":".failure-message","content":".form-content"}" >
-		<fieldset>
-			<legend>
-				<span class="field-name">Please select all that apply:</span>
-			</legend>
-			<div class="checkbox">
-				<label for="problem1">
-					<input name="problem1" id="problem1" type="checkbox" value="Yes" >A link, button or video is not working
-				</label>
-				<input name="problem1" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem2">
-					<input name="problem2" id="problem2" type="checkbox" value="Yes" >It has a spelling mistake
-				</label>
-				<input name="problem2" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem3">
-					<input name="problem3" id="problem3" type="checkbox" value="Yes" >Information is missing
-				</label>
-				<input name="problem3" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem4">
-					<input name="problem4" id="problem4" type="checkbox" value="Yes" >Information is outdated or wrong
-				</label>
-				<input name="problem4" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem5">
-					<input name="problem5" id="problem5" type="checkbox" value="Yes" >Login error when trying to access an account
-				</label>
-				<input name="problem5" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem11">
-					<input name="problem11" id="problem11" type="checkbox" value="Yes" >I can't find what I'm looking for
-				</label>
-				<input name="problem11" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem12">
-					<input name="problem12" id="problem12" type="checkbox" value="Yes" >Other issue not in this list
-				</label>
-				<input name="problem12" type="hidden" value="">
-			</div>
-		</fieldset>
-		<strong><button type="submit" class="btn btn-primary">Submit</button></strong>
-	</form>
-	<div class="success-message hide">
-		<h3>Thank you for your help!</h3>
-		<p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
-	</div>
-	<p class="failure-message hide">Something went wrong. Please submit your information via an alternative method.</p>

+	Iteration 4
+	
Here is a list of changes that happened since the previous iteration:

+	
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+	
Breaking
+				
    
+					
  • Leveraging JSON Manager Extractor and Data JSON to generate hidden input fields
    • 
+				

+			
Additionsn/a
Fixesn/a

+
+	
Code sample

+	{%- highlight html -%}
+	
+	{%- endhighlight -%}
+	

+		Ajaxed-in content
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v4-en.html -%}
+		{%- endhighlight -%}
+	

 

+
 

-	Version 2.0
-	
<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{"success":".success-message","failure":".failure-message","content":".form-content"}" >
-		<fieldset>
-			<legend>
-				<span class="field-name">Please select all that apply:</span>
-			</legend>
-			<div class="checkbox">
-				<label for="problem1">
-					<input name="problem1" id="problem1" type="checkbox" value="Yes" >A link, button or video is not working
-				</label>
-				<input name="problem1" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem2">
-					<input name="problem2" id="problem2" type="checkbox" value="Yes" >It has a spelling mistake
-				</label>
-				<input name="problem2" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem3">
-					<input name="problem3" id="problem3" type="checkbox" value="Yes" >Information is missing
-				</label>
-				<input name="problem3" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem4">
-					<input name="problem4" id="problem4" type="checkbox" value="Yes" >Information is outdated or wrong
-				</label>
-				<input name="problem4" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem5">
-					<input name="problem5" id="problem5" type="checkbox" value="Yes" >Login error when trying to access an account (e.g. My Service Canada Account)
-				</label>
-				<input name="problem5" type="hidden" value="">
-			</div>
-			<ul>
-				<li class="checkbox">
-					<label for="problem6a">
-						<input name="problem6" id="problem6a" type="checkbox" value="Yes" >GC Key access
-					</label>
-					<input name="problem6" type="hidden" value="">
-				</li>
-				<li class="checkbox">
-					<label for="problem7">
-						<input name="problem7" id="problem7" type="checkbox" value="Yes" >SecureKey Concierge (Banking Credential) access
-					</label>
-					<input name="problem7" type="hidden" value="">
-				</li>
-				<li class="checkbox">
-					<label for="problem8">
-						<input name="problem8" id="problem8" type="checkbox" value="Yes" >Personal Access Code (PAC) problems or EI Access Code (AC) problems
-					</label>
-					<input name="problem8" type="hidden" value="">
-				</li>
-				<li class="checkbox">
-					<label for="problem9">
-						<input name="problem9" id="problem9" type="checkbox" value="Yes" >Social Insurance Number (SIN) validation problems
-					</label>
-					<input name="problem9" type="hidden" value="">
-				</li>
-				<li class="checkbox">
-					<label for="problem10">
-						<input name="problem10" id="problem10" type="checkbox" value="Yes" >Other login error not in this list
-					</label>
-					<input name="problem10" type="hidden" value="">
-				</li>
-			</ul>
-			<div class="checkbox">
-				<label for="problem11">
-					<input name="problem11" id="problem11" type="checkbox" value="Yes" >I can't find what I'm looking for
-				</label>
-				<input name="problem11" type="hidden" value="">
-			</div>
-			<div class="checkbox">
-				<label for="problem12">
-					<input name="problem12" id="problem12" type="checkbox" value="Yes" >Other issue not in this list
-				</label>
-				<input name="problem12" type="hidden" value="">
-			</div>
-		</fieldset>
-		<strong><button type="submit" class="btn btn-primary">Submit</button></strong>
-	</form>
-	<div class="success-message hide">
-		<h3>Thank you for your help!</h3>
-		<p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
-	</div>
-	<p class="failure-message hide">Something went wrong. Please submit your information via an alternative method.</p>

+	Iteration 3
+	
Here is a list of changes that happened since the previous iteration:

+	
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+	
Breaking
+				
    
+					
  • Removed login error sub-options.
    • 
+					
  • Renamed login error option.
    • 
+				

+			
Additionsn/a
Fixesn/a

+
+	
Code sample

+	{%- highlight html -%}
+	
+	{%- endhighlight -%}
+	

+		Ajaxed-in content
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v3-en.html -%}
+		{%- endhighlight -%}
+	

 

+
+
 

-	Version 1.0
-	
<form action="#">
-		<fieldset>
-			<legend><span class="field-name">Please select all that apply:</span></legend>
-			<div class="checkbox">
-				<label for="gc-rprt-prblm-f1">
-					<input type="checkbox" name="problem1" value="Yes" id="gc-rprt-prblm-f1" />A link, button or video is not working
-				</label>
-				<input name="problem1" type="hidden" value="No" />
-			</div>
-			<div class="checkbox">
-				<label for="gc-rprt-prblm-f2">
-					<input type="checkbox" name="problem2" value="Yes" id="gc-rprt-prblm-f2" />It has a spelling mistake
-				</label>
-				<input name="problem2" type="hidden" value="No" />
-			</div>
-			<div class="checkbox">
-				<label for="gc-rprt-prblm-f3">
-					<input type="checkbox" name="problem3" value="Yes" id="gc-rprt-prblm-f3" />Information is missing
-				</label>
-				<input name="problem3" type="hidden" value="No" />
-			</div>
-			<div class="checkbox">
-				<label for="gc-rprt-prblm-f4">
-					<input type="checkbox" name="problem4" value="Yes" id="gc-rprt-prblm-f4" />Information is outdated or wrong
-				</label>
-				<input name="problem4" type="hidden" value="No" />
-			</div>
-			<div class="checkbox">
-				<label for="gc-rprt-prblm-f5">
-					<input type="checkbox" name="problem5" value="Yes" id="gc-rprt-prblm-f5" />I can't find what I'm looking for
-				</label>
-				<input name="problem5" type="hidden" value="No" />
-			</div>
-			<div class="checkbox">
-				<label for="gc-rprt-prblm-f6">
-					<input type="checkbox" name="problem6" value="Yes" id="gc-rprt-prblm-f6" />Other issue not in this list
-				</label>
-				<input name="problem6" type="hidden" value="No" />
-			</div>
-		</fieldset>
-		<button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'>Submit</button>
-	</form>

+	Iteration 2
+	
Here is a list of changes that happened since the previous iteration:

+	
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+	
Breaking
+				
    
+					
  • Rework of the template to use data-ajax. Includes fallback for basic HTML version.
    • 
+					
  • Updated form:
+						
      
+							
    • Now implements wb-postback for form validation and no longer uses data-toggle on submit.
      • 
+							
    • Added login error options (problem 5 to problem 10).
      • 
+							
    • Added error and success messages.
      • 
+						
    
+					
    • 
+				

+			
Additionsn/a
Fixesn/a

+
+	
Code sample

+	{%- highlight html -%}
+	
+	{%- endhighlight -%}
+	

+		Ajaxed-in content
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v2-en.html -%}
+		{%- endhighlight -%}
+	

+

+

+	Iteration 1
+	
Code sample

+	{%- highlight html -%}
+	{%- include_relative ajax/deprecated/report-problem-v1-en.html -%}
+	{%- endhighlight -%}
 

diff --git a/sites/feedback/feedback-docs-fr.html b/sites/feedback/feedback-docs-fr.html
index e2f445223..d80d1d531 100644
--- a/sites/feedback/feedback-docs-fr.html
+++ b/sites/feedback/feedback-docs-fr.html
@@ -1,396 +1,377 @@
 ---
 {
-	"title": "Commentaires de page (SUP) - Documentation",
+	"title": "Zone de rétroaction - Documentation",
 	"language": "fr",
 	"altLangPage": "feedback-docs-en.html",
-	"breadcrumbs": [
-		{ "title": "Canada.ca", "link": "https://www.canada.ca/en.html" }
-	],
 	"secondlevel": false,
-	"dateModified": "2022-04-26",
-	"share": "true",
-	"feedbackPath": "ajax/report-problem-fr.html"
-
+	"dateModified": "2023-01-10",
+	"share": "true"
 }
 ---
 
-
 

 	
Statut

 	
Stable

+	
Version

+	
5.0.0

 	
Type

-	
Fonctionnalité du site Canada.ca

-	
Dernière révision

-	
2022-04-26

+	
Fonctionnalité globale de site de Canada.ca

 

 
-
Objectif

-
Affiche le formulaire de commentaires sur la page

+
Introduction

+
Objectif

+
Obtenir une rétroaction des utilisateurs sur une page donnée via un formulaire.

+
+
Évaluation et rapport

+
Il n'y a pas d'évaluation ni de rapport disponible pour cette composante.

+
+
Orientation

+
+
+
Variantes

+
Ce composant prend en charge les variantes suivantes :

+
+

+	
Note

+	
Toutes les variantes sont composées de deux sous-composants :

+	
    
+		
  • Le premier est utilisé pour l'intégration sur la page.
    • 
+		
  • Le second est le formulaire qui est inséré dynamiquement via un appel Ajax. Ce sous-composant est par contre hors de portée de l'API.
    • 
+	

+

+
+
Variante 1: Outil de rétroaction sur la page (par défaut) Provisoire

+
Itération 1

+
+
Exemple(s) pratique(s)

+
+
+
Comment mettre en œuvre

+
    
+	
  • Pour afficher le formulaire de rétroaction sur la page, créez un <div> avec les attributs suivants :
+		
      
+			
    • Obligatoire : data-ajax-replace="ajax/page-feedback-en.html"
      • 
+			
    • Optionnel : data-feedback-theme="[Texte définissant le thème de votre page]"
      • 
+			
    • Optionnel : data-feedback-section="[Texte définissant la section où réside votre page]"
      • 
+		
    
+	
    • 
+	
  • Pour la version HTML de base, un lien doit être créé dans un <div> qui pointe vers la page du formulaire de signalement d'un problème : <div><a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a></div>.
    • 
+	
  • De plus, vous pouvez définir les métadonnées suivantes: <meta name="dcterms.creator" content="[Nom du département]">
    • 
+

+
Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax.

 
-
Exemple pratique

+
Spécifique à GCWeb Jekyll

+
Pour appliquer les attributs facultatifs de cette variante sur une page donnée, vous devrez procéder comme suit dans le front-matter de la page :

 
+
Par exemple :

+
"feedbackData": {
+	"theme": "Thème",
+	"section": "Section"
+}

+
+
Exemple de code

+{%- highlight html -%}
+

+{%- endhighlight -%}
+

+	Contenu ajouté via Ajax
+	{%- highlight html -%}
+	{%- include_relative ajax/page-feedback-fr.html -%}
+	{%- endhighlight -%}
+

 
+
Variante 2: Outil de rétroaction sur la page avec lien de contact Provisoire

+
Itération 1

+
+
Exemple(s) pratique(s)

+
 
-
Comment mettre en œuvre

+
Comment mettre en œuvre

 
    
-	
  • 
-		
    Pour afficher le formulaire de commentaires de page, créez une code><div> avec l'attribut de données suivant : data-ajax-replace="ajax/report-problem-fr.html".
    
-		
    Pour la version HTML simplifiée, un élément de lien doit être créé qui pointe vers la page du formulaire de signalement d'un problème : <a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a>
    
-		
    Pour plus d'informations sur le plugiciel Data Ajax, veuillez visiter Page de documentation Data Ajax
    
+	
  • Pour afficher le formulaire de rétroaction sur la page, créez un <div> avec les attributs suivants :
+		
      
+			
    • Obligatoire : data-ajax-replace="ajax/page-feedback-en.html"
      • 
+			
    • Obligatoire : data-feedback-link="[Texte du lien de contact]"
      • 
+			
    • Obligatoire : data-feedback-url="[URL du lien de contact]"
      • 
+			
    • Optionnel : data-feedback-theme="[Texte définissant le thème de votre page]"
      • 
+			
    • Optionnel : data-feedback-section="[Texte définissant la section où réside votre page]"
      • 
+		
    
 	
    • 
+	
  • Pour la version HTML de base, un lien doit être créé dans un <div> qui pointe vers la page du formulaire de signalement d'un problème : <div><a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a></div>.
    • 
+	
  • De plus, votre page doit avoir les métadonnées suivantes: <meta name="dcterms.creator" content="[Nom du département]">
    • 
 

+
Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax.

 
-
Évaluation et rapport

-
Il n'y a pas d'évaluation ni de rapport disponible pour ce composant.

+
Spécifique à GCWeb Jekyll

+
Pour appliquer cette variante sur une page donnée, vous devrez faire ce qui suit dans l'en-tête de la page :

+
    
+	
  • Définissez la variable feedbackContact à un objet contenant les chaînes personnalisables suivantes:
+		
      
+			
    • link: pour définir le texte du lien de contact.
      • 
+			
    • url: pour définir l'URL du lien de contact.
      • 
+		
    
+	
    • 
+	
  • Facultativement, vous pouvez définir la variable feedbackData à un objet contenant les chaînes de caractères suivantes:
+		
      
+			
    • section : pour définir la section où réside votre page.
      • 
+			
    • theme : pour définir le thème de votre page.
      • 
+		
    
+	
    • 
+

+
Par exemple :

+
"feedbackContact": {
+	"link": "Lien de contact",
+	"url": "https://canada.ca/fr"
+},
+"feedbackData": {
+	"theme": "Thème",
+	"section": "Section"
+}

 
-
API (version 2.0)

-
+
Exemple de code

+{%- highlight html -%}
+

+{%- endhighlight -%}
+

+	Contenu ajouté via Ajax
+	{%- highlight html -%}
+	{%- include_relative ajax/page-feedback-fr.html -%}
+	{%- endhighlight -%}
+

+
+
Variante 3: Signaler un problème sur cette page (SUP) Stable

+
Itération 5

+
Voici une liste des changements qui se sont produits depuis l'itération précédente :

+

+	
+		
+		
+	
-		
-		
-		
-		
+		
+		
-		
-		
-		
-		
+		
+		
Majeurs
+			
    
+				
  • Suppression de l'extraction de données avec JSON Manager pour "externalReferer" et "subject".
    • 
+			

+		

 	
Classe CSSGabaritRendu visuelSchémaAdditions
+			
    
+				
  • Ajout de champs de saisie masqués statiques pour "externalReferer" et "subject"
    • 
+			

+				
 	

 	
n.d.Version 2.0n.d.n.d.Correctifsn/a
 	

 

 
-
Gabarit (dernière : v.2.0)

-
Notes sur la migration du gabarit

-
Composant du gabarit de site

-

-	

-		
Version 2.0

-		
Le html inséré par le plugiciel Data Ajax se trouve sur la page suivante : https://github.com/wet-boew/GCWeb/blob/master/sites/feedback/ajax/report-problem-fr.html.

-
<div data-ajax-replace="ajax/report-problem-fr.html">
-	<div class="row row-no-gutters">
-		<div class="col-sm-11 col-md-7 col-lg-6">
-			<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème ou une erreur sur cette page </a>
-		</div>
-	</div>
-</div>

-	

-	

-		
Avant, la version 1.0

-
<details class="brdr-0">
-	<summary class="btn btn-default text-center">Signaler un problème sur cette page</summary>
-	<div class="well row">
-		<div class="gc-rprt-prblm">
-			<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" >
-				{ formulaire de commentaires }
-			</div>
-			<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" >
-				<h3>Merci pour votre aide !</h3>
-				<p>Vous ne recevrez pas de réponse. Pour toute demande, veuillez <a href="https://www.canada.ca/fr/contact.html">nous contacter</a>.</p>
-			</div>
-		</div>
-	</div>
-</details>

-	

-

-
Formulaire de signalement d'un problème (SUP) (commentaires)

-
Référence des fichiers ajax implémentés

+
Exemple(s) pratique(s)

 
 
-
Version 4.0

-
<div class="row row-no-gutters"><div class="col-sm-11 col-md-7 col-lg-6">
-	<details class="brdr-0">
-		<summary class="btn btn-default text-center">Signaler un problème ou une erreur sur cette page</summary>
-		<div class="well row">
-			<div class="gc-rprt-prblm">
-				<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl">
-					<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback"
-						data-wb-postback='{
-							"success": ".success-message",
-							"failure": ".failure-message"}'
-						data-wb-jsonmanager='{
-							"name": "rap",
-							"extractor": [
-								{ "interface": "referer", "path": "externalReferer" },
-								{ "selector": "title", "path": "pageTitle" },
-								{ "interface": "locationHref", "path": "submissionPage" },
-								{ "selector": "html", "attr": "lang", "path": "lang" },
-								{ "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageOwner" },
-								{ "selector": "meta[name=\"dcterms.subject\"]", "attr": "content", "path": "subject" }
-							]
-						}'>
-						<div data-wb-json='{
-							"url": "#[rap]",
-							"mapping": [
-								{ "selector": "input", "attr": "name", "value": "/@id" },
-								{ "selector": "input", "attr": "value", "value": "/@value" }
-							]
-						}'>
-							<template>
-								<input type="hidden" name=" value=" />
-							</template>
-						</div>
-						<fieldset>
-							<legend>
-								<span class="field-name">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
-							</legend>
-							<div class="checkbox">
-								<label for="problem1">
-									<input name="problem1" id="problem1" type="checkbox" value="Yes" >Un lien, un bouton ou une vidéo ne fonctionne pas
-								</label>
-								<input name="problem1" type="hidden" value=">
-							</div>
-							<div class="checkbox">
-								<label for="problem2">
-									<input name="problem2" id="problem2" type="checkbox" value="Yes" >Il y a une erreur d'orthographe ou de grammaire
-								</label>
-								<input name="problem2" type="hidden" value=">
-							</div>
-							<div class="checkbox">
-								<label for="problem3">
-									<input name="problem3" id="problem3" type="checkbox" value="Yes" >Les renseignements sont incomplets
-								</label>
-								<input name="problem3" type="hidden" value=">
-							</div>
-							<div class="checkbox">
-								<label for="problem4">
-									<input name="problem4" id="problem4" type="checkbox" value="Yes" >L'information n'est plus à jour ou est erronée
-								</label>
-								<input name="problem4" type="hidden" value=">
-							</div>
-							<div class="checkbox">
-								<label for="problem5">
-									<input name="problem5" id="problem5" type="checkbox" value="Yes" >Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte
-								</label>
-								<input name="problem5" type="hidden" value=">
-							</div>
-							<div class="checkbox">
-								<label for="problem11">
-									<input name="problem11" id="problem11" type="checkbox" value="Yes" >Je n'arrive pas à trouver ce que je cherche
-								</label>
-								<input name="problem11" type="hidden" value=">
-							</div>
-								<div class="checkbox">
-									<label for="problem12">
-										<input name="problem12" id="problem12" type="checkbox" value="Yes" >Autre problème qui ne figure pas sur cette liste
-									</label>
-								<input name="problem12" type="hidden" value=">
-							</div>
-						</fieldset>
-						<button type="submit" class="btn btn-primary">Soumettre</button>
-					</form>
-				</div>
-				<div class="success-message hide">
-					<h3>Merci de votre aide!</h3>
-					<p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
-				</div>
-				<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>
-			</div>
-		</div>
-	</details>
-	</div>
-</div>
-

+
Comment mettre en œuvre

+
    
+	
  • Pour afficher le formulaire de commentaires sur la page, créez un <div> avec l'attribut suivant : data-ajax-replace="ajax/report-problem-fr.html".
    • 
+	
  • Pour la version HTML de base, un lien doit être créé dans un <div> qui pointe vers la page du formulaire de signalement d'un problème : <div><a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a></div>.
    • 
+

+
Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax.

+

+	Implémentation de Adobe Analytics
+	
Pour implémenter Adobe Analytics dans le formulaire Signaler un problème, ajoutez simplement l'attribut data-gc-analytics-rap à chaque case à cocher avec la valeur étant la même que le "label" de la langue actuelle, suivie d'un tiret et suivi par le "label" de l'autre langue.

+	
Par exemple :

+	
<div class="checkbox">
+	<label for="problem2">
+		<input name="problem2" id="problem2" type="checkbox" value="Yes" data-gc-analytics-rap="Il y a une erreur d'orthographe ou de grammaire-It has a spelling mistake">Il y a une erreur d'orthographe ou de grammaire
+	</label>
+	<input name="problem2" type="hidden" value="">
+</div>

+

+
+
Champs de saisie masqués

+
La variante Signaler un problème utilise JSON Manager et Data JSON pour obtenir des informations sur la page et générer des champs de saisie masqués dans le formulaire.

+
La balise suivante doit être présente dans la page : <meta name="author" content="[Nom du service]">
Où [Nom du ministère] est un nom de ministère du vocabulaire contrôlé de canada.ca, par exemple : gc:institutions/service-canada

+
+
Spécifique à GCWeb Jekyll

+
Pour appliquer cette variante sur une page donnée, vous devrez faire ce qui suit dans l'en-tête de la page ou dans les configurations du site (_config.yml).

+
    
+	
  • définir la variable feedbackPath à "ajax/report-problem-fr.html".
    • 
+	
  • définir la variable feedbackFallback à true.
    • 
+

 
-
Versions précédentes

+
Exemple de code

+{%- highlight html -%}
+

+	

+		

+			Signaler un problème sur cette page
+		

+	

+

+{%- endhighlight -%}
 

-	Version 3.0
-	
<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{"success":".success-message","failure":".failure-message","content":".form-content"}">
-	<fieldset>
-		<legend>
-			<span class="field-name">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
-		</legend>
-		<div class="checkbox">
-			<label for="problem1">
-				<input name="problem1" id="problem1" type="checkbox" value="Yes" >Un lien, un bouton ou une vidéo ne fonctionne pas
-			</label>
-			<input name="problem1" type="hidden" value="">
-		</div>
-		<div class="checkbox">
-			<label for="problem2">
-				<input name="problem2" id="problem2" type="checkbox" value="Yes" >Il y a une erreur d'orthographe ou de grammaire
-			</label>
-			<input name="problem2" type="hidden" value="">
-		</div>
-		<div class="checkbox">
-			<label for="problem3">
-				<input name="problem3" id="problem3" type="checkbox" value="Yes" >Les renseignements sont incomplets
-			</label>
-			<input name="problem3" type="hidden" value="">
-		</div>
-		<div class="checkbox">
-			<label for="problem4">
-				<input name="problem4" id="problem4" type="checkbox" value="Yes" >L'information n'est plus à jour ou est erronée
-			</label>
-			<input name="problem4" type="hidden" value="">
-		</div>
-		<div class="checkbox">
-			<label for="problem5">
-				<input name="problem5" id="problem5" type="checkbox" value="Yes" >Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte
-			</label>
-			<input name="problem5" type="hidden" value="">
-		</div>
-		<div class="checkbox">
-			<label for="problem11">
-				<input name="problem11" id="problem11" type="checkbox" value="Yes" >Je n'arrive pas à trouver ce que je cherche
-			</label>
-			<input name="problem11" type="hidden" value="">
-		</div>
-			<div class="checkbox">
-				<label for="problem12">
-					<input name="problem12" id="problem12" type="checkbox" value="Yes" >Autre problème qui ne figure pas sur cette liste
-				</label>
-			<input name="problem12" type="hidden" value="">
-		</div>
-	</fieldset>
-	<strong><button type="submit" class="btn btn-primary">Soumettre</button></strong>
-</form><div class="success-message hide">
-	<h3>Merci de votre aide!</h3>
-	<p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
-</div>
-<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>

+	Contenu ajouté via Ajax
+	{%- highlight html -%}
+	{%- include_relative ajax/report-problem-fr.html -%}
+	{%- endhighlight -%}
+

+
+
Itérations précédentes

+

+	Itération 4
+	
Voici une liste des changements qui se sont produits depuis l'itération précédente :

+	
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+	
Majeurs
+				
    
+					
  • Utilise JSON Manager Extractor et Data JSON pour générer des champs de saisie masqués
    • 
+				

+			
Additionsn/a
Correctifsn/a

+
+	
Exemple de code

+	{%- highlight html -%}
+	

+		

+			

+				Signaler un problème sur cette page
+			

+		

+	

+	{%- endhighlight -%}
+	

+		Contenu ajouté via Ajax
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v4-fr.html -%}
+		{%- endhighlight -%}
+	

 

+
 

-	Version 2.0
-	
<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{"success":".success-message","failure":".failure-message","content":".form-content"}"  >
-	<fieldset>
-		<legend>
-			<span class="field-name">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
-		</legend>
-		<div class="checkbox">
-			<label for="problem1">
-				<input name="problem1" id="problem1" type="checkbox" value="Yes" >Un lien, un bouton ou une vidéo ne fonctionne pas
-			</label>
-			<input name="problem1" type="hidden" value="">
-		</div>
-		<div class="checkbox">
-			<label for="problem2">
-				<input name="problem2" id="problem2" type="checkbox" value="Yes" >Il y a une erreur d'orthographe ou de grammaire
-			</label>
-			<input name="problem2" type="hidden" value="">
-		</div>
-		<div class="checkbox">
-			<label for="problem3">
-				<input name="problem3" id="problem3" type="checkbox" value="Yes" >Les renseignements sont incomplets
-			</label>
-			<input name="problem3" type="hidden" value="">
-		</div>
-		<div class="checkbox">
-			<label for="problem4">
-				<input name="problem4" id="problem4" type="checkbox" value="Yes" >L'information n'est plus à jour ou est erronée
-			</label>
-			<input name="problem4" type="hidden" value="">
-		</div>
-		<div class="checkbox">
-			<label for="problem5">
-				<input name="problem5" id="problem5" type="checkbox" value="Yes" >Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte (ex. Mon dossier Service Canada)
-			</label>
-			<input name="problem5" type="hidden" value="">
-		</div>
-		<ul>
-			<li class="checkbox">
-				<label for="problem6a">
-					<input name="problem6" id="problem6a" type="checkbox" value="Yes" >Accès CléGC
-				</label>
-				<input name="problem6" type="hidden" value="">
-			</li>
-			<li class="checkbox">
-				<label for="problem7">
-					<input name="problem7" id="problem7" type="checkbox" value="Yes" >Accès SecureKey Service de Concierge (justificatifs d'identité bancaires)
-				</label>
-				<input name="problem7" type="hidden" value="">
-			</li>
-			<li class="checkbox">
-				<label for="problem8">
-					<input name="problem8" id="problem8" type="checkbox" value="Yes" >Problème avec le Code d'accès personnel (CAP) ou avec le Code d'accès (CA) de l'assurance emploi
-				</label>
-				<input name="problem8" type="hidden" value="">
-			</li>
-			<li class="checkbox">
-				<label for="problem9">
-					<input name="problem9" id="problem9" type="checkbox" value="Yes" >Problème lié à la validation du numéro d'assurance sociale (NAS)
-				</label>
-				<input name="problem9" type="hidden" value="">
-			</li>
-			<li class="checkbox">
-				<label for="problem10">
-					<input name="problem10" id="problem10" type="checkbox" value="Yes" >Autre erreur lors de l'ouverture de session qui ne figure pas sur cette liste
-				</label>
-				<input name="problem10" type="hidden" value="">
-			</li>
-		</ul>
-		<div class="checkbox">
-			<label for="problem11">
-				<input name="problem11" id="problem11" type="checkbox" value="Yes" >Je n'arrive pas à trouver ce que je cherche
-			</label>
-			<input name="problem11" type="hidden" value="">
-		</div>
-			<div class="checkbox">
-				<label for="problem12">
-					<input name="problem12" id="problem12" type="checkbox" value="Yes" >Autre problème qui ne figure pas sur cette liste
-				</label>
-			<input name="problem12" type="hidden" value="">
-		</div>
-	</fieldset>
-	<strong><button type="submit" class="btn btn-primary">Soumettre</button></strong>
-</form><div class="success-message hide">
-	<h3>Merci de votre aide!</h3>
-	<p>Vous ne recevrez pas de réponse. Pour toute question, s'il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
-</div>
-<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>

+	Itération 3
+	
Voici une liste des changements qui se sont produits depuis l'itération précédente :

+	
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+	
Majeurs
+				
    
+					
  • Suppression des sous-options d'erreur de connexion.
    • 
+					
  • Option d'erreur de connexion renommée.
    • 
+				

+			
Additionsn/a
Correctifsn/a

+
+	
Exemple de code

+	{%- highlight html -%}
+	

+		

+			

+				Signaler un problème sur cette page
+			

+		

+	

+	{%- endhighlight -%}
+	

+		Contenu ajouté via Ajax
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v3-fr.html -%}
+		{%- endhighlight -%}
+	

 

+
 

-	Version 1.0
-	
<form action="#">
-	<fieldset>
-		<legend><span class="field-name">Veuillez cocher toutes les réponses pertinentes :</span></legend>
-		<div class="checkbox">
-			<label for="gc-rprt-prblm-f1">
-				<input type="checkbox" name="problem1" value="Oui" id="gc-rprt-prblm-f1" />Un lien, un bouton ou une vidéo ne fonctionne pas
-			</label>
-			<input name="problem1" type="hidden" value="Non" />
-		</div>
-		<div class="checkbox">
-			<label for="gc-rprt-prblm-f2">
-				<input type="checkbox" name="problem2" value="Oui" id="gc-rprt-prblm-f2" />Il y a une erreur d'orthographe ou de grammaire
-			</label>
-			<input name="problem2" type="hidden" value="Non" />
-		</div>
-		<div class="checkbox">
-			<label for="gc-rprt-prblm-f3">
-				<input type="checkbox" name="problem3" value="Oui" id="gc-rprt-prblm-f3" />Les renseignements sont incomplets
-			</label>
-			<input name="problem3" type="hidden" value="Non" />
-		</div>
-		<div class="checkbox">
-			<label for="gc-rprt-prblm-f4">
-				<input type="checkbox" name="problem4" value="Oui" id="gc-rprt-prblm-f4" />L'information n'est plus à jour ou est erronée
-			</label>
-			<input name="problem4" type="hidden" value="Non" />
-		</div>
-		<div class="checkbox">
-			<label for="gc-rprt-prblm-f5">
-				<input type="checkbox" name="problem5" value="Oui" id="gc-rprt-prblm-f5" />Je n'arrive pas à trouver ce que je cherche
-			</label>
-			<input name="problem5" type="hidden" value="Non" />
-		</div>
-		<div class="checkbox">
-			<label for="gc-rprt-prblm-f6">
-				<input type="checkbox" name="problem6" value="Oui" id="gc-rprt-prblm-f6" />Autre problème qui ne figure pas sur cette liste
-			</label>
-			<input name="problem6" type="hidden" value="Non" />
-		</div>
-	</fieldset>
-	<button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'>Soumettre</button>
-</form>

+	Itération 2
+	
Here is a list of changes that happened since the previous itération:

+	
+		
+			
+			
+		
+		
+			
+			
+		
+		
+			
+			
+		
+	
Majeurs
+				
    
+					
  • Refonte du gabarit pour utiliser data-ajax. Inclut la solution de secours pour la version HTML de base.
    • 
+					
  • Mise à jour du formulaire:
+						
      
+							
    • Implémente désormais wb-postback pour la validation des formulaires et n'utilise plus data-toggle lors de l'envoi.
      • 
+							
    • Ajout d'options d'erreur de connexion (problème 5 à problème 10).
      • 
+							
    • Ajout de messages d'erreur et de réussite.
      • 
+						
    
+					
    • 
+				

+			
Additionsn/a
Correctifsn/a

+
+	
Exemple de code

+	{%- highlight html -%}
+	

+		

+			

+				Signaler un problème sur cette page
+			

+		

 	

+	{%- endhighlight -%}
+	

+		Contenu ajouté via Ajax
+		{%- highlight html -%}
+		{%- include_relative ajax/deprecated/report-problem-v2-fr.html -%}
+		{%- endhighlight -%}
+	

+

+

+	Itération 1
+	
Exemple de code

+	{%- highlight html -%}
+	{%- include_relative ajax/deprecated/report-problem-v1-fr.html -%}
+	{%- endhighlight -%}
 

diff --git a/sites/feedback/feedback-en.html b/sites/feedback/feedback-en.html
deleted file mode 100644
index 81e81945a..000000000
--- a/sites/feedback/feedback-en.html
+++ /dev/null
@@ -1,31 +0,0 @@
----
-{
-	"title": "Page feedback form",
-	"language": "en",
-	"altLangPage": "feedback-fr.html",
-	"breadcrumbs": [
-		{ "title": "Canada.ca", "link": "https://www.canada.ca/en.html" }
-	],
-	"secondlevel": false,
-	"dateModified": "2022-04-26",
-	"share": "true",
-	"feedbackPath": "ajax/report-problem-en.html"
-}
----
-
-
This page feedback form leverage the version 2 of the page-details container which leverage the data ajax plugin.

-
Data ajax replace links:

-
    
-	
  • Version 2 - https://www.canada.ca/ .... /report-problem-en.html (link to come)
    • 
-	
  • Version 2 with Adobe Analytic - https://www.canada.ca/ .... /report-problem-en.html (link to come)
    • 
-	
  • Version 1 - Deprecated, see the documentation for a code sample
    • 
-

-
The version 2 of the page-details container leverage a progressive enhancement design and that is why a link element need be created to point at the report a problem form page: <a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>. You can experience that fallback through the basic HTML version mode.

-
HTML code

-
<div data-ajax-replace="ajax/report-problem-en.html">
-	<div class="row row-no-gutters">
-		<div class="col-sm-9 col-md-6 col-lg-5">
-			<a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
-		</div>
-	</div>
-</div>

diff --git a/sites/feedback/feedback-fr.html b/sites/feedback/feedback-fr.html
deleted file mode 100644
index fe2f3c9ba..000000000
--- a/sites/feedback/feedback-fr.html
+++ /dev/null
@@ -1,31 +0,0 @@
----
-{
-	"title": "Formulaire de commentaires de la page",
-	"language": "fr",
-	"altLangPage": "feedback-en.html",
-	"breadcrumbs": [
-		{ "title": "Canada.ca", "link": "https://www.canada.ca/en.html" }
-	],
-	"secondlevel": false,
-	"dateModified": "2022-04-26",
-	"share": "true",
-	"feedbackPath": "ajax/report-problem-fr.html"
-}
----
-
-
Ce formulaire de commentaires de page exploite la version 2 du conteneur page-details qui exploite le plugiciel data ajax.

-
Data ajax remplace les liens :

-
    
-	
  • Version 2 - https://www.canada.ca/ ... /signaler-probleme.html (lien à venir)
    • 
-	
  • Version 2 avec Adobe Analytic - https://www.canada.ca/ ... ./signaler-probleme.html (lien à venir)
    • 
-	
  • Version 1 - Obsolète, consultez la documentation pour un exemple de code
    • 
-

-
La version 2 du conteneur page-details implique une conception d'amélioration progressive et c'est pourquoi un lien doit être créé pour pointer vers la page du formulaire de signalement d'un problème : <a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a>. Vous pouvez faire l'expérience de ce repli via le mode de version HTML de base.

-
Le code HTML

-
<div data-ajax-replace="ajax/report-problem-fr.html">
-	<div class="row row-no-gutters">
-		<div class="col-sm-11 col-md-7 col-lg-6">
-			<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème ou une erreur sur cette page </a>
-		</div>
-	</div>
-</div>

diff --git a/sites/feedback/includes/feedback.html b/sites/feedback/includes/feedback.html
index 7d15638f0..13d38aa4b 100644
--- a/sites/feedback/includes/feedback.html
+++ b/sites/feedback/includes/feedback.html
@@ -2,21 +2,38 @@
 	{%- if page.feedbackPath -%}
 		{{ page.feedbackPath }}
 	{%- elsif site.global.feedbackPath and site.global.feedbackPath.first -%}
-		{{ site.global.feedbackPath[ i18nText-lang ] | relative_url }}
+		{{ setting-root }}{{ site.global.feedbackPath[ i18nText-lang ] }}
+	{%- endif -%}
+{%- endcapture -%}
+{%- capture feedbackFallback -%}
+	{%- if page.feedbackFallback -%}
+		{{ page.feedbackFallback }}
+	{%- elsif site.global.feedbackFallback -%}
+		{{ site.global.feedbackFallback }}
 	{%- endif -%}
 {%- endcapture -%}
 
 
-

-	

-		{%- if i18nText-lang == "en" -%}
-			

-		{%- else -%}
-			

-		{%- endif -%}
-			{{ i18nText-feedback }}
+		{% unless feedbackFallback and feedbackFallback != "" %}
+			class="wb-disable-allow"
+		{%- endunless -%}
+	{%- endif -%}
+	{% if page.feedbackContact %} data-feedback-link="{{page.feedbackContact.link}}" data-feedback-url="{{page.feedbackContact.url}}" {% endif %}
+	{% if page.feedbackData.section %} data-feedback-section="{{page.feedbackData.section}}" {% endif %}
+	{% if page.feedbackData.theme %} data-feedback-theme="{{page.feedbackData.theme}}" {% endif %}>
+	{%- if feedbackFallback and feedbackFallback != "" -%}
+		

+			{%- if i18nText-lang == "en" -%}
+				

+			{%- else -%}
+				

+			{%- endif -%}
+				{{ i18nText-feedback }}
+			

 		

-	

+	{%- else -%}
+		
+	{%- endif -%}
 

diff --git a/sites/feedback/index.json-ld b/sites/feedback/index.json-ld
index 355bb2467..1fd13b970 100644
--- a/sites/feedback/index.json-ld
+++ b/sites/feedback/index.json-ld
@@ -7,39 +7,59 @@
 		"modified": "dct:modified"
 	},
 	"title": {
-		"en": "Report a problem (RAP) - Feedback",
-		"fr": "Signaler un problème (SUP) - Commentaires"
+		"en": "Feedback area",
+		"fr": "Zone de rétroaction"
 	},
 	"description": {
-		"en": "Documentation on how to use the page feedback form.",
-		"fr": "Documentation sur l'utilisation de formulaire de commentaires de page."
+		"en": "Documentation on how to use the elements of the feedback area.",
+		"fr": "Documentation sur l'utilisation des éléments de la zone commentaires."
 	},
-	"modified": "2022-04-26",
+	"modified": "2023-01-10",
 	"componentName": "feedback",
 	"status": "stable",
 	"pages": {
 		"docs": [
 			{
-				"title": "Documentation for Page feedback form",
+				"title": "Documentation for the feedback area",
 				"language": "en",
 				"path": "feedback-docs-en.html"
 			},
 			{
-				"title": "Documentation pour formulaire de commentaire de page",
+				"title": "Documentation pour la zone de rétroaction",
 				"language": "fr",
 				"path": "feedback-docs-fr.html"
 			}
 		],
 		"examples": [
 			{
-				"title": "Page feedback form",
+				"title": "Page feedback tool",
 				"language": "en",
-				"path": "feedback-en.html"
+				"path": "page-feedback-en.html"
 			},
 			{
-				"title": "Formulaire de commentaire de page",
+				"title": "Outil de rétroaction sur la page",
 				"language": "fr",
-				"path": "feedback-fr.html"
+				"path": "page-feedback-fr.html"
+			},
+			{
+				"title": "Page feedback tool with contact link",
+				"language": "en",
+				"path": "page-feedback-contact-en.html"
+			},
+			{
+				"title": "Outil de rétroaction sur la page avec lien de contact",
+				"language": "fr",
+				"path": "page-feedback-contact-fr.html"
+			},
+			{
+				"title": "Report a problem",
+				"language": "en",
+				"path": "report-problem-en.html"
+			},
+			{
+				"title": "Signaler un problème",
+				"language": "fr",
+				"path": "report-problem-fr.html"
 			}
 		]
 	}
diff --git a/sites/feedback/page-feedback-contact-en.html b/sites/feedback/page-feedback-contact-en.html
new file mode 100644
index 000000000..e67b46b65
--- /dev/null
+++ b/sites/feedback/page-feedback-contact-en.html
@@ -0,0 +1,31 @@
+---
+{
+	"altLangPage": "page-feedback-contact-fr.html",
+	"breadcrumbs": [
+		{ "title": "Feedback area - Documentation", "link": "sites/feedback/feedback-docs-en.html" }
+	],
+	"dateModified": "2023-04-12",
+	"description": "Page feedback tool for Canada.ca",
+	"language": "en",
+	"title": "Page feedback tool with contact link",
+	"share": "true",
+	"feedbackContact": {
+		"link": "Contact Service Name",
+		"url": "https://canada.ca"
+	},
+	"feedbackData": {
+		"theme": "Theme",
+		"section": "Section"
+	}
+}
+---
+
+{% include alert-provisional.html siteroot="../../" %}
+{% include alert-softlaunch.html genre="e" component="Page feedback tool with contact link" version="provisional" %}
+
+

+
+
HTML code

+{% highlight text %}
+{% include_relative ajax/page-feedback-en.html %}
+{% endhighlight %}
diff --git a/sites/feedback/page-feedback-contact-fr.html b/sites/feedback/page-feedback-contact-fr.html
new file mode 100644
index 000000000..92fa17bed
--- /dev/null
+++ b/sites/feedback/page-feedback-contact-fr.html
@@ -0,0 +1,31 @@
+---
+{
+	"altLangPage": "page-feedback-contact-en.html",
+	"breadcrumbs": [
+		{ "title": "Zone de rétroaction - Documentation", "link": "sites/feedback/feedback-docs-fr.html" }
+	],
+	"dateModified": "2023-04-12",
+	"description": "Outil de rétroaction sur la page pour Canada.ca",
+	"language": "fr",
+	"title": "Outil de rétroaction sur la page avec lien de contact",
+	"share": "true",
+	"feedbackContact": {
+		"link": "Contacter Nom du service",
+		"url": "https://canada.ca/fr"
+	},
+	"feedbackData": {
+		"theme": "Thème",
+		"section": "Section"
+	}
+}
+---
+
+{% include alert-provisional.html siteroot="../../" %}
+{% include alert-softlaunch.html genre="e" component="Outil de rétroaction sur la page avec lien de contact" version="provisoire" %}
+
+

+
+
Code HTML

+{% highlight text %}
+{% include_relative ajax/page-feedback-fr.html %}
+{% endhighlight %}
diff --git a/sites/feedback/page-feedback-en.html b/sites/feedback/page-feedback-en.html
new file mode 100644
index 000000000..a9f1ebed8
--- /dev/null
+++ b/sites/feedback/page-feedback-en.html
@@ -0,0 +1,27 @@
+---
+{
+	"altLangPage": "page-feedback-fr.html",
+	"breadcrumbs": [
+		{ "title": "Feedback area - Documentation", "link": "sites/feedback/feedback-docs-en.html" }
+	],
+	"dateModified": "2023-01-10",
+	"description": "Page feedback tool for Canada.ca",
+	"language": "en",
+	"title": "Page feedback tool",
+	"share": "true",
+	"feedbackData": {
+		"theme": "Theme",
+		"section": "Section"
+	}
+}
+---
+
+{% include alert-provisional.html siteroot="../../" %}
+{% include alert-softlaunch.html genre="e" component="Page feedback tool" version="provisional" %}
+
+

+
+
HTML code

+{% highlight text %}
+{% include_relative ajax/page-feedback-en.html %}
+{% endhighlight %}
diff --git a/sites/feedback/page-feedback-fr.html b/sites/feedback/page-feedback-fr.html
new file mode 100644
index 000000000..a94f1538e
--- /dev/null
+++ b/sites/feedback/page-feedback-fr.html
@@ -0,0 +1,27 @@
+---
+{
+	"altLangPage": "page-feedback-en.html",
+	"breadcrumbs": [
+		{ "title": "Zone de rétroaction - Documentation", "link": "sites/feedback/feedback-docs-fr.html" }
+	],
+	"dateModified": "2023-01-10",
+	"description": "Outil de rétroaction sur la page pour Canada.ca",
+	"language": "fr",
+	"title": "Outil de rétroaction sur la page",
+	"share": "true",
+	"feedbackData": {
+		"theme": "Thème",
+		"section": "Section"
+	}
+}
+---
+
+{% include alert-provisional.html siteroot="../../" %}
+{% include alert-softlaunch.html genre="e" component="Outil de rétroaction sur la page" version="provisoire" %}
+
+

+
+
Code HTML

+{% highlight text %}
+{% include_relative ajax/page-feedback-fr.html %}
+{% endhighlight %}
diff --git a/sites/feedback/report-problem-en.html b/sites/feedback/report-problem-en.html
new file mode 100644
index 000000000..8acaef12f
--- /dev/null
+++ b/sites/feedback/report-problem-en.html
@@ -0,0 +1,21 @@
+---
+{
+	"title": "Report a problem",
+	"language": "en",
+	"altLangPage": "report-problem-fr.html",
+	"breadcrumbs": [
+		{ "title": "Feedback area - Documentation", "link": "sites/feedback/feedback-docs-en.html" }
+	],
+	"secondlevel": false,
+	"dateModified": "2023-01-10",
+	"share": "true",
+	"feedbackPath": "ajax/report-problem-en.html",
+	"feedbackFallback": true
+}
+---
+

+
+
Code HTML

+{% highlight text %}
+{% include_relative ajax/report-problem-en.html %}
+{% endhighlight %}
diff --git a/sites/feedback/report-problem-fr.html b/sites/feedback/report-problem-fr.html
new file mode 100644
index 000000000..311f779a7
--- /dev/null
+++ b/sites/feedback/report-problem-fr.html
@@ -0,0 +1,21 @@
+---
+{
+	"title": "Signaler un problème",
+	"language": "fr",
+	"altLangPage": "report-problem-en.html",
+	"breadcrumbs": [
+		{ "title": "Zone de rétroaction - Documentation", "link": "sites/feedback/feedback-docs-fr.html" }
+	],
+	"secondlevel": false,
+	"dateModified": "2023-01-10",
+	"share": "true",
+	"feedbackPath": "ajax/report-problem-fr.html",
+	"feedbackFallback": true
+}
+---
+

+
+
Code HTML

+{% highlight text %}
+{% include_relative ajax/report-problem-fr.html %}
+{% endhighlight %}
diff --git a/sites/includes/settings.liquid b/sites/includes/settings.liquid
index 631fce2fc..16eb9205a 100644
--- a/sites/includes/settings.liquid
+++ b/sites/includes/settings.liquid
@@ -12,3 +12,4 @@
 	https://wet-boew.github.io/themes-dist/GCWeb/{{ setting-packageName }}
 {%- endcapture -%}
 {%- assign setting-resourcesBasePathWetboew = "https://wet-boew.github.io/themes-dist/GCWeb/wet-boew" -%}
+{%- assign setting-root = "/GCWeb" -%}
diff --git a/sites/page-details/_base.scss b/sites/page-details/_base.scss
index 82b9c7626..f1029d698 100644
--- a/sites/page-details/_base.scss
+++ b/sites/page-details/_base.scss
@@ -76,15 +76,15 @@ main {
 		}
 	}
 
-	.well {
-		margin: {
-			left: -$details-identation;
-			right: -$details-identation;
-		}
-	}
-
 	details {
 		margin-bottom: 0;
+
+		.well {
+			margin: {
+				left: -$details-identation;
+				right: -$details-identation;
+			}
+		}
 	}
 
 	// Add a top margin on the share button (only if its plugin has initialized).
diff --git a/sites/page-details/includes/footer.html b/sites/page-details/includes/footer.html
index 43abe5ae6..1a189a7e1 100644
--- a/sites/page-details/includes/footer.html
+++ b/sites/page-details/includes/footer.html
@@ -1,27 +1,25 @@
 

 	
{{ i18nText-pageDetails }}

 
-	{%- if page.noReportProblem -%}
+	{% assign col-modified = "col-xs-12" %}
+	{%- if page.noFeedback != true -%}
+		{% assign col-feedback = "col-sm-8 col-md-9 col-lg-9" %}
 		{%- if page.share -%}
-			{% assign col-share = "col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" %}
-			{% assign col-modified = "col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3" %}
-		{%- else -%}
-			{% assign col-modified = "col-xs-12" %}
+			{% assign col-share = "col-sm-4 col-md-3" %}
 		{%- endif -%}
 	{%- else -%}
-		{% assign col-feedback = "col-sm-8 col-md-9 col-lg-9" %}
 		{%- if page.share -%}
-			{% assign col-share = "col-sm-4 col-md-3" %}
+			{% assign col-share = "col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" %}
+			{% assign col-modified = "col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3" %}
 		{%- endif -%}
-		{% assign col-modified = "col-xs-12" %}
 	{%- endif -%}
 
 	

-		{%- unless page.noReportProblem -%}
+		{%- if page.noFeedback != true -%}
 			
-		{%- endunless -%}
+		{%- endif -%}
 		{%- if page.share -%}
 			
 		{%- endif -%}
diff --git a/sites/page-details/page-details-without-buttons-en.html b/sites/page-details/page-details-without-buttons-en.html
index a8418c98f..6868bf8b8 100644
--- a/sites/page-details/page-details-without-buttons-en.html
+++ b/sites/page-details/page-details-without-buttons-en.html
@@ -8,7 +8,7 @@
 	],
 	"secondlevel": false,
 	"dateModified": "2022-04-14",
-	"noReportProblem": true
+	"noFeedback": true
 }
 ---
 
diff --git a/sites/page-details/page-details-without-buttons-fr.html b/sites/page-details/page-details-without-buttons-fr.html
index 93d8c6046..ffc66742c 100644
--- a/sites/page-details/page-details-without-buttons-fr.html
+++ b/sites/page-details/page-details-without-buttons-fr.html
@@ -8,7 +8,7 @@
 	],
 	"secondlevel": false,
 	"dateModified": "2022-04-14",
-	"noReportProblem": true
+	"noFeedback": true
 }
 ---
 
diff --git a/sites/page-details/page-details-without-report-btn-en.html b/sites/page-details/page-details-without-report-btn-en.html
index 2309601b8..20e32ccfe 100644
--- a/sites/page-details/page-details-without-report-btn-en.html
+++ b/sites/page-details/page-details-without-report-btn-en.html
@@ -9,7 +9,7 @@
 	"secondlevel": false,
 	"dateModified": "2022-04-14",
 	"share": true,
-	"noReportProblem": true
+	"noFeedback": true
 }
 ---
 
diff --git a/sites/page-details/page-details-without-report-btn-fr.html b/sites/page-details/page-details-without-report-btn-fr.html
index 94944df34..66aace63c 100644
--- a/sites/page-details/page-details-without-report-btn-fr.html
+++ b/sites/page-details/page-details-without-report-btn-fr.html
@@ -9,7 +9,7 @@
 	"secondlevel": false,
 	"dateModified": "2022-04-14",
 	"share": true,
-	"noReportProblem": true
+	"noFeedback": true
 }
 ---
 
diff --git a/sites/theme.scss b/sites/theme.scss
index 32b29ef13..83bcc6334 100644
--- a/sites/theme.scss
+++ b/sites/theme.scss
@@ -74,6 +74,7 @@
 @import "search/base";
 @import "secondary-menu/base";
 @import "page-details/base";
+@import "feedback/base";
 @import "gcweb-menu/base";
 @import "authentication/base";
 @import "header/base";
@@ -311,6 +312,7 @@
 
 	@import "baseline/lists/screen-md-min";
 	@import "gcweb-menu/screen-md-min";
+	@import "feedback/screen-md-min";
 
 	@import "wet-boew/src/plugins/feeds/screen-md-min";
 	@import "wet-boew/src/plugins/tabs/screen-md-min";
@@ -366,6 +368,7 @@
 	@import "wet-boew/src/base/views/screen-sm-min-to-screen-sm-max";
 
 	@import "search/screen-sm-min-to-screen-sm-max";
+	@import "feedback/screen-sm-min-to-screen-sm-max";
 
 	@import "../templates/campaign/screen-sm-min-to-screen-sm-max";
 }
@@ -406,6 +409,7 @@
 	@import "search/print";
 	@import "secondary-menu/print";
 	@import "page-details/print";
+	@import "feedback/print";
 
 	@import "wet-boew/src/plugins/footnotes/print";
 	@import "wet-boew/src/plugins/geomap/print";
diff --git a/templates/home/home-en.html b/templates/home/home-en.html
index c4af65ddc..cb6114e01 100644
--- a/templates/home/home-en.html
+++ b/templates/home/home-en.html
@@ -4,7 +4,7 @@
 altLangPage: home-fr.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 breadcrumbs: false
 ---
 
diff --git a/templates/home/home-fr.html b/templates/home/home-fr.html
index becf0d7ff..f597052c4 100644
--- a/templates/home/home-fr.html
+++ b/templates/home/home-fr.html
@@ -4,7 +4,7 @@
 altLangPage: home-en.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 breadcrumbs: false
 ---
 
diff --git a/templates/thematic/dark-theme-home-en.html b/templates/thematic/dark-theme-home-en.html
index 8978dddd0..9df0df8e2 100644
--- a/templates/thematic/dark-theme-home-en.html
+++ b/templates/thematic/dark-theme-home-en.html
@@ -4,7 +4,7 @@
 altLangPage: dark-theme-home-fr.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 share: true
 pageclass: provisional dark-theme
 ---
diff --git a/templates/thematic/dark-theme-home-fr.html b/templates/thematic/dark-theme-home-fr.html
index 7f6d9ec55..8398d74ae 100644
--- a/templates/thematic/dark-theme-home-fr.html
+++ b/templates/thematic/dark-theme-home-fr.html
@@ -4,7 +4,7 @@
 altLangPage: dark-theme-home-en.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 share: true
 pageclass: provisional dark-theme
 ---
diff --git a/templates/thematic/pink-day-home-en.html b/templates/thematic/pink-day-home-en.html
index c87c1a9d8..313b7d6ba 100644
--- a/templates/thematic/pink-day-home-en.html
+++ b/templates/thematic/pink-day-home-en.html
@@ -4,7 +4,7 @@
 altLangPage: pink-day-home-fr.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 share: true
 pageclass: provisional pnkDy-theme
 ---
diff --git a/templates/thematic/pink-day-home-fr.html b/templates/thematic/pink-day-home-fr.html
index aec32142c..fac217ff7 100644
--- a/templates/thematic/pink-day-home-fr.html
+++ b/templates/thematic/pink-day-home-fr.html
@@ -4,7 +4,7 @@
 altLangPage: pink-day-home-en.html
 dateModified: 2021-07-07
 layout: home
-noReportProblem: true
+noFeedback: true
 share: true
 pageclass: provisional pnkDy-theme
 ---