v1.2.0
  1. Foundations
  2. How-tos
  3. Patterns
    1. Autocomplete
    2. Chat
    3. Description list
    4. Fallback image
    5. Feedback
    6. Focus indicator
    7. Footer
    8. Header
    9. Hero
    10. IIIF Image
    11. Page title
    12. Results per page

Feedback

A feedback component that asks a yes/no question and links to a feedback form.

Ask visitors if they found what they need and invite them to share feedback.

When to use

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:

  • "Contact us" appears after a "no" answer and is for the visitor and helps them get support finding what they need.
  • "Share your feedback" is always visible and is for us and invites visitors to help improve the site. The form is managed by digital library development.

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.

When to consider something else

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.

How to use

Place the component at the bottom of the page, above the footer.

Default

Asks "Did you find what you need?" with yes/no buttons and a link to the feedback form.

<pennlibs-feedback></pennlibs-feedback>

Feedback link only

Use hide-question to show only the "share your feedback" link without the yes/no question.

<pennlibs-feedback hide-question></pennlibs-feedback>

Listen for responses

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>

Repeat visits

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.

Attributes

Attribute Description Type Default
hide-question When true, hides the yes/no question and only shows the "share your feedback" link. boolean false

Events

Event Description
pennlibs-feedback Emitted when a visitor answers the feedback question. Includes the question, answer, current URL, and page heading/title for context.

Design System

About Writing for users Build digital spaces v1.2.0