How to listen to events with the Noticeable JavaScript SDK?
The Noticeable JavaScript SDK allows listening to events.
Here are the event types that you can listen to:
widget:closed
widget:header:link:clicked
widget:opened
widget:publication:comment:created
widget:publication:reaction:created
widget:publication:reaction:updated
widget:publication_summary:clicked
widget:publication:unread_count:changed
widget:publication:unseen_count:changed
widget:ready
widget:refreshed
widget:rendering:aborted
widget:trigger:ready
widget:trigger:refreshed
widget:trigger_view:clicked
widget:trigger_view:mouse_entered
widget:trigger_view:mouse_left
widget:widget_view:mouse_entered
widget:widget_view:mouse_left
The Noticeable SDK exposes noticeable.on(eventType, resourceId, func) to listen to events, where:
eventType is the name of the event type you want to listen to. See the list above to know what are the events that are supported.
resourceId is the identifier of the Noticeable component you are listening events to. For instance, if you are targeting events related to a widget, you will need to use your widget ID.
func is a function receiving an event as a single parameter.
Below is a concrete example to listen when a widget is opened:
The event parameter from func (your custom function definition) is an object with the following properties:
detail: an object containing data related to the event received, or undefined.
resourceId: the identifier of the component you received the event for.
type: the event type you received.
All listeners are tied to a widget, which must be rendered for the callback listeners to be executed.
To stop listening to an event type, you can use noticeable.off(eventType, resourceId), where:
eventType is the name of the event type you want to stop listening.
resourceId is the identifier of the Noticeable component you are listening events to. For instance, if you are targeting events related to a widget, you will need to use your widget ID.
In the case you want to remove all listeners you can use noticeable.off().
Supported Event Types
Here are the event types that you can listen to:
widget:closed
widget:header:link:clicked
widget:opened
widget:publication:comment:created
widget:publication:reaction:created
widget:publication:reaction:updated
widget:publication_summary:clicked
widget:publication:unread_count:changed
widget:publication:unseen_count:changed
widget:ready
widget:refreshed
widget:rendering:aborted
widget:trigger:ready
widget:trigger:refreshed
widget:trigger_view:clicked
widget:trigger_view:mouse_entered
widget:trigger_view:mouse_left
widget:widget_view:mouse_entered
widget:widget_view:mouse_left
Listening to Events
The Noticeable SDK exposes noticeable.on(eventType, resourceId, func) to listen to events, where:
eventType is the name of the event type you want to listen to. See the list above to know what are the events that are supported.
resourceId is the identifier of the Noticeable component you are listening events to. For instance, if you are targeting events related to a widget, you will need to use your widget ID.
func is a function receiving an event as a single parameter.
Below is a concrete example to listen when a widget is opened:
noticeable.on('widget:opened', widgetId, function(event) { ... })
noticeable.render('widget', widgetId)
The event parameter from func (your custom function definition) is an object with the following properties:
detail: an object containing data related to the event received, or undefined.
resourceId: the identifier of the component you received the event for.
type: the event type you received.
All listeners are tied to a widget, which must be rendered for the callback listeners to be executed.
Removing a Listener
To stop listening to an event type, you can use noticeable.off(eventType, resourceId), where:
eventType is the name of the event type you want to stop listening.
resourceId is the identifier of the Noticeable component you are listening events to. For instance, if you are targeting events related to a widget, you will need to use your widget ID.
In the case you want to remove all listeners you can use noticeable.off().
Updated on: 10/08/2024
Thank you!