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;
Hyvor Talk Logo