v1.3.1
  1. Foundations
  2. How-tos
  3. Patterns
    1. Autocomplete
    2. Button
    3. Callout
    4. Chat
    5. Description List
    6. Fallback Image
    7. Feedback
    8. Focus Indicator
    9. Footer
    10. Header
    11. Hero
    12. IIIF Image
    13. Link
    14. Page Title
    15. 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 People Build Digital Spaces v1.3.1