Event listener reference

OpenWeb has client-side event listeners for multiple widgets to aid in tracking engagement or for other functionality.

Syntax

document.addEventListener(event, function)
ParameterDescription
event stringThis is the name of the event.
function functionThis is the function to execute when the event occurs.

As an example, you could add spot-im-current-user-sent-message to a <script> tag to trigger an event when a user sends a comment they have written. Then, the event.detail will be logged to the console after the event is fired.

document.addEventListener('spot-im-current-user-sent-message', function(event) {
    // event.detail includes information relevant to this event
    console.log(event.detail);
});

We strongly recommend that the <script> element is placed within the header. Any events that occur before the listener registration will be lost. Therefore, make sure events are registered as early as possible and before Spot.IM loads.

Multiple events can be used within a single <script> tag.



Conversation and Live Blog

Comment Context Menu

Event Description
spot-im-clicked-delete-message The user has clicked to delete a comment posted.
spot-im-clicked-edit-message The user has clicked to edit the contents a comment posted.
spot-im-clicked-flag The user has clicked the Report option.
spot-im-clicked-message-context-menu The user has clicked to open the comment's context menu.
spot-im-clicked-mute-user The user has clicked to mute another user.
spot-im-share-drop-down The user has clicked the Share button.
spot-im-share-type The user has chosen to share the comment on a specific option. Event details include which share option was chosen.

event.detail
{
  "type": "SHARED_OPTION"
}

Possible Values:
  • facebook
  • link
  • twitter


Comments

Event Description
ow-embedded-link-event The user has clicked a hyperlink or on an embed inside a comment. Event details include which type of element was clicked.

event.detail
{
  "type": "LINK_TYPE"
}

Possible Values:
  • facebook
  • link
  • twitter
  • youtube

spot-im-comment-label-clicked The user has clicked one of the comments labels.

event.detail
{
    "label": "LABEL_NAME"
}
spot-im-current-user-sent-message The user has clicked the Send button.

event.detail
{
    "type": "comment" | "reply",
    "labels": ["LABEL_NAME"]
}
spot-im-current-user-typing-end The user has focused out of the text editor field.
spot-im-current-user-typing-start The user has focused on the text editor field.
spot-im-hover-like-details The user has opened the list of likers. Event details include the comment's ID.
spot-im-show-more-comments-clicked The user has clicked the Show More Comments button.
spot-im-show-more-replies-clicked The user has clicked the Show More Replies button. Event details include the parent ID of the replies.
spot-im-user-down-vote-click The user has clicked to down vote a comment.
spot-im-user-up-vote-click The user has clicked to up vote a comment.

Initial Loading

Event Description
spot-im-conversation-loaded The Conversation is loaded on the page.
spot-im-conversation-viewed The Conversation is initially viewed by the user.

Notifications Menu

Event Description
spot-im-notification-drop-down-link The user has clicked the notifications (bell) icon.
spot-im-user-notifications-click The user has clicked a specific notification.

event.detail
{
    "type": "NOTIFICATION_TYPE",
    "targetUrl": "NOTIFICATION_URL"
}

Possible type Values:
  • liked-message
  • replied-your-message
  • user-mentioned

spot-im-notification-marked-all-read The user has marked all notifications as read.
spot-im-notification-marked-read The user has marked specific notification as read.

See spot-im-user-notifications-click above for an event.detail example.

Options Menu

Event Description
spot-im-clicked-cog-menu The user has clicked the cog menu button.
spot-im-clicked-privacy The user has clicked the Privacy button under the settings.
spot-im-clicked-settings The user has clicked the Settings button.

event.detail
{
    "displayName": "USER_NAME",
    "email": "USER_EMAIL",
    "id": "USER_ID",
    "imageId": "IMAGE_ID"
}
spot-im-profile-drop-down The user has clicked the Profile button.

See spot-im-clicked-settings in the previous row for an event.detail example.

Sort Menu

Event Description
spot-im-sort-by-drop-down The user has clicked the sort dropdown.
spot-im-sort-by-select The user has changed the sorting of the Conversation.

event.detail
{
    "sortedBy": "SORT_ORDER" 
}

Possible Values:
  • best
  • newest
  • oldest


User Profile

Event Description
spot-im-clicked-article-link-profile The user has clicked on an article from a user's history view. Event details include the article's URL.
spot-im-open-user-profile The user has clicked the View Profile button of a specific user.

event.detail
{
    "userId": "VIEWED_PROFILE_USER_ID"
}


Identity

Event Description
spot-im-api-ready This event listener notifies that the public API, such as SSO, is ready.
spot-im-login-start The user triggered a new log in process. For SSO implementations, listen to this event to show your login modal.
spot-im-post-login A user logged in to the system. Fired once after a successful login process.

event.detail
{
    "currentUser": {
        "email": "USER_EMAIL",
        "socialNetworks": ["ARRAY_OF_SOCIAL_NETWORKS"],
        "username": "USERNAME"
    }
}
spot-im-user-auth-success Registered user authentication completed. Fires on every page load.

event.detail
{
    "email": "USER_EMAIL",
    "socialNetworks": ["ARRAY_OF_SOCIAL_NETWORKS"],
    "username": "USERNAME"
}
spot-im-user-logout The user initialized a log out process.


Popular in the Community

Event Description
spot-im-recirculation-item-clicked The user clicked a Popular in the Community item.

event.detail
{
    "url": "CLICKED_ITEM_URL",
    "title": "ARTICLE_TITLE"
}
spot-im-recirculation-left-clicked The user clicked the left navigation arrow.
spot-im-recirculation-loaded This event listener notifies that Popular in the Community has loaded.
spot-im-recirculation-right-clicked The user clicked the right navigation arrow.
spot-im-recirculation-viewed The user viewed Popular in the Community.


Reactions

Event Description
openweb-reactions-voted The user voted X times in the reactions module

event.detail
{
    "title": "QUESTION_ASKED", 
    "votedReaction": "REACTION_TO_QUESTION",
    "userId": "USER_ID",
    "category": "REACTION_CATEGORY",
    "score": TIMES_REACTION_CLICKED
}


Real Time

Event Description
spot-im-realtime-new-message A new message appeared in the Conversation or the Live Blog in real-time.

event.detail
{
    "source": "MESSAGE_SOURCE",
    "eventCode": "LIVE_BLOG_EVENTCODE",
    "postId": 'CONVERSATION_POST_ID',
    "fromUser": {
       "id": "USER_ID",
       "username": "USERNAME",
       "displayName": "DISPLAY_NAME",
       "isReporter": LIVE_BLOG_BOOLEAN
    },
    "message": {
        "type": "MESSAGE_TYPE",
        "time": "JAVASCRIPT_TIMESTAMP"
    }
}

Possible fromUser.isReporter Values:
  • false
  • true

Possible message.type Values:
  • comment
  • reply

Possible source Values:
  • conversation
  • live-blog



Spotlight

Event Description
spot-im-spotlight-CTA-click The user clicked the Comment button

event.detail
{
    "type": "SPOTLIGHT_TYPE", 
    "redirectUrl": "SPOTLIGHT_REDIRECT"
}

Possible type Values:
  • counter
  • form

Topic Tracker

Event Description
spot-im-topic-tracker-tag-followed The user clicked to follow a tag on the Topic Tracker widget

event.detail
{
    "name": "TAG_NAME", 
    "type": "TAG_TYPE"
}

Possible type Values:
  • keyword
  • author




Did this page help you?