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:

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: " +;


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,

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

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;


export interface User {
    id: number,
    type: 'hyvor' | 'sso',
    name: string,
    username: string,
    picture_url: string | null,
    bio: string | null,
    location: string | null,
    website_url: string | null,
    badges: number[],