Web Custom Chat Message
Mininum SDK version
2.11.0
Custom messages allow for the sending and receiving of messages containing any data.
When coupled with custom chat UI, this enables the creation of unique chat messages containing videos, embedded apps, widgets, and more.
sendCustomMessage
The sendCustomMessage function creates a custom message which is received by other users with the custom-message-created event.
The function takes an object argument with a chat room id string as the roomId property, and a string as the custom_data property. Passing stringified JSON as the custom_data is one way to send various types of data.
Refer API Reference for more details
const customData = JSON.stringify({
title: "Do you like this feature",
options: [{text: "Yes"}, {text: "No"}]
});
LiveLike.sendCustomMessage({
roomId: "6834f1fd-f24d-4538-ba51-63544f9d78eb",
custom_data: customData
});
customMessageRenderer
The livelike-chat
element contains the property customMessageRenderer
. This property is a function that returns an HTML element, and has an object parameter containing a message
object. This function is called whenever a custom-message-created event is fired.
The customMessageRenderer
function allows for the creation of HTML elements when a custom message is received by a user, optionally making use of the message
object's custom_data
property.
Refer Element reference for prop details
// Define the custom message renderer, access the `message` object, and return an HTML element.
function customMessageRenderer({message}){
const customMessage = document.createElement('div');
customMessage.className="custom-message-renderer"
customMessage.innerText = message.custom_data;
return customMessage;
}
// Set your custom message renderer function as the `customMessageRenderer` property of the `livelike-chat` element.
const livelikeChat = document.querySelector('livelike-chat');
livelikeChat.customMessageRenderer = customMessageRenderer;
Framework specific renderer
Since the
customMessageRenderer
function returns a DOM node, this node could be used as a mounting point to render any framework specific component/view as a child node. For example, rendering React components within thelivelike-chat
Web Component.
Updated 10 months ago