1. Reference
2. UIKit
3. Messenger button

Messenger button component

<wy-messenger-button> | WyMessengerButton

The Weavy Messenger button component renders a Messenger button complete with a realtime badge for the number of unread conversations. When clicked, the button opens a built in overlay displaying the full <wy-messenger> component for multiple one-to-one conversations, group chats or agent conversations.

The Messenger displays a list of all conversations with possibility to pin, star and mark conversations as read. Each conversation item displays an avatar, the participants or the room name as title, a line with the latest message. It also indicates if the conversation is read/unread and if anyone in the conversation is typing.

The list has a search in the top and can open a modal for creating new conversations where the user can search for other people or agents to create private chats or chat rooms.

When a user clicks a conversation item, the conversation is loaded. The conversation can show rich messages with markdown formatting including code syntax highlight. Messages can have uploaded images, attached files and cloud files with full browser preview of 100+ formats. Polls, video meetings, rich link embeds, tags and mentions can be used in messages. Users can react with predefined emojis to each message.

Read receipts indicate which messages that has been sent and read. The online presence for users is indicated both in the conversation list as well as in the conversation.

Typing indicators are shown when other users are typing in a conversation.

New messages are indicated as new when received.

For chat rooms, the name and avatar for the chat room can be edited. Members can be added or removed from the chat room.

The editor features markdown preview, including code syntax highlighting. It has buttons for adding polls, video meetings, images, files and cloud files. Mentions brings up a user selector. Drafts are automatically saved for each conversation.

The Messenger button component can optionally be configured in agent mode, by defining the agent property, to only show conversations with a given AI agent. In agent mode, the create conversation button instantly creates a new conversation with the agent when clicked, instead of opening a create conversation modal.

Complement this with the <wy-notification-toasts> component to also get realtime in-app notifications or browser notifications when new messages arrive.

Component layout

The button is displayed as a clickable icon that acts as a button. The default size of the button is the icon size 1.5rem/24px together with the set --wy-padding (which defaults to 0.5rem/8px) on every side of the icon, which makes a total of 2.5rem/40px per default.

The openable Messenger renders in a drawer overlay on the right side in the top layer. That means that the Messenger does not occupy any visual layout space where it's placed in the DOM, it only renders in the top layer. The drawer can be maximized by the user to get more visual space for the Messenger.

You can add additional styling using CSS Custom Properties and CSS Shadow Parts and further customization using slots.

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 { WyMessengerButton } from "@weavy/uikit-web";

Examples

Messenger button with openable Messenger overlay

Displays a button with a badge that tracks unread conversations and can open a side drawer overlay with the Messenger on click.

<wy-messenger-button></wy-messenger-button>

Messenger button component in agent mode

Display a button that opens a Messenger in agent mode. Also, show a dot instead of a count when there are unread notifications.

<wy-messenger-button agent="assistant" badge="dot"></wy-messenger-button>

HTML attributes

Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.

Most attributes are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*).

Learn more about attributes and properties.

JavaScript properties

Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable.

JavaScript methods

Methods for the component are available in JavaScript. Methods that are async return a promise.

DOM Events

The component triggers custom events that bubbles up the DOM tree. They can be listened to using the addEventListener() method.

Learn more about events.

Slots

The slots can be used to inject elements into the component. All predefined child nodes of the slot will be replaced with the injected content.

To prevent child nodes from rendering before the component has loaded you can hide them using CSS.

wy-messenger-button:not(:defined) {
  display: none;
}

To hide the conversation-new button, you can use the wy-conversation-new-button CSS shadow part.

/* Hide the new conversation button */
::part(wy-conversation-new-button) {
  display: none;
}

Available features

The following features are available for the component. Configure them with a space separated list using the features attribute. All features are enabled by default.

Learn more about features.

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.