Support/Live Chat/UI

This page offers ideas and suggestions for how UI could be designed to meet our requirements.

Live Chat dashboard

The dashboard is the hub for all things chat.

Required

• List current chats in the queue, including question details
  • Users in the Live Chat helpers group must be able to pick one of these to accept. (Defined in permissions section of requirements page)
• List active chats by all agents, including question details
  • Users in the Room Monitors group must be able to join and monitor any of these chats. (Defined in permissions section of requirements page)
• Show whether the queue is open, full, or closed
• Show the usernames of all active agents

Optional

• Show how many chats we've answered today
• Chart showing which issues/tags are common today
• Karma/per-helper data (leaderboard)
• Satisfied user counter (based on exit polling)

Activity bar

The activity bar is the main UI element of live chat. It is the selector for current chats and the main status indicator for chat agents. Features it will implement:

• Button for showing/hiding notifications
• Button to return to chat dashboard
• Tab for each open chat
• Color changes to indicate status
  • Notification button turns red when there are unseen notifications
  • Dashboard button turns yellow when new chats enter queue, red if chats are about ready to time out of the queue
  • Individual chat tabs given a "selected" look when selected
  • Individual chat tabs turn yellow when there's activity
  • Individual chat tabs turn red when there's "urgent" activity. (We need to define what's urgent)
  • The entire bar should change color when chat is open vs. closed vs. full.

Example of an activity bar overlaying a SUMO page, with notification and chat dialogs pinned to it:

Chat window/overlay/tab

This is a simple chat interface for communicating in a multiuser chatroom. Features it will implement:

• Question details (Title, nickname, time waiting in queue, etc)
• Canned responses
• Button for following up and/or transferring to forum (P2 requirement)
• Button for viewing previous chats by this user (P3 requirement)
• An ability to type messages to the user
• An ability to either type or choose commands
  • /invite username (invites the username to this chat)
  • /kick username (boots the user out of the room, room monitors only)
  • /tag tag1,tag2 (P2 requirement) (see separate chat tag PRD at Support/Live Chat)
• Handles for resizing, dragging, and pinning/unpinning (if used as overlay)

Layout possibilities

• Bar across bottom
• Sidebar
• Popup window