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:
| Attribute | Description | Default value |
|---|---|---|
auto-init | Whether to automatically initialise Comentario | true |
auto-non-interactive-sso | Whether to automatically trigger non-interactive SSO authentication | false |
css-override | Additional CSS stylesheet URL, or false to disable loading styles altogether | |
domain-id | Overrides the domain to load the comments for | |
lang | Language for the embedded Comentario | Page language or en |
live-update | Whether Live update of comments is enabled on the page | true |
max-level | Maximum comment visual nesting level. Set to 1 to disable nesting altogether | 10 |
no-fonts | Set to true to avoid applying default Comentario fonts | false |
page-id | Overrides the path (URL) of the current page | |
theme | Colour theme to render Comentario in | OS colour theme |
Changing attributes on-the-fly
The above attributes are reactive: changing one on an already-embedded tag (for example with setAttribute()) updates the widget without a page reload. This makes it possible to switch the comment thread, the language, or the appearance dynamically, which is particularly useful in single-page applications.
Attribute changes are applied after a short delay, so a series of rapid changes results in a single update. How “deep” that update is depends on the attribute changed:
| Attribute | Effect of a change |
|---|---|
lang, css-override | The whole widget is reinitialised |
domain-id, page-id | The page data and the comments are reloaded from the server |
live-update | The comments are reloaded and the Live update subscription renewed |
max-level | The already-loaded comments are re-rendered; nothing is fetched from the server |
no-fonts, theme | Only the styling is affected; nothing is re-rendered |
auto-init | Comentario is started up, but only if it hasn’t been initialised yet |
auto-non-interactive-sso | None: this attribute is only consulted while Comentario initialises |
Below is an example of a customised <comentario-comments> tag:
<comentario-comments auto-init="false"
auto-non-interactive-sso="true"
css-override="https://example.com/custom.css"
domain-id="f9136ff9-9a2c-46ac-96c1-e3753ae23984"
lang="ru"
live-update="false"
max-level="5"
no-fonts="true"
page-id="/blog/post/123"
theme="dark"></comentario-comments>
The auto-init attribute of the comments tag controls whether the embedded Comentario comments will be rendered automatically upon page load.
Attribute: auto-non-interactive-sso
The auto-non-interactive-sso attribute of the comments tag allows to automatically trigger the non-interactive SSO login flow upon page load.
The css-override attribute of the comments tag can be used to change or disable standard Comentario styles for embedded comments.
The domain-id attribute of the comments tag can be used to explicitly provide ID of a domain to display embedded comments for.
The lang attribute of the comments tag specifies the language that should be used for the embedded Comentario comments.
The live-update attribute of the comments tag controls whether live updates of comments on the page is enabled.
The max-level attribute of the comments tag allows to limit the displayed nesting (indentation) of embedded comments.
The no-fonts attribute of the comments tag allows to disable applying standard Comentario root font (Source Sans Pro) in embedded comments.
The page-id attribute of the comments tag can be used to provide a mapping between path(s) and a page that displays embedded comments.
The theme attribute of the comments tag can be used to change the default Comentario appearance for embedded comments.