Hooks (Beta)

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.

<script>
	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

Click each hook to see their data properties.

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.