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.

    Chat

    Integrate live chat support that assists users as they explore your website.

    When to use

    Implement chat when your website domain includes library.upenn.edu.

    How to use

    Place chat at the end of your HTML document, just before the closing body tag.

    Relevant guidelines

    • 1.3.2 Meaningful Sequence — Position chat at the end of your HTML page so keyboard users can find it easily.
    • 2.4.1 Bypass Blocks — Create a "Skip to chat" link pointing to #pennlibs-chat at the top of your website to help users bypass content.
    • 3.2.5 Consistent Help — Design help and support features that users can consistently locate.

    Default

    <pennlibs-chat></pennlibs-chat>
    

    Where it's used

    Design System

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