Back to all examples

Link the user to give feedback to the service

import { GoabMicrositeHeader } from "@abgov/react-components";

export function LinkTheUserToGiveFeedbackToTheService() {
  const onClick = () => {
    console.log("Feedback clicked");
    alert("Thank you for your feedback!");
  };

  return <GoabMicrositeHeader type="alpha" onFeedbackClick={onClick} />;
}
onFeedbackClick(): void {
    console.log("Feedback clicked");
    alert("Thank you for your feedback!");
  }
<goab-microsite-header type="alpha" (onFeedbackClick)="onFeedbackClick()"></goab-microsite-header>
document.getElementById("microsite-header").addEventListener("_feedbackClick", () => {
  console.log("Feedback clicked");
  alert("Thank you for your feedback!");
});
<goa-microsite-header type="alpha" id="microsite-header"></goa-microsite-header>

Use the microsite header’s feedback functionality to collect user feedback during alpha or beta phases of a service.

When to use

Use this pattern when:

  • Your service is in alpha or beta phase
  • You want to actively collect user feedback
  • Building a citizen-facing government service
  • The service is still being developed and improved

Considerations

  • Use the onFeedbackClick handler to define feedback behavior
  • Consider linking to a feedback form or opening a modal
  • The feedback link appears automatically on alpha/beta headers
  • Ensure the feedback mechanism is accessible and easy to use