In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Chat

A chat is a module allowing you to display a discussion in real time.

Usage

A chat is an element that shows a written conversation and allows files to be exchanged between two or more people, being composed of various chat items. The structure of a chat follows conventional logic. The use of each item must respect the standard display structure in the form of a chronological vertical list. The most important item is the element item message. It varies according to the nature of the message and/or the sender:

 

Incoming Message

Incoming message is used to display the message received by the chat user. It appears to the left of the chat window and is neutral in color.

Chat   Incoming Message

Typing awareness indicator  

An alternative version of this message exists, which is an animated bubble indicating that another user is currently typing a message. It is only used in this temporary situation to provide feedback in the discussion.

Chat   Typing Awareness Indicator

Outgoing Message

Outgoing message is used to display the message sent by the chat user. It appears to the right of the chat window and its color should be chosen from the primary color palette.

Chat   Outgoing Message

Message with Attachment

Whether the message is incoming or outgoing, any attachment must be shown in the bubble provided for that purpose.

Chat   Message With Attachment

Best Practices

  • Use the chat title to provide a context for the topic of discussion (for example, “Discussion with First Name Last Name“, or “Chat with Support”, etc.)
  • The timeline of a chat is always shown as a vertical list. The most recent message is always the last shown on the list. The messages are interspersed according to the date they were sent.
  • Sending a message may be allowed by simply pressing the “Enter/Return” key.
  • If a user sends numerous messages in a row, they stack up as a list. If they are sent within a short amount of time and no other user message is sent at the same time, the send date will only be displayed below that last message.
  • An avatar with a status dot may be added to show user activity (see Avatar)

 

Placement

A chat may be placed in a card if the page is designed to allow this functionality. It may also be place in an expandable widget located at the bottom right of the screen.

Chat   Component
Visual

Appearance

The chat element is shown as a display window with messages and a title in the upper part. In the lower section, a text field allows users to enter messages and to add attachments.

Messages are displayed as speech bubbles with inbound messages pointing toward the left side of the screen, while outbound messages point towards the right. The send date is located under each bubble. An avatar with a status dot may be added.

Chat   Mobile
Back to top