Event Listener Reference

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

OpenWeb's event listeners listen for events to occur on the client side and then execute the appropriate code in response. This reference explains the event listener syntax and details the available arguments.



Syntax

All event listeners use the following syntax.

document.addEventListener(event, function)
ArgumentDescription
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-clicked 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-clicked', function(event) {
    // event.detail includes information relevant to this event
    console.log(event.detail);
});

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



🚧

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 OpenWeb loads.



General

Function Description
spot-im-launcher-loaded The Launcher script has loaded on the page.
__OPEN_WEB__.initOW() When called, OpenWeb modules load immediately.

document.addEventListener("click", function() {
    __OPEN_WEB__.initOW()
}); 


By default, OpenWeb waits for an initial scroll by the user before attempting to load any products.



Conversation and Live Blog

πŸ“˜

When an event is shown with an event.meta object in the following tables, this applies only to Conversation.

"event": {
  "detail": {
    "userId": "VIEWED_PROFILE_USER_ID"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}

The event.meta object is not returned for Live Blog events.


Comment Context Menu

Event Description
spot-im-clicked-delete-message The user has clicked to delete a comment posted.

event.detail
{
  "message_type": "comment" | "reply",
  "message_id": "MESSAGE_ID",
  "parent_id": "PARENT_ID"
}
spot-im-clicked-edit-message The user has clicked to edit the contents a comment posted.

event
"event": {
  "detail": {
    "message_type": "comment" | "reply",
    "message_id": "MESSAGE_ID",
    "parent_id": "PARENT_ID"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-clicked-message-context-menu The user has clicked to open the comment's context menu.

event.detail
{
  "message_type": "comment" | "reply",
  "message_id": "MESSAGE_ID",
  "parent_id": "PARENT_ID"
}
spot-im-clicked-mute-user The user has clicked to mute another user.
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": "facebook" | "link" | "twitter",
  "message_type": "comment" | "reply",
  "message_id": "MESSAGE_ID",
  "parent_id": "PARENT_ID",

}

Comments

Event Description
floating_unit_clicked The user has clicked the floating unit. Event details include the state (type) of the floating unit that was clicked and the platform (source).

event.detail
{
   "type": "static" | "typing",
   "source": "mobile-web" | "desktop"
}
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": "facebook" | "link" | "twitter" | "youtube"
}
spot-im-comment-label-clicked The user has clicked one of the comments labels.

event
"event": {
  "detail": {
    "label": "LABEL_NAME",
    "message_type": "comment" | "reply",
    "parent_id": "PARENT_ID"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-comment-reported The user has clicked to report a comment.

event
"event": {
  "detail": {
    "type": "comment" | "reply",
    "message_id": "MESSAGE_ID",
    "parent_id": "PARENT_ID",
    "reason": "REPORT_REASON_CHOSEN_BY_THE_USER_IF_THERE'S_ANY"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-current-user-sent-message-clicked The user has clicked the Send button.

event
"event": {
  "detail": {
    "message_type": "comment" | "reply",
    // parent_id is undefined in case of comment
    "parent_id": undefined | "PARENT_ID",
    "labels": ["LABEL_NAME"]
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-current-user-sent-message-failed Message sending failed.

event
"event": {
  "detail": {
    "message_type": "comment" | "reply",
     // parent_id is undefined in case of comment
    "parent_id": undefined | "PARENT_ID",
    "labels": ["LABEL_NAME"]
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-current-user-sent-message-succeed Message sending succeed.

event
"event": {
  "detail": {
    "message_type": "comment" | "reply",
    "message_id": "MESSAGE_ID",
     // parent_id is undefined in case of comment
    "parent_id": undefined | "PARENT_ID",
    "labels": ["LABEL_NAME"]
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-current-user-typing-end The user has focused out of the text editor field.

event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-current-user-typing-start The user has focused on the text editor field.

event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-hover-like-details The user has opened the list of likers. Event details include the comment's ID.

event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-show-more-comments-clicked The user has clicked the Show More Comments button.

event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-show-more-replies-clicked The user has clicked the Show More Replies button. Event details include the parent ID of the replies and depth of the clicked message.

event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-user-down-vote-click The user has clicked to down vote a comment.

event
"event": {
  "detail": {
    "message_type": "comment" | "reply",
    "message_id": "MESSAGE_ID",
    "parent_id": "PARENT_ID",
    "count": "NUMBER_DOWN_UP_VOTES_BEFORE_THE_OPERATION_WAS_MADE"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-user-up-vote-click The user has clicked to up vote a comment.

event
"event": {
  "detail": {
    "message_type": "comment" | "reply",
    "message_id": "MESSAGE_ID",
    "parent_id": "PARENT_ID",
    "count": "NUMBER_OF_UP_VOTES_BEFORE_THE_OPERATION_WAS_MADE"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}

Initial Loading

Event Description
spot-im-conversation-loaded The Conversation has loaded on the page.

event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-conversation-viewed The Conversation is initially viewed by the user.

event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}

Notifications Menu

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

event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-user-notifications-click The user has clicked a specific notification.

event
"event": {
  "detail": {
    "type": "NOTIFICATION_TYPE",
    "targetUrl": "NOTIFICATION_URL"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}

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.

event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
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.

event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}
spot-im-sort-by-select The user has changed the sorting of the Conversation.

event
"event": {
  "detail": {
    "sortedBy": "SORT_ORDER",
    "previousSort": "SORT_ORDER"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}

Possible Sort Order Values:
β€’ best
β€’ newest
β€’ oldest


Tabs

Events in this section apply only to Conversation.

Event Description
spot-im-clicked-tab The user clicked on tab

event.detail
{
    "to": "CURRENT_TAB", 
    "from": "PREVIOUS_TAB"
}

User Profile

Event Description
ow-open-custom-user-profile The the user has clicked the View Profile button of a specific user or user image or user name.

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

NOTE: To use this functionality, request custom user profile to be enabled from your OW PSM.

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
"event": {
  "detail": {
    "userId": "VIEWED_PROFILE_USER_ID"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT" | null
  }
}


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-signup-start The user triggered a new signup process. For SSO implementations, first ask your PSM to enable the signup button in the Conversation UI, then listen to this event to show your registration 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_NETWORKS"],
        "username": "USERNAME"
    }
}
spot-im-post-signup A new user signed up. Fired once after a successful email or social network signup process.

event.detail
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

spot-im-topic-tracker-tag-unfollowed The user clicked to unfollow a tag on the Topic Tracker widget

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

Possible type Values:
β€’ keyword
β€’ author