Remark42

Frontend Configuration

Configuration

  • host: string (required) – hostname of Remark42 server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
  • site_id: string (required) – the SITE that you passed to Remark42 instance on start of backend.
  • url: string (optional, window.location.origin + window.location.pathname by default) – url to the page with comments, it is used as unique identificator for comments thread
    Note that if you use query parameters as significant part of URL (the one that actually changes content on page) you will have to configure URL manually to keep query params, as window.location.origin + window.location.pathname doesn't contain query params and hash. For example, default URL for https://example/com/example-post?id=1#hash would be https://example/com/example-post
  • components: ['embed' | 'last-comments' | 'counter'] (optional, ['embed'] by default) – an array of widgets that should be rendered on a page. You may use more than one widget on a page.
    Available components are:
    • 'embed' – basic comments widget
    • 'last-comments' – last comments widget, see Last Comments section below
    • 'counter' – counter widget, see Counter section below
  • max_shown_comments: number (optional, 10 by default) – initial number of top-level comments shown on mobile
  • max_last_comments: number (optional, 15 by default) – maximum number of comments in the last comments widget
  • theme: 'light' | 'dark' (optional, 'light' by default) – changes UI theme
  • page_title: string (optional, document.title by default) – title for current comments page
  • locale: enum (optional, 'en' by default) – interface localization, check possible localizations
  • show_email_subscription: boolean (optional, true by default) – enables email subscription feature in interface when enable it from backend side, if you set this param in false you will get notifications email notifications as admin but your users won't have interface for subscription
  • show_telegram_subscription: boolean (optional, true by default) – shows Telegram subscription controls when Telegram user notifications are enabled on the backend
  • show_rss_subscription: boolean (optional, true by default) – enables RSS subscription feature in interface
  • simple_view: boolean (optional, false by default) – enables a minimal UI with basic information only; false does not disable SIMPLE_VIEW enabled on the backend
  • no_footer: boolean (optional, false by default) – hides footer with signature and links to Remark42

Configuration example:

<script>
	var remark_config = {
		host: 'https://remark42.example.com',
		site_id: 'my_site',
		components: ['embed', 'last-comments'],
		max_shown_comments: 100,
		theme: 'dark',
		page_title: 'My custom title for a page',
		locale: 'es',
		show_email_subscription: false,
		simple_view: true,
		no_footer: false
	}
</script>

Basic configuration

Place configuration on a page of your site.
Add following initialization script after it.

<script>!function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),d=n.head||n.body;r.type="module",r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+".mjs",d.appendChild(r)}}(remark_config.components||["embed"],document);</script>

Comments

It's the main widget that renders a list of comments with ability of commenting.
Add following snippet in the place where you want to see Remark42 widget. The comments widget will be rendered in that place.

<div id="remark42"></div>

You can place any placeholder content inside the remark42 div — it will be automatically removed once the comments widget has loaded. This is useful for showing a loading indicator or message while the widget initialises:

<div id="remark42">Comments loading...</div>

If you want to set this up on a Single Page App, see the appropriate doc page.

Themes

Remark42 has two themes: light and dark. You can pick one using a configuration object, but there is also a possibility to switch between themes in runtime. For this purpose, Remark42 adds to the window object named REMARK42, which contains a function changeTheme. Just call this function and pass a name of the theme that you want to turn on:

window.REMARK42.changeTheme("light")

Locales

Right now Remark42 is translated to English (en), Russian (ru), German (de), Finnish (fi), Spanish (es), Chinese (zh), Turkish (tr), Bulgarian (bg), Ukrainian (ua), Polish (pl), Vietnamese (vi), Belarusian (be), French (fr), Japanese (ja), Korean (ko), Brazilian Portuguese (bp), Italian (it), Arabic (ar), Traditional Chinese (zh-tw), Thai (th), Czech (cs), Persian (fa), Macedonian (mk), Romanian (ro), Swedish (sv) and Hebrew (he). You can pick one using a configuration object.

Do you want to translate Remark42 to other locales? Please see this documentation for details.

Widgets

Last comments widget

It's a widget that renders the list of last comments from your site.

Add this snippet to the bottom of web page, or adjust already present remark_config to have last-comments in components list:

<script>
	var remark_config = {
		host: "REMARK_URL",
		site_id: "YOUR_SITE_ID",
		components: ["last-comments"],
	}
</script>

And then add this node in the place where you want to see last comments widget:

<div class="remark42__last-comments" data-max="50"></div>

data-max sets the maximum number of comments for this widget, overriding max_last_comments in remark_config. If neither is set, the default is 15.

Counter widget

This widget displays the number of comments for the specified page.
Add this snippet to the bottom of web page, or adjust already present remark_config to have counter in components list:

<script>
	var remark_config = {
		host: "REMARK_URL",
		site_id: "YOUR_SITE_ID",
		components: ["counter"],
	}
</script>

And then add a node like this in the place where you want to see a number of comments:

<span
	class="remark42__counter"
	data-url="https://domain.com/path/to/article/"
></span>

You can use as many nodes like this as you need to. The script will find all of them by the class remark42__counter, and it will use the data-url attribute to define the page with comments.

Also, the script can use url property from remark_config object or window.location.origin + window.location.pathname if nothing else is defined.