A feedback component that asks a yes/no question and links to a feedback form.
Use feedback on pages where you want to measure whether visitors are finding what they need. It pairs a quick yes/no question with a link to a longer feedback form.
The component shows two links that serve different purposes:
After a "yes" answer, the component shows "Thank you for letting us know." After a "no," it shows "We'd like to help. Contact us and let us know what you're looking for." This leads with an offer to help while tying back to the question they just answered.
Skip the inline question on pages where the yes/no prompt does not make sense. You can still show the feedback link on its own using the hide-question attribute.
Place the component at the bottom of the page, above the footer.
Asks "Did you find what you need?" with yes/no buttons and a link to the feedback form.
<pennlibs-feedback></pennlibs-feedback>
Use hide-question to show only the "share your feedback" link without the yes/no question.
<pennlibs-feedback hide-question></pennlibs-feedback>
When a visitor answers the question, the component emits a pennlibs-feedback event with details about the response.
<script>
document.addEventListener('pennlibs-feedback', (event) => {
console.log(event.detail);
// { question, answer, url, pageHeading, pageTitle }
});
</script>
After answering, the visitor sees a confirmation message for 5 minutes. After that or when the tab is closed, the question reappears. Each page tracks answers independently, so visitors can respond on every page they visit.
| Attribute | Description | Type | Default |
|---|---|---|---|
hide-question | When true, hides the yes/no question and only shows the "share your feedback" link. | boolean | false |
| Event | Description |
|---|---|
pennlibs-feedback | Emitted when a visitor answers the feedback question. Includes the question, answer, current URL, and page heading/title for context. |