The Hyvor Talk Plugin

Hybor Talk is one of the more fully-featured commenting platforms available today that places a lot of importance on privacy, which makes it a great choice when you want the features of a well-known platform without worrying about GDPR compliance or ads being shown to users. With extensive customization and powerful moderation tools, Hyvor Talk has a lot to offer.

With the Hyvor Talk plugin, you can easily add a comments section to your Publii posts; all you'll need is your Hybor Talk Website ID and you'll be ready to start commenting.

Adding Comment Plugin Support to Your Theme (for older or custom themes)

If you are using a earlier version of the free or marketplace Publii themes, or your own custom theme based on earlier versions of Publii, then before you can use the comments plugins available from the Plugin Marketplace, you will need to make a small change to your theme's post.hbs file to enable the comments to function correctly. Users that have the latest theme updates installed will not need to make this change, as it has already been added via the updates. To make the changes in the post.hbs file, follow these steps:

Open your preferred file Eexplorer app, and navigate to the Documents/Publii/sites/YOUR_SITE/input/themes/YOUR_THEME folder.
where 'YOUR_SITE' is your site's name, and 'YOUR_THEME' is the folder for the theme that you are currently using on the site.
Using the code editor of your choice, open the post.hbs file (this can be opened in basic apps such as notepad, if you don't have any special code editor installed).

Near the bottom of the code list, find the section which might look like this:

{{#if @config.post.displayComments}} 
    <div class="post__comments"> 
       <div class="wrapper"> 
          <h2 class="h5">{{ translate 'post.comments' }}</h2> 
       {{> disqus}} 
       </div> 
    </div> 
{{/if}}

And change it to:

{{#if @config.post.displayComments}}
    <div class="post__comments"> 
       <div class="wrapper"> 
          {{{@commentsCustomCode}}}
       </div> 
    </div> 
{{/if}}

Be careful not to replace the specified text only to avoid errors.

Once you have edited the file, save the changes; you will now be able to use the comments plugins without issues.

Activating the Plugin

The plugin can be enabled by clicking the switcher button in the Hyvor Talk box of the Tools & Plugins section of the Publii app. If the switcher changes from grey to blue. then the plugin is enabled. However, you will need to configure some of the plugin options and provide your Hyvor Talk Website ID before comments will work on your site. To modify the Plugin Options, click anywhere in the Hybor Talk box except on the switcher button; this will open the Plugin options. We'll cover how to get your website ID in the next section; for more details on the other options available in the plugin, check the Hyvor Talk Plugin Options section of this guide below.

How to Find the Hybor Talk Website ID

The website ID is the only information that this plugin requires before it can start adding comments on your site; to get one, you'll need to create a Hybor Talk account and register your site. To do so, follow these steps:

Visit the Hyvor Talk Sign-Up Page and create an account; you can use your Google, Facebook or Twitter accounts to autofill the fields, but you will still need to set a password. Once you've filled out the fields, click on the Sign Up button.
An email containing a 6-digit verification code will be sent to you to confirm your email; enter this into the next screen of the sign-up process to continue.
Once your account is created, log-in, and then navigate to the Add Website page for Hyvor Talk.
On the Add Website page, enter both your website name, and the domain for your site, then click the Add button to complete the process.
Once added, you'll be taken to the Installation page; here, the first option will be Your Website ID; copy this 4-digit code; enter this into the Plugin Options in the Publii app to finish configuring the plugin.

Enabling Comments

In order for Hyvor Talk to display comments on your posts, it needs a space where the comments box can be added. Publii themes include a section for the comments, but it is disabled by default to prevent any visual errors occurring when no comments plugins are enabled. You will need to change the Comments option in your theme settings; once enabled, Publii will create a comments area on the page where the plugin can display. To use comments on your site, first navigate to the Theme section of the app by clicking the option in the left-sidebar menu, then navigating down to the Custom Settings → Post Options section of the Theme Settings and enable the Display Comments option.

Alternatively, you may enable comments on individual posts on a case-by-case basis when creating a new post or editing an existing post by clicking on the Settings icon in the top-right of the editing area (represented by a cog) to open the settings, then clicking on the Other Options option to see the full selection of options. At the bottom of this section will be the Display Comments option, which you can enable/disable specifically for that one post.

Hyvor Talk Plugin Options

As well as the required Website ID option, there are multiple options for configuring the look, feel, and functionality of your comments section. The available options in this plugin are:

Comments Configuration

Website ID - Enter your Website ID from your Hyvor Talk account here. This option is required before the comments plugin can function correctly.

Theme Integration

Header Title - Text entered in this field will be used as the title for the comments box on your site.
Heading Level - Sets the header size/styling that should be used for the header title.
Fallback Message - Text entered in this field will be displayed if the comments box is unable to load due to the user disabling scripts or using a browser that doesn't include support for scripts. By default it advises that JavaScript must be enabled to display comments.
Comments Wrapper - Sets a custom CSS class for the comments wrapper; that is, the outer area surrounding the comments section. Leave this as the default to use the standard styling set in the theme code.
Comments Inner Wrapper - Sets a custom CSS class for the inner wrapper of the comments; the inner area of the comments section. Leave as default to use the theme's built-in comment styling.
Comments Heading - Sets a custom CSS class for the comments heading; that is, the area above the comments section where the header text is displayed.
For example, for semantic purposes, you want to leave heading H2 but reduce its font size, so you can use one of the available classes in our themes: h1 h2 h3 h4 h5 h6
To change the text alignment, use the following classes: align-left align-right align-center

Advanced Options

Lazy Load - Enabling this option allows the comments section to utilise Lazy Loading. This uses moments when the browser is idle to start pre-loading the comments section as the user scrolls down the page to reduce the delay before comments are displayed.

Cookie Banner Integration

Enabling this adds an option allowing users to consent to the cookies used by Hyvor Talk into the built-in Publii cookie banner. Once this option is enabled, two more options will become available:

Cookie Group ID - Enter a name here for the cookie group that the Hyvor Talk cookies should be included in; e.g. ’comments’. Make sure to add (if it doesn't exist) this group name to the GDPR section of the site settings. You can find instructions on how to do this in the GDPR section of this documentation.
Fallback Message - Sets a message that should be displayed if the user does not consent to using Hyvor Talk scripts. By default, this will advise users that they need to change their cookie preferences in the banner before comments can be displayed.