Workspace / Components

Agent chat

Provides a way for agents to chat with customers. Agents can send and receive messages as well as documents and image files.

Overview

  • Release version
    Yokohama
  • Available sinceQuebec
  • A11Y WCAG 2.1 AA
ServiceNow link
Agent chat code documentation

UIB and developer guidance

Figma link
Agent chat Figma component

Figma library with components for designing Workspace.

Anatomy

Learn about the individual parts of agent chat.

Conversation anatomy

conversation anatomy
  1. System message: Displays messages from the system, such as noting when an agent enters or leaves a conversation, or when an action is performed
  2. Timestamp: Reflects the time zone preferences set by the user in Workspace
  3. Inbound avatar (optional): Shows the image or initials of the requester sending a message (the avatar can be disabled in the admin configuration)
  4. Inbound message: Displays the message from a virtual agent or requester
  5. Outbound message: Displays the message sent by a live agent
  6. Agent avatar: Shows the image or initials of the agent sending a message (the avatar can be disabled in the admin configuration)
  7. Private chat (optional): Shows the message that agents can share with each other (or a supervisor) without a requester seeing (messages display in a separate color)
footer anatomy
  1. Public/Private chat tabs (optional): Allows an agent to switch between private and public chats
  2. Message input: Provides an input field to write messages
  3. Quick actions menu: Provides specially configured quick actions
  4. Quick action buttons: Activate quick actions like Attach file, Transfer queue, Transfer agent, or other configurations
  5. Send button: Sends the message

Usage

A chat interaction record is funneled into a queue, assigned, and accepted by an agent. The agent can then join the chat with a requester. Agents can send and receive messages as well as documents and image files.

Design recommendations

Learn how to apply agent chat in your design.

portrait orientation
Do

Use the agent chat component in a portrait orientation.

landscape orientation
Don’t

Avoid using the agent chat component in a landscape orientation.

agent chat proper display
Do

Use the maximum available vertical space and full width required by the agent chat component.

agent chat improper display
Don’t

Don't place the agent chat component in a container smaller than the required width, or the design will produce a horizontal scrollbar.

Alignment and positioning

The agent chat component has a fixed width and a flexible height that fill 100 percent of its container.

Behavior

Learn how agent chat behaves when the display changes or a user interacts with the component.

Responsive behaviors

Agent chat displays a vertical scrollbar to accommodate conversations with messages requiring the vertical space. Agent chat expands to fit the vertical space of the container. The agent chat component has a fixed width, so the component should be placed in containers sized appropriately to avoid horizontal scrollbars.

agent chat with vertical scrollbar

Interactions

Learn how agent chat responds when a user interacts with it.

Quick actions

Agent chat provides both default and custom configuration quick actions to perform complex interactions within the chat interface.

agent chat with quick action operation

In this example, an agent transfers to another queue by clicking the arrow quick action button on the toolbar.

Public vs. private chat

Private chat mode allows agents to have a conversation with another agent or supervisor, without the messages being seen by the requester.

agent chat private chat operation

In this example, an agent has turned on a private chat mode to maintain confidential messages with another agent.

Usability

Agent chat complies with internationalization and accessibility requirements, other than those specified here.

Internationalization

Agent chat does not currently adapt its interface to support RTL languages. The component does, however, provide a configurable dynamic translation feature for a user speaking in one language to communicate with an agent speaking in another language.

Dynamic translation anatomy

agent chat dynamic translation operation
  1. Translate button: Allows a user to see the original, untranslated message sent in a popover
  2. Original message popover: Reveals the original text entered by the user, allowing the agent to troubleshoot issues with the translations manually, as needed.

Accessibility

Learn how to access the actionable elements of agent chat through keyboard interactions and screen readers.

Keyboard interactions

You can access the actionable elements of agent chat with these keyboard keys:

  • Tab: Moves focus forward through chat controls
  • Shift + Tab: Moves focus backward through chat controls
agent chat control in focus

If focused on a chat control:

  • Space or Enter: Activates the focused control

If focused on the message input element with no content entered:

  • Forward Slash /: Activates the quick actions menu
  • Esc or Backspace: Closes the quick actions menu
agent chat input in focus with text entered

If focused on the message input element with text content entered:

  • Enter: Sends the message input content to the other user