Articles on: How To Guides

How to listen to events with the Noticeable JavaScript SDK?

The Noticeable JavaScript SDK allows listening to events.

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

Was this article helpful?

Share your feedback

Cancel

Thank you!