Hooks

Hooks allow you to programmatically modify the behavior of the comments embed.

Using Hooks

First, configure the embed to load manually using loading="manual".

<hyvor-talk-comments website-id="1234" loading="manual"></hyvor-talk-comments>

Then, add a script to register hooks and load the embed wrapping it around with customElements.whenDefined method.

<script>
	customElements.whenDefined('hyvor-talk-comments').then(() => {
		const comments = document.querySelector('hyvor-talk-comments');

		// register hooks
		comments.api.hooks.register('time:format', (props) => {
			props.text = props.datetime.toLocaleString();
			return props;
		});

		// load the embed
		comments.load();
	});
</script>

The hooks.register function takes the hook name and a callback. Callback gets an object (props) and should return the same object. Within the callback, you can update the properties of the object to modify the behaviour of the embed. You can find the list of available hooks and the properties of the props object below.

Available Hooks

time:format

Format how time is shown in comments, etc.

Showing full date:

comments.api.hooks.register('time:format', (props) => {
	props.text = props.datetime.toLocaleString();
	return props;
});

icon

Set custom icons

Setting a custom reply icon:

comments.api.hooks.register('icon', (props) => {
	if (props.name === 'reply') {
		props.html = '<svg...></svg>';
	}
	return props;
});

Available names: featured, heart, caret, thumbsUp, thumbsDown, thumbsUpActive, thumbsDownActive, link, bold, italic, quote, emoji, image, gif, bell, search, flag, mod, reply

render:comment:before

Add custom HTML to be rendered before the comment

Showing a banner before the first comment of the page:

comments.api.hooks.register('render:comment:before', (props) => {
	if (
		// a parent comment (not a reply)
		props.comment.parent_id === null &&
		// main list
		props.listType === 'main' &&
		// first comment in the list
		props.index === 0
	) {
		props.html = '<banner>My custom banner</banner>';
	}
	return props;
});

render:comment:after

Add custom HTML to be rendered after the comment

Takes the same properties as render:comment:before.

render:comment:before-content

Add custom HTML to be rendered inside the comment, but before the content

Takes the same properties as render:comment:before.

render:comment:after-content

Add custom HTML to be rendered inside the comment, but after the content

Takes the same properties as render:comment:before.

comment:content:link

Customize attributes of links in user-generated comments

By default, links in comments have href, target="_blank", and rel="ugc" attributes. You can use this hook to add or remove attributes.

Removing the rel attribute for links that starts with example.org:

comments.api.hooks.register('comment:content:link', (props) => {
	if (props.attrs.href.startsWith('https://example.org')) {
		props.attrs.rel = null;
	}
	return props;
});

t

Dynamically customize a translation using additional context

This hook is called every time a piece of text is translated. It lets you customize a translation dynamically using extra context that is not available to t- attributes, such as comment or user data.

Example of appending user's location data to labels:

comments.api.hooks.register('t', (props) => {
	if (props.key === 'parent_comment_by' || props.key === 'in_reply_to') {
		const user = props.context.user;
		if (user?.location) {
			props.text += ` from ${user.location}`;
		}
	}
	return props;
});

misc:branding

Customize Hyvor Talk branding shown at the end of the comments section

Common tips

• Make sure to always return the data object from the callback, even if you don't make any changes to it.
• Several hooks support custom HTML. To prevent XSS attacks, only set those properties directly or from trusted inputs.