Skip to content

Widget

The widget is the ready-made comment section. It runs isolated from your page, follows your site's font and fetches the appearance you chose in the dashboard.

Install

Load the script once per page and call Qorum.montar with the element where the comments will appear:

<div id="comentarios"></div>
<script src="https://useqorum.com/widget.js"></script>
<script>
  const comments = Qorum.montar(document.getElementById('comentarios'), {
    key: 'pk_YOUR_PUBLIC_KEY',
    ref: 'post-42'
  });
</script>

Options

OptionTypeWhat it's for
keytextRequired. The site's public key (pk_...).
reftextRequired. Which conversation to show. See how to choose it.
titletextName of the conversation. Shows up in the dashboard and in notifications. Default: the page title.
urltextAddress of the conversation, used in "Copy link" and in notifications. Default: the current address, without the #.
tokenfunction or textToken from your site's login. Prefer a function that returns the current token, so the widget always uses the newest one.
onLoginfunctionCalled when the person clicks Log in. Use it to open your site's login.
onExpiredfunctionCalled when Qorum refuses your site's token (expired or invalid). Create another one and call definirToken.
templatetextOverrides the dashboard template on this page: classico, cartoes, bolhas, compacto or minimalista.
themetextOverrides the dashboard theme: auto, light or dark.
idiomatextWidget language: pt or en. Default: the language of your page (<html lang>), then the browser's. Messages from the server follow it too.

Without key or ref, the widget shows the notice "Qorum: missing key or ref" instead of the comments.

Methods

Qorum.montar returns an object with these methods:

MethodWhat it does
recarregar()Fetches the comments again.
definirToken(token)Changes the login (after the person logs in to your site, for example). Pass null to log out.
configurar({ ... })Changes the appearance on the spot: template, tema (claro, escuro, auto), cor1, cor2, raio.
sair()Logs out of the Qorum account on this site.

Automatic mounting

If you'd rather not write JavaScript, use attributes. The widget looks for elements with data-qorum when the page loads:

<div data-qorum
     data-key="pk_YOUR_PUBLIC_KEY"
     data-ref="post-42"
     data-title="Post title"
     data-template="cartoes"
     data-theme="auto"
     data-idioma="en"></div>
<script src="https://useqorum.com/widget.js" async></script>

Automatic mounting doesn't accept token. If you use your site's login, use Qorum.montar.

Appearance

Template, colors, theme, corners, default order and the dislike button live in the dashboard, in the Appearance tab, with a live preview. The widget fetches this configuration by itself, so you change the look without touching the code. Open pages may take up to a minute to get the change. See the five templates working in Templates.

What readers can do

A living conversation

FeatureHow it works
Page reactionsA row at the top (love, haha, wow, sad, angry, applause) to react without writing. One per person: clicking another switches, clicking the same removes it. Turn it on or off in Settings.
Follow conversationThe Follow button notifies the bell when a new comment arrives, even if nobody replied to you. Notices for the same conversation are grouped ("3 new comments") until you read them.
New commentsEvery 20 seconds the widget checks for new comments and shows "N new comments · click to see", without reloading the page.
Sort ordersNewest, Best (likes against dislikes, without letting 2 votes jump ahead of 200), Trending (recent votes and replies), oldest and most liked.
@mentionType @ and two letters: the site's people show up. Whoever is tagged gets notified.
Link with #With the search API on, type # and the name of a work, product or post: the widget shows your site's pages and the name becomes a link. With no result, an outside link can be pasted (a news story, for example).
Link buttonText + address, without knowing the [text](https://...) markup.
GIFGIF search by Klipy. The chosen GIF goes in as an image of the comment.
YouTube videoA YouTube link becomes a cover with a play button. The player only loads when the person clicks (the page stays light).
BlockIn the comment's menu. The blocker stops seeing the person's comments and gets no notices from them. The list is in the bell, under Blocked people.
EditedAn edited comment shows "(edited)". Moderators see previous versions in See edit history.

Formatting

The bar under the text box applies formatting. You can also type:

TypeResult
**text**bold
*text*italic
~~text~~strikethrough
||text||hidden text, shown when someone clicks it
https://...clickable link that opens in a new tab

Any other HTML that is typed shows up as text and is never executed. Ctrl + Enter publishes.

Images

With the option turned on in Settings, the Image button shows up in the bar:

Direct link to a comment

Every comment has the page address plus #qorum-ID. Whoever opens that link sees the comment highlighted at the top and the page scrolls to it. That's the link Copy link creates and the one notifications use.

Sites with a Content-Security-Policy

If your site uses CSP, allow Qorum in these directives, otherwise the browser blocks the widget with no warning on screen:

script-src  https://useqorum.com
connect-src https://useqorum.com
img-src     https://i.ibb.co https://i.ytimg.com   (images and video covers)
frame-src   https://www.youtube-nocookie.com      (videos)

With GIFs on, also allow https://static.klipy.com in img-src.

Profile photos and other card images come from the addresses your site sends.