Language selection

Search


Page feedback tool: Canada.ca design

Last updated: 2023-10-06

The feedback tool is an optional pattern to collect feedback on the page experience. When in use, it is included at the bottom of the page before the date modified.

On this page

When to use

Consider adding the page feedback tool to:

What to avoid

Avoid using the page feedback tool on pages where there is no plan to monitor comments or take action. We also don’t recommend using the tool within secure spaces or pages with sensitive subject material.

Additional behaviours to avoid when analyzing feedback

Content and design

The feedback tool invites visitors to:

Place the tool at the bottom of the page before the date modified. It's aligned to the left of the page before the “Share this page” widget. You can opt to use the page feedback tool in place of the "Report a problem" pattern. It's not mandatory to add the feedback pattern when removing “Report a problem” from your page.

The page feedback pattern has 3 states:

This pattern also has detailed documentation for use and analysis of feedback.

Page feedback tool (Analytics and feedback)

Content specifications

When you first add the feedback tool to your page, use the default option without the contact link.

Only consider adding a contact link if you have tried to make the page content clearer for how to contact the program or service and users are still using the feedback tool to get a response for their situation.

The link can go to an HTML page or an email address.

Keep the link text short. The recommended wording is “Contact [the Service Name]”

Interactions

The feedback pattern has 3 states:

For all of these states, the user stays on the same HTML page as they interact with the feedback pattern.

On page load, the feedback pattern displays the prompt “Did you find what you were looking for” followed by buttons for “Yes” and “No”.

If a user selects "No" the next step asks the user to provide more details about their experience.

It begins with a heading labelled "Please provide more details", followed by the text "You will not receive a reply. Don't include personal information (telephone, email, SIN, financial, medical, or work details). Maximum 300 characters". After selecting "Submit", the user is shown a thank you message.

Then there is an open text field to capture the feedback.

If the contact option is used, a contact link for the service is placed inside an expand/collapse pattern labeled “Need urgent help with a problem? Contact us” located before the heading and open text field.

The user selects the “Submit” button to send their feedback. After selecting "Submit", the user is shown a thank you message with a green checkmark to indicate that their feedback has been successfully sent.

If a user selects "Yes" they will only be shown a thank you message.

Design specifications

The feedback pattern replaces the "Report a problem" pattern when in use.

Grey well

Typography

Buttons

Thank you checkmark icon

Visual examples

1. Initial view of the feedback tool

1. Initial view of the feedback tool. Text version below:
Image description: Initial view of the feedback tool

On page load, the feedback is located at the bottom of the web page above the date modified. A small gray well includes the prompt “Did you find what you were looking for?” followed by buttons for “Yes” and “No”.

2a. Default view after selecting "No"

2a. Default view after selecting No. Text version below:
Image description: Default view after selecting "No"

After interacting with the “No” button, a text entry screen will replace the prompt. There is a heading for “Please provide more details” followed by instructions to not include personal information: “You will not receive a reply. Don’t include personal information (telephone, email, SIN financial, medical, or work details. Maximum 300 characters.” There is a small text entry box followed by a button for “Submit”.

2b. Optional view after selecting "No" with contact option

The expand/collapse pattern labeled “Need urgent help with a problem? Contact us” will be closed by default.

2b. Optional view after selecting No with contact option. Text version below:
Image description: Optional view after selecting "No" with contact option

After interacting with the “No” button, a text entry screen will replace the prompt.

In the contact option, there is an expand/collapse pattern with the header “Need urgent help with a problem? Contact us”. When the expand/collapse pattern is opened, there is a customizable link to contact the service.

After the expand/collapse pattern, there is a heading for “Please provide more details” followed by instructions to not include personal information: “You will not receive a reply. Don’t include personal information (telephone, email, SIN financial, medical, or work details. Maximum 300 characters.” There is a small text entry box followed by a button for “Submit”.

3. View after selecting "Yes" or after submitting feedback

3. View after selecting Yes or after submitting feedback. Text version below:
Image description: View after selecting "Yes" or after submitting feedback

When users select “Yes” from the initial prompt or after submitting their feedback, a thank you message is displayed. There is a green checkmark icon followed by the heading “Thank you for your feedback”.

How to implement

Add the feedback tool to the bottom of a content page after the page content and before the date modified.

Feedback tool code for pages on the Managed Web Service (MWS)

Use this feedback code for any page hosted on the Adobe Managed Web Service.

Instructions for MWS pages

Add the feedback component

How to add the feedback component to your page in Adobe Experience Manager (AEM). (Internal only on GCPedia)

Optional Add a “section” hidden value in the feedback code

This is useful when you want to download feedback for multiple pages at the same time.

Consider including this value when you're adding the feedback tool to multiple pages on the same topic, such as “passports” or “employment insurance”.

This is a unilingual value - enter the English section value to your English and French pages.

If you would like to add a new section value that is not currently in the Feedback Viewer, contact the Digital Transformation Office. We will add the new section value into the Feedback Viewer.

Email: cds.dto-btn.snc@servicecanada.gc.ca

Optional Contact link

Only consider adding a contact link if you have tried to make the page content clearer for how to contact the program or service and users are still using the feedback tool to get a response for their situation.

Feedback tool code for pages outside the Managed Web Service (MWS)

Use these instructions for any page that is not hosted on the Adobe Managed Web Service.

Instructions for non-MWS pages

Add the feedback component

Insert the feedback tool code where the “Report a problem on this page” is located in your page's HTML.

Add the mandatory hidden values

Update the data attribute for the institutional acronym. This is a unilingual value - enter the English value to your English and French pages.

Canada.ca institutional acronyms
  • AAFC
  • ATSSC
  • CATSA
  • CFIA
  • CIRNAC
  • NSERC
  • CBSA
  • CCG
  • CGC
  • CIHR
  • CIPO
  • CRA
  • CRTC
  • CSA
  • CSEC
  • CSPS
  • DFO
  • DND
  • ECCC
  • ESDC
  • FCAC
  • FIN
  • GAC
  • HC
  • INFC
  • IRCC
  • ISC
  • ISED
  • JUS
  • LAC
  • NFB
  • NRC
  • NRCan
  • OSB
  • PBC
  • PC
  • PCH
  • PCO
  • PHAC
  • PS
  • PSC
  • SSC
  • PSPC
  • RCMP
  • StatCan
  • TBS
  • TC
  • VAC
  • WAGE
  • WD

Recommended Add a "theme" hidden value in the feedback code

This is useful when you want to download feedback for an entire theme of pages at the same time.

In most cases, you should include the Canada.ca theme for your content (full list below).

This is a unilingual value - enter the English theme value to your English and French pages.

Canada.ca theme values
  • AboutGov
  • Benefits
  • Business
  • CanadaTheWorld
  • Culture
  • Defense
  • Environment
  • Health
  • Immigration
  • Indigenous
  • Jobs
  • Money
  • Policing
  • PublicService
  • Science
  • Taxes
  • Transport
  • Travel
  • Veterans

If you would like to add a new theme value that is not currently in the Feedback Viewer, contact the Digital Transformation Office. We will add the new theme value into the Feedback Viewer.

Email: cds.dto-btn.snc@servicecanada.gc.ca

Optional Add a “section” hidden value in the feedback code

This is useful when you want to download feedback for multiple pages at the same time.

Consider including this value when you're adding the feedback tool to multiple pages on the same topic, such as “passports” or “employment insurance”.

This is a unilingual value - enter the English section value to your English and French pages.

If you would like to add a new section value that is not currently in the Feedback Viewer, contact the Digital Transformation Office. We will add the new section value into the Feedback Viewer.

Email: cds.dto-btn.snc@servicecanada.gc.ca

Optional Contact link

Only consider adding a contact link if you have tried to make the page content clearer for how to contact the program or service and users are still using the feedback tool to get a response for their situation.

Accessing and analyzing feedback

Feedback can be viewed and downloaded as CSV or Excel files at any time using the Feedback Viewer website.

The Feedback Viewer is a password protected environment available to all page feedback participants. Contact the DTO to get access to the site.

Email: cds.dto-btn.snc@servicecanada.gc.ca

Full guidance for using and analyzing page feedback

Research and rationale

Research findings

Blog post: Collect feedback, find issues

Policy rationale

The Guideline for Service and Digital requires client feedback to be an integral part of service or product design. It can take several forms, including using the page feedback tool.

Page details

Date modified: