1. Reference
2. UIKit Web
3. Events

Events

Some components in the UIKit expose events that you can listen and react to when something happens, e.g. when a comment is created or a reaction is added.

Event details

The events are emitted as CustomEvent with the wy: prefix, and the event.detail property contains the actual event data.

All event details share the following common properties (specific events may return additional data).

• id – Unique identifier for the event (shared with all listeners that subscribe to this event).
• action – The type of activity that triggered the event.
• actor – The user that triggered the event.

Example: event.detail for the wy:message_created event.

{
    "id": 9775,
    "action": "message_created",
    "actor": {
        "id": 1025,
        "uid": "uikit-web-dev",
        "display_name": "Web Developer",
        "created_at": "2023-10-18T20:00:12.3133333Z"
    },
    "message": {
        "id": 2900,
        "app_id": 1087,
        "parent": {
            "id": 1087,
            "type": "app"
        },
        "text": "Hello world",
        "html": "<p>Hello world</p>",
        "plain": "Hello world",
        "created_at": "2024-01-15T14:12:59.8966667Z",
        "created_by_id": 1025
    }
}

Register event listener

You can register event listeners using the standard addEventListener() method on the target element/component.

const messenger = new WyMessenger();
document.body.append(messenger);

messenger.addEventListener("wy:message_created", (e) => {
  console.log(e.type, e.detail);
});

List of events

See the individual components for a list of events that they expose.