The Cusdis Comments Plugin

For users that aren't looking for complex commenting ecosystems, Cusdis is the perfect commenting solution. Lightweight, easy-to-use, and open-source, it's a great option for users that don't require the complex features and larger load sizes of other popular comment systems. It may also be self-hosted; a great option if you run multiple sites and would like to keep total control of your commenters data.

The Cusdis Comments Plugin allows you to integrate Cusdis into your Publii site, allowing users to add comments to your posts and pages.

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

If you are using an earlier version of Publii themes or your own custom theme, then before you can use the comments plugins available from our Marketplace, you will need to make a small change to your theme's post.hbs file to enable the comments to function correctly. To do so, follow these steps:

Open your preferred file explorer 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 you currently use 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}}

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 Cusdis Comments box of the Tools & Plugins section of the Publii app. If the switcher changes from grey to blue. then the plugin is enabled. You'll need to add your App ID from your Cusdis account to the plugin settings before the plugin can function correctly; to do this, open the Plugin Options screen by clicking on the Cusdis Comments box anywhere except on the switcher button; this will open the Plugin options. Only the App ID is required, but you can find further details on the available options in this section later in this guide.

How to Find Your Cusdis App ID

The only information that must be added to the Cusdis plugin's options is the App ID; without it, the comments plugin cannot function. Thankfully, creating an account with Cusdis is very simple. To create an App ID, follow these steps:

Go to the Cusdis website and click on the Start for Free button to open the login screen.
You'll need to login using either your Google or GitHub account. Click on the Sign in with... button for your preferred option, and follow the steps to login.
Cusdis will now ask you for a Website; this name is only used to identify which site's comments you are checking when in the Cusdis dashboard, so feel free to enter any name you like.
You'll now be taken to the Cusdis Dashboard, where you can see and manage the comments that are added to your site. To find your App ID, click on the Embed Code button at the top of the screen to open a pop-up.
We don't need all of the code here; instead, we need to check the third line, which begins with data-app-id. It will look something like this:
```
data-app-id="a2d11511-7012-4254-9483-cb49c8f4dfe8"
```
Copy the string of numbers, dashes and letters between the quotation marks; this will be your App ID.
Copy your App ID into the plugin settings in Publii, and save the changes. The comments plugin is now configured.

Enabling Comments

In order for Cusdis to display comments on your posts and pages, it also 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 / Page Options section of the Theme Settings and enable the Display Comments option.

Alternatively, you may enable comments on individual posts/pages on a case-by-case basis when creating a new post/page or editing an existing post/page 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/page.

Cusdis Comments Options

This plugin offers simple options to configure the look and feel of your comments section. The available options are:

Comments Configuration

App ID - Enter the App ID provided by Cusdis in this section. This field must be completed before the comments plugin can function.
Data Host - This option defines the host that Cusdis should send and receive comment data to. By default, this is set to https://cusdis.com; this should only be changed if you are using a self-hosted instance of Cusdis.
Color Scheme - Sets the color scheme of the comments section; choose between Light mode and Dark mode. Alternatively, setting it to Auto will allow the comments section to switch modes to match the user's browser settings.

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; for additional styling options on top of or alternatively to the default styling that is applied to the respective H2-H6 text. Leave as default to use the standard theme styling.
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 option will add an option to the built-in Publii cookie banner for users to consent to cookies from Cusdis.
Cookie Group ID - This option only becomes available when the Cookie Banner Integration option is enabled. Here, you can specify the cookie group that the Cusdis cookies should be added to, e.g. 'comments'. Make sure to add (if it doesn't exist) the 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.