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

Chat

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

Provide users with instant access to live help.

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>

Design System

Get started Content & writing v1.4.0