Events

The <hyvor-talk-comments> component dispatches events, which you can listen to and perform actions. For example, when a comment is published, you can notify your analytics service.

The following events are supported:

• loaded - dispatched when the embed is fully loaded
• comment:published
• comment:edited
• comment:deleted
• comment:voted
• comment:flagged
• reaction
• rating
• auth:login:clicked

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);
})

Data

Here is a typescript definition describing all the data that is passed with the events:

interface Events {
    '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,
}

Object definitions:

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;