v1.4.0
  1. Home
  2. Get started
  3. Foundations
  4. Patterns
    1. Accordion
    2. Autocomplete
    3. Button
    4. Callout
    5. Chat
    6. Description List
    7. Details
    8. Expand Text
    9. Fallback Image
    10. Feedback
    11. Focus Indicator
    12. Footer
    13. Header
    14. Hero
    15. IIIF Image
    16. Link
    17. Page Title
    18. Results per Page
    19. Service Switcher
  5. What's new

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>

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

Get started Content & writing v1.4.0