v1.6.0
    • Get started

      Install the package, load its styles and components, and build your first page.

    • Foundations

      The content guide, CSS utilities, tokens, and the principles behind every pattern.

    • Patterns

      Every pattern with a live example, when to use it, and where it's already in use.

    Feedback

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

    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.

    Where it's used

    Design System

    Get started Foundations Patterns Release notes · v1.6.0 Design notes