Messenger component
<wy-messenger> | WyMessenger
Use the messenger component to render a full featured chat interface for private messaging and chat rooms. The layout depends on the size of its container. In narrow layouts, the conversation list and chat will be stacked and clicking on a conversation in the list will navigate to the chat. In wider layouts, the component has a side-by-side layout with the conversation list on the left hand side and the chat window on the right hand side.
Importing
If you installed the UIKit with npm you can use the following snippet to import the component into your project.
Otherwise, if you installed the UIKit as a <script> you can ignore this section.
import { WyMessenger } from "@weavy/uikit-web";
Examples
Typically the component does not need any configuration and can be added to your page like this.
<wy-messenger></wy-messenger>
You can also use JavaScript to create the component and add it you your page.
const messenger = new WyMessenger();
document.body.append(messenger);
Properties
| Property | Type | Description |
|---|---|---|
name |
string |
Sets a name to display in the title bar. |
bot |
string |
Enables bot mode. See chat bots for details. |
conversationId |
number |
Sets the selected conversation. This is handled automatically and there's normally no need to set this manually. |
noAttachments |
boolean |
Disable the possibility to upload local attachments. |
noCloudFiles |
boolean |
Disable the cloud file picker (Google Drive, Dropbox etc). |
noGoogleMeet |
boolean |
Disable the Google Meet video meetings integration. |
noMentions |
boolean |
Disable the possibility to mention other people in the directory. |
noMicrosoftTeams |
boolean |
Disable the Microsoft Teams video meetings integration. |
noPolls |
boolean |
Disable possibility to create a poll. |
noPreviews |
boolean |
Disable previews of files. |
noReactions |
boolean |
Disable the possibility to add emoji reactions to a message. |
noReceipts |
boolean |
Disable read receipts on a message. |
noTyping |
boolean |
Disable the typing indicator in the chat when other people types. |
noZoomMeetings |
boolean |
Disable the Zoom video meetings integration. |
Learn more about attributes and properties.
Methods
The component exposes the following methods.
clearConversation()
Deselects any active conversation.
conversationBelongsToMessenger()
Checks if a conversation belongs to Messenger.
Parameters
conversation: (number | AppRef | AppType)
The conversation or id to check if it belongs to Messenger.
Returns
Promise<Boolean>
selectConversation()
Parameters
id: number
The id of the conversation to select.
Returns
Promise<Boolean>
Set the active conversation.