This documentation site is about the unstable (upcoming) Comentario version.  Switch to the stable version »

Attribute: page-id

The page-id attribute of the <comentario-comments> tag indicates the page path within the domain

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.

This attribute is a misnomer (inherited from Commento), because the value of page-id must be a path under the page’s domain.

Comentario uses it for the following two purposes:

  1. As the page’s identifier indicating which comments belong to that page, and
  2. As the actual page’s path, used, for instance, to create a link to the comment in email notifications.

Because it’s an identifier, it must uniquely represent the page. Multiple pages with the same identifier will share the same comment thread.

And since it’s also a path, it has to start with a slash (/) and resolve to a real URL — if necessary, by adding a redirect.

Use cases

This is most useful (or even required) in situations when you can’t simply rely on the page URL to render its comments:

  • You have a multilingual website that has several versions of the same page, and you want all of them to share the same comments, for instance htpps://example.com/en/product/123 and htpps://example.com/fr/product/123.
  • Your website applies query parameters that are completely irrelevant for rendering comments, such as htpps://example.com/product/123?session-id=0e6e74d4-13f9-49e1-9049-91e40c185c17.
  • The page URL doesn’t change at the right moment or at all, for example, in a single-page application (SPA). Comentario doesn’t watch the browser URL: it reads it on initialisation and ignores any subsequent changes to it.

Changing the value on-the-fly

This attribute is reactive: changing it on an already-embedded tag reloads the page data and the comments for the new path, without recreating the element or reloading the browser page.

In an SPA you can therefore keep a single <comentario-comments> element around and point it at the current route on every navigation:

document.querySelector('comentario-comments').setAttribute('page-id', '/product/123');

Removing the attribute switches back to the path of the current browser URL.

Reloading the comments discards any comment that is currently being written or edited, so avoid changing the value while the user may be typing.

See also