1. Reference
2. UIKit
3. Messenger badge

Messenger badge component

<wy-messenger-badge> | WyMessengerBadge

Weavy Messenger badge component that renders a realtime badge for the number of unread conversations. The badge fits well into a button or similar. The badge is automatically updated when new messages awaits and when messages have been read.

When the unread count property changes, the component fires a "wy-unread" event with the updated count. You can listen to the event to use the unread count for something else, and you can also turn off the component rendering by setting the badge property to "none".

Component layout

The badge is displayed inline by default. It has a filled background and is a circle for a single digit and a pill for longer counts. Counts above 99 are displayed as 99+. The size scales with the current font-size where it's placed, using 0.75em for the badge font-size and a height of 1.5em of the badge font-size. The badge is only displayed when there is an unread count of 1 or higher.

When placing the badge in a <button> element, note that buttons initially have a font-size of 13.3333px instead of inheriting font-size from it's parents.

Setting the badge property to "dot" removes the count, only indicating that there is unread conversations without any count.

The badgePosition property can be changed from "inline" to "top-right" or any other corner, to give it absolute positioning over the top-right corner. The absolute positioning is relative to the closest parent element with set CSS position, for instance relative positioning.

Importing

If you added the UIKit with npm you can use the following snippet to import the component into your project.

import { WyMessengerBadge } from "@weavy/uikit-web";

Examples

Inline Messenger badge in a text

Display a badge that shows unread count and tracks messages and conversations for the authenticated user.

<div>Messenger <wy-messenger-badge></wy-messenger-badge></div>

Cornered Messenger badge

Display a Messenger badge in the corner of a button. Note that the badge position is relative to its closest positioned ancestor element, therefore we need to set CSS position on the button.

<button style="position: relative;">
  <span>Messenger</span>
  <wy-messenger-badge badgePosition="top-right"></wy-messenger-badge>
</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.