Title: Messenger Component
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. |
features |
string |
Explicit space separated list of enabled features. All default features are enabled when this property is not defined. |
reactions |
string |
Space separated string of unicode emojis to use for reactions. Defaults to reactions from the Weavy instance or <wy-context>. |
Learn more about attributes and properties.
Available features
| Feature | Description |
|---|---|
attachments |
Possibility to upload local files. |
cloud_files |
Cloud file picker (Google Drive, Dropbox etc.). |
embeds |
Creating embeds from urls in editor text. |
google_meet |
Google Meet video meetings. |
meetings |
General availability for meetings. This can be ignored if using all individual meeting feature flags, i.e. google_meet, microsoft_teams and zoom_meetings. |
mentions |
Possibility to mention other people from the current directory in the editor. |
microsoft_teams |
Microsoft Teams video meetings. |
polls |
Possibility to create polls in editor. |
previews |
Previews of files and attachments. |
reactions |
Possibility to add emoji reactions to a message, post or comment. |
receipts |
Read receipts on messages. |
typing |
Typing indicators in the chat when other people types. |
zoom_meetings |
Zoom video meetings. |
Events
| Name | Type | Description |
|---|---|---|
wy-preview-open |
WyPreviewOpenEventType |
Emitted when preview is about to be opened. The event may be prevented. |
wy-preview-close |
WyPreviewCloseEventType |
Emitted when preview is closed |
Learn more about events.
Type maps
Type Maps can be imported and used to check messenger types against app data. They contain the app types for messenger conversations. Use them to check if a conversation belongs to messenger.
| Name | Type | Description |
|---|---|---|
MessengerTypes |
Map |
Map of app guid to app string types for messenger conversations. Includes reverse mapping. |
MessengerBotTypes |
Map |
Map of app guid to app string types for messenger bot conversations. Includes reverse mapping. |
Methods
The component exposes the following methods.
clearConversation()
Deselects any active conversation.
Deprecated: Use .conversationId = null; instead.
conversationBelongsToMessenger()
Checks if a conversation belongs to Messenger.
Deprecated: Use MessengerTypes.has(app.type) instead.
Parameters
conversation: (number | AppRef | AppType)
The conversation or id to check if it belongs to Messenger.
Returns
Promise<Boolean>
selectConversation()
Set the active conversation.
Deprecated: Use .conversationId = id; instead.
Parameters
id: number
The id of the conversation to select.
Returns
Promise<Boolean>