Events

The <hyvor-talk-comments> element emits a few events that you can listen to. For example, if a comment is published, you can use events to record it in your analytics service.

The following events are emitted:

  • loaded - dispatched when the embed is fully loaded
  • comment:published
  • comment:edited
  • comment:deleted
  • comment:voted
  • comment:flagged
  • reaction
  • rating
  • auth:login:clicked* - when the login button/link as clicked
  • profile:clicked* - when the user's profile (name or profile picture) is clicked

You may call preventDefault() on the event to prevent the default action in events marked with *.

Listening to Events

Use addEventListener on the <hyvor-talk-comments> element.

const comments = document.querySelector("hyvor-talk-comments");
comments.addEventListener('comment:published', function (e) {
    console.log("Comment ID: " + e.detail.id);
})

Event Data

Here's a typescript definition of the all emitted events (event_name: data):

interface CommentsEvents {
    'loaded': null,
    'comment:published': RealComment,
    'comment:edited': Comment,
    'comment:deleted': Comment,
    'comment:voted': {
        comment: Comment,
        vote: 'up' | 'down' | null
    },
    'comment:flagged': {
        comment: Comment
    },
    'reaction': {
        type: 'superb' | 'love' | 'wow' | 'sad' |  'laugh' | 'angry'
    },
    'rating': {
        rating: number,
        count: number,
        average: number
    },
    'auth:login:clicked': null,

    // when clicking on user's name or profile picture
    'profile:clicked': User,
}

Comment Object

The Comment object can be a HiddenComment (ex: a deleted comment that has replies) or a RealComment.

interface BaseComment {
    id: number,
    page_id: number,
    url: string,
    parent_id: number | null,
    depth: number,
    created_at: number,
}
interface HiddenComment extends BaseComment {
    is_hidden: true,
}
interface RealComment extends BaseComment {
    is_hidden: false,
    content: string
    content_html: string,
    is_featured: boolean,
    is_loved: boolean,
    is_edited: boolean,
    upvotes: number,
    downvotes: number,
    user: User,
    status: 'published' | 'spam' | 'deleted' | 'pending'
}
type Comment = HiddenComment | RealComment;