Chat

Chat Basics

The <livelike-chat> element will insert a fully-functional chat room anywhere on the page it is placed. It is a block-level element by default and will grow vertically to fit its contents.

The roomid attribute is required and must be a valid room ID. Chat rooms can be created through the API.

For versions before 1.20.0 the programid attribute is required to load Stickers and Reactions in chat room.

<script>
LiveLike.init({ clientId })
</script>

<livelike-chat roomid="648bb105-bba4-4c3c-8017-e8f390681759"></livelike-chat>

Sizing Chat Elements

A <livelike-chat> element is in block display by default and its height property is not set, so the element will grow to contain all messages sent to the room. The height of a chat room can be set with the height CSS property, which will allow the message list to be scrolled and the composer will stay positioned at the bottom of the chat element.

/* Example: create a full-screen chat */
livelike-chat {
  height: 100vh; /* Full height of viewport */
  width: 100vw; /* Full width of viewport */
}

Customizing Chats

Chats can be customized even further, such as by overriding the empty and loading message list states or configuring message timestamps.

Chat Rooms

Livelike.createChatRoom

This method creates a new chat room with the ability to pass in two optional arguments, title and visibility. Default visibility for the chatroom is members. It returns a Promise that resolves the chat room object.

LiveLike.createChatRoom({title: "myTitle", visibility: "everyone"})
    .then(chatroom => console.log(chatroom));

Livelike.getChatRoom

Returns the chatRoom object using the roomId passed in the arguments. It returns a Promise that resolves the chatRoom object containing roomId and title.

LiveLike.getChatRoom({roomId: "648bb105-bba4-4c3c-8017-e8f390681759"})
    .then(chatroom => console.log(chatroom));

Chat Memberships

Once someone joins a room, they are a member of that room until they leave it. Joining a room is useful because the list of room memberships can be maintained per-user and looked up across sessions and devices.

A user does not have to be a member of a room to enter it and send messages.

📘

Use memberships to keep track of which rooms a user wants to return to in future visits.

Livelike.getChatRoomMemberships

Returns a Promise that resolves a list of all memberships present on a given chat room.

LiveLike.getChatRoomMemberships({roomId: "648bb105-bba4-4c3c-8017-e8f390681759"})
  .then(chatMemberships => console.log(chatMemberships))

Livelike.getProfileChatRoomMemberships

Returns a Promise that resolves a list of all memberships present for the current user.

LiveLike.getProfileChatRoomMemberships()
  .then(profileMemberships => console.log(profileMemberships))

Livelike.joinChatRoom

Adds a membership for the current user for the chat room that is supplied by the room id argument. Returns a Promise that resolves the membership info object.

LiveLike.joinChatRoom({roomId: "648bb105-bba4-4c3c-8017-e8f390681759"})
  .then(membership => console.log(membership))

Livelike.leaveChatRoom

Removes the current user's membership from the chat room that is supplied by the room id argument. Resolves a Boolean.

LiveLike.leaveChatRoom({roomId: "648bb105-bba4-4c3c-8017-e8f390681759"})
  .then(success => console.log(success))