Chat Message List States

🚧

Web SDK version 1.6.3 required

Empty and Loading States

Developers can provide their own templates to <livelike-chat> elements that will be used when those chats are loading or when they are empty.

The <livelike-chat> element has a couple of slots that can be used to customize the look and feel of the message list depending on the state of the chat.

• The loading state, using the message-list-loading slot
• The empty state, using the message-list-empty slot

Only one of the slots will be showing at any time. When the messages are being loaded, the message-list-loading slot will be shown. After the messages have finished loading but there are no messages to display, the message-list-empty slot will be shown. Otherwise, when the messages have both loaded and is there are more than zero, the list of messages will be shown.

📘

Slots are part of the Web Components spec

If you aren't familiar with how slots work, read more about them at HTML element on MDN.

Here are some things to keep in mind when customizing the chat element with slots:

1. Any element can be used as a slot
2. The elements being used as slots must be direct children of the <livelike-chat> element
3. Elements being used as slots can have any number of children
4. Each slot name may only be used once