Quick start

From sign-up to the first comment showing up on your site. It takes a few minutes and needs no server.

Step by step

1. Create your account

   Open the dashboard and pick a username (3 to 30 characters: lowercase letters, numbers, _ and dot) and a password of at least 8 characters. There is no e-mail recovery, so keep the password somewhere safe.

2. Register the site

   Click New site, give it a name and enter the domains where the comments will appear, one per line. Read the Domains section below, because this is where most people go wrong.

3. Copy the code

   In the Install tab the code already comes with your public key. Paste it where the comments should appear on the page, usually right after the content.

4. Change the ref

   In the code, replace ID-UNICO-DA-PAGINA with something that identifies the page, like post-42. See How to choose the ref.

5. Open the page and test

   Reload the page. The comments should show up with the Log in button. If you see an error, use the Test connection tab in the dashboard or the Troubleshooting page.

6. Adjust the rest

   Pick the template and colors in Appearance, the rules in Settings and, if your site has a login, turn on your site's login.

Domains

Qorum only answers pages that are on the site's domain list. This stops anyone from copying your public key and using your comments somewhere else.

The browser sends the page's origin: protocol, domain and port, without the path. For the page https://www.mysite.com/blog/post-42, the origin is https://www.mysite.com.

• With and without www are different domains. If the site opens both ways, register both.
• http and https are different. If you type just mysite.com, the dashboard registers https://mysite.com.
• To test on your computer, register the local address with the port, like http://localhost:3000.
• Subdomains count separately: https://blog.mysite.com must be on the list if the comments appear there.

How to choose the ref

The ref says which conversation to show. Two pages with the same ref show the same comments. Rules:

• Up to 200 characters: letters, numbers and _ . : @ / -. No spaces and no accents.
• Use something that never changes. The post id in your database is better than the title, which can be edited.
• Don't use the full address with ? and parameters: the same page with different parameters would become different conversations.
• If the site has different kinds of pages, use a prefix: post-42, product:17, lesson:3:video:2.

Examples by kind of site

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

<?php // in the theme file that shows the post (single.php), after the_content() ?>
<div data-qorum
     data-key="pk_YOUR_PUBLIC_KEY"
     data-ref="post-<?php the_ID(); ?>"
     data-title="<?php echo esc_attr( get_the_title() ); ?>"
     data-url="<?php the_permalink(); ?>"></div>
<script src="https://useqorum.com/widget.js" async></script>

import { useEffect, useRef } from 'react';

// load it once in index.html: <script src="https://useqorum.com/widget.js"></script>
export function Comments({ postId }) {
  const box = useRef(null);
  useEffect(() => {
    window.Qorum.montar(box.current, {
      key: 'pk_YOUR_PUBLIC_KEY',
      ref: `post-${postId}`,
    });
  }, [postId]); // new post, mount the new conversation
  return <div ref={box} />;
}

<!-- load it once in index.html: <script src="https://useqorum.com/widget.js"></script> -->
<template><div ref="box"></div></template>

<script setup>
import { ref, watchEffect } from 'vue';
const props = defineProps({ postId: [String, Number] });
const box = ref(null);
watchEffect(() => {
  if (box.value) window.Qorum.montar(box.value, { key: 'pk_YOUR_PUBLIC_KEY', ref: `post-${props.postId}` });
});
</script>

On sites that change pages without reloading (React, Vue, Next and the like), call Qorum.montar again when the page changes. It replaces the previous conversation in the same element.

The widget speaks Portuguese and English. It follows the language of your page (<html lang>) or you can force it with idioma: 'en' (or data-idioma="en").

Before going live

• Every domain of the site (with and without www) is on the list.
• Each page has a unique ref that never changes.
• The key in the code starts with pk_. If it starts with sk_, rotate it right away: that's the secret one.
• You tested commenting, replying and deleting with a test account.