Chat Message List States
Customizing chat message list states such as empty and loading on the web
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.
<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
- The empty state, using the
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:
- Any element can be used as a slot
- The elements being used as slots must be direct children of the
- Elements being used as slots can have any number of children
- Each slot name may only be used once
Updated over 1 year ago