Frontend Configurations
Configure the comments widget in your site
Outline
Introduction
The frontend configuration allows you to modify the appearance of the embedded comments box. For example, you can specifying a custom CSS stylesheet to override the default appearance to match the look and feel of your website. In this page, we document how to embed Comments in your website and the exhaustive list of frontend settings you can configure.
You can configure additional frontend settings by adding data
attributes to the <script>
tag. For example, to specify custom CSS styling, you can add the data-css-override
and data-auto-init
attributes as follows:
<div id="s9comments"></div>
<script
defer
src="https://social9.com/comments/js/commento.js"
data-css-override="http://example.com/my-custom-styling.css"
data-auto-init="true"
></script>
Configuration Settings
data-css-override
An URL to a CSS file with overriding styles. Defaults to no override and uses the default theme.
Example: data-css-override="http://example.com/my-custom-styling.css"
data-auto-init
Comments automatically initialises itself when the page is loaded. If you prefer to load it dynamically (for example, after the user clicks a button), you can disable this. You will be required to call window.s9comments.main()
when you want to load Comments. By default, this is true.
Allowed: true
, false
data-id-root
By default, Comments looks for a <div>
with id="s9comments"
or id="commento"
. If you want to load Comments in a different element, you can set this attribute to the ID of that element.
Example: data-id-root="different-element"
data-no-fonts
By default, Comments uses the Source Sans Pro font to present a good design out-of-the-box. If you'd like to disable this so that Comments never loads the font files, you can set this to true. By default, this is true
.
Allowed: true
, false
data-hide-deleted
By default, deleted comments with undeleted replies are shown with a "[deleted]"
tag. If you'd like to disable this, setting this to true will hide deleted comments even if there are legitimate replies underneath. Deleted comments without any undeleted comments underneath are hidden irrespective of the value of this function. By default, this is false
.
Allowed: true
, false
data-page-id
By default, Comments will use the browser URL to determine which page's comments should be served. If you changed the URL of a page or if you'd like to use a dynamically set custom ID for each page, use this option. Note that the value need not be a URL path; whatever you set as the value here will be used to uniquely identify your page.
Example: data-page-id="/path/to/older/post.html"