Comments tag

The <comentario-comments> tag is required to embed comments on a page

The <comentario-comments> tag is the second required element on a comment page (with the script tag being the first). It represents a web component that provides the comment functionality.

This tag marks the location for displayed comments.

After Comentario engine is initialised, the comments will appear inside the corresponding HTML element — as well as the profile bar, comment editor, and other relevant elements.

Customising the comments

You can further customise Comentario by adding attributes to the <comentario-comments> tag. You can use the Options button next to the snippet to open the option editor.

Comentario recognises the following tag attributes:

AttributeDescriptionDefault value
auto-initWhether to automatically initialise Comentariotrue
css-overrideAdditional CSS stylesheet URL, or false to disable loading styles altogether
live-updateSet to false to disable live updates of comments on the pagetrue
max-levelMaximum comment visual nesting level. Set to 1 to disable nesting altogether10
no-fontsSet to true to avoid applying default Comentario fontsfalse
page-idOverrides the path (URL) of the current page

NB: it’s recommended to set live-update to false when live update is disabled globally on the server (see --no-live-update) to reduce network utilization and unburden the browser.

Below is an example of a customised <comentario-comments> tag:

<comentario-comments auto-init="false" 
                     css-override="https://example.com/custom.css"
                     live-update="false"
                     max-level="5"
                     no-fonts="true" 
                     page-id="/blog/post/123"></comentario-comments>

Manual initialisation

If you disabled automatic initialisation by adding auto-init="false", you need to initialise Comentario manually by calling the main() method of the web component. Here’s a simple example:

<comentario-comments id="comments"></comentario-comments>
<script>
    window.onload = function() {
      document.getElementById('comments').main();
    };
</script>

Calling main() initialises Comentario. Repeated calls will re-initialise the web component, erasing and filling the comments from scratch.

See also