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

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

About Writing for users Build digital spaces v1.1.0