Customizing components is an advanced use case. It requires some understanding of how component-based JS frameworks (ex: React) works. The following components in the Hyvor Talk comments embed are customizable.
The Hyvor Talk embed is built using Preact, a lightweight React-compatible library. To customize components, you have to set the components
property in the <hyvor-talk-comments>
with a key-value pair of the component name and the component function.
Creating components requires you to load the Preact library. The easiest way would be loading it as a module.
<script type="module">
import { h } from 'https://unpkg.com/preact?module';
const comments = document.querySelector('hyvor-talk-comments');
comments.components = {
'icon.thumbsUp': () => h('span', null, '👍'),
}
comments.load();
</script>
Tip: To replace an icon with another SVG icon, you may use the
dangerouslySetInnerHTML
attribute.'icons.star': () => h('svg', { dangerouslySetInnerHTML: { __html: '<svg></svg>' } }
The following components are customizable.
loader
(defaults to a spinner)icon.star
icon.heart
icon.caret
icon.thumbsUp
icon.thumbsDown
icon.thumbsUpActive
icon.thumbsDownActive
icon.link
icon.bold
icon.italic
icon.quote
icon.emoji
icon.image
icon.gif
icon.bell
icon.search
icon.flag
icon.mod