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" or 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 or 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 or reply",
    "message_id": "MESSAGE_ID",
    "parent_id": "PARENT_ID"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT or null"
  }
}
spot-im-clicked-message-context-menu

The user has clicked to open the comment's context menu.



event.detail
{
  "message_type": "comment or 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 or link or twitter",
  "message_type": "comment or 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 or typing",
   "source": "mobile-web or 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 or link or twitter or youtube"
}
spot-im-comment-label-clicked

The user has clicked one of the comments labels.



event
"event": {
  "detail": {
    "label": "LABEL_NAME",
    "message_type": "comment or reply",
    "parent_id": "PARENT_ID"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT or null"
  }
}
spot-im-comment-reported

The user has clicked to report a comment.



event
"event": {
  "detail": {
    "type": "comment or 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 or null"
  }
}
spot-im-current-user-sent-message-clicked

The user has clicked the Send button.



event
"event": {
  "detail": {
    "message_type": "comment or reply",
    "parent_id": "undefined or PARENT_ID",
    "labels": ["LABEL_NAME"]
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT or null"
  }
}
spot-im-current-user-sent-message-failed

Message sending failed.



event
"event": {
  "detail": {
    "message_type": "comment or reply",
    "parent_id": "undefined or PARENT_ID",
    "labels": ["LABEL_NAME"]
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT or null"
  }
}
spot-im-current-user-sent-message-succeed

Message sending succeed.



event
"event": {
  "detail": {
    "message_type": "comment or reply",
    "message_id": "MESSAGE_ID",
    "parent_id": "undefined or PARENT_ID",
    "labels": ["LABEL_NAME"]
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT or 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 or 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 or null"
  }
}
spot-im-message-body-clicked

The user has clicked on the body of a message or reply.



event
"event": {
  "detail": {
    "type": "comment or reply",
    "message_id": "MESSAGE_ID",
    "parent_id": "PARENT_ID"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT or null"
  }
}
spot-im-notification-preview-click

The user has clicked the notification icon (bell icon).



event.detail
{
  "action": "close or open"
}
spot-im-notification-preview-show

The user has notifications.



event.detail
{
  "amount": NUMBER_OF_NOTIFICATIONS
}
spot-im-replies-list-toggled

The user clicked View X replies.



event
"event": {
  "detail": {
    "type": "comment",
    "message_id": "MESSAGE_ID",
    "replies_opened": BOOLEAN,
    "number_of_replies": NUMBER_OF_REPLIES_TO_THE_COMMENT
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT or null"
  }
}
spot-im-show-more-comments-clicked

The user has clicked Show More Comments.



event
"event": {
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT or null"
  }
}
spot-im-sort-by-select

The user has selected a sorting option.



event
"event": {
  "detail": {
    "selected": "NEWEST_FIRST or OLDEST_FIRST or HOT"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT or null"
  }
}
spot-im-write-comment-focus

The user has focused the start of the conversation text editor.



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

Live Blog

Event Description
spot-im-liveblog-loaded Live Blog has loaded.
spot-im-liveblog-message-visible

A message has become visible to the user in the Live Blog feed, through either initial load or scrolling.



event.detail
{
  "msg_id": "MESSAGE_ID"
}
spot-im-liveblog-new-message-pending The user received a notification about a new Live Blog post.
spot-im-liveblog-new-messages-scrolled The user scrolled (or Scrolled to Top) to consume Live Blog posts.
spot-im-liveblog-scroll-to-top-clicked The user clicked the Scroll To Top button.

Reactions

Event Description
spot-im-comment-button-clicked

The user clicked the reaction or replied button.



event
"event": {
  "detail": {
    "action": "reply or vote or devote",
    "type": "comment or reply",
    "message_id": "MESSAGE_ID",
    "parent_id": "PARENT_ID"
  },
  "meta": {
    "spotId": "SPOT_ID", 
    "postId": "POST_ID", 
    "module": "ASSET_GENERATING_EVENT", 
    "host": "HTML_ELEMENT or null"
  }
}

Topics

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 or 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