The Commento Plugin

For users that want simplicity and privacy in their website's commenting system, Commento is a great choice. Quick to install, Commento adds some extra features that make it stand out despite its simplicity, including Markdown support, anonymous posting, spam detection and Disqus import. It's also heavily privacy-focused; no ads are shown to users, and their data is not sold or transferred to other companies. If you're searching for a privacy-focused comment system that's great for managing a small community, Commento is a great choice.

With this plugin, integrating Commento into your Publii site is easy as pie, and quickly lets your visitors start posting.

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 Commento box of the Tools & Plugins section of the Publii app. If the switcher changes from grey to blue. then the plugin is enabled and ready to go. Be aware that if you are not planning to self-host Commento on your server, then you'll need to sign-up for an account on the Commento Sign-Up page and either purchase a subscription, or start a free trial. If needed, you can now modify the Plugin Options by clicking anywhere in the Commento box except on the switcher button; this will open the Plugin options. None of these options are required except when you are self-hosting the Commento service; for standard users, no action is required. For more details on the options available in the plugin, check the Commento Plugin Options section of this guide below.

Creating a Commento Account

The Commento Plugin for Publii integrates the Commento widget into your Publii site, but in order for it to work you must first complete the sign-up process for Commento and activate your free trial, or purchase a subscription. To setup your account, follow these steps:

Go to Commento Sign-Up page and fill out your email address, name and create a password, then click the Sign Up button.
After registration, an email will be sent to you to verify your email address; open the email and click the Verify Email button; once done, you can return to the Commento site and login.
After completing login, you'll be taken to your list of websites, which of course will be empty. Click the Add Domain button on the left of the screen to start creating a site.
A new pop-up will open with two fields; Website Name, and Website Domain. Fill these out, making sure to enter the domain correctly to prevent issues later, then click the Add Domain button.
With your domain added, you'll be able to start using Commento on your site via the Publii plugin. If this is the first site that you have registered, then you will have a thirty-day trial period; after this time, a subscription will be required to continue using comments.

Enabling Comments

In order for Commento 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.

Commento Plugin Options

None of the options in this section are required except when self-hosting Commento, but they do allow you to customize your users' experience with Commento on your site. The available options are:

Comments Configuration

Self-Hosted - Enable this option if you are running a self-hosted version of Commento. More information on self-hosting can be found on the Commento website.
URL - This option is only available when the Self-Hosted option is enabled; enter the full URL to your hosted commento.js file here. If you are using the cloud-based service offered by Commento, then disable the Self-Hosted option as no further action is required.
Hide Deleted Comments - By default, when a comment that has replies is deleted, the post is replaced with a '[deleted]' tag. By enabling this option, deleted posts will instead not be shown at all.

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 Commento 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 Commento 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 Commento scripts. By default, this will advise users that they need to change their cookie preferences in the banner before comments can be displayed.