Widget

O widget é a área de comentários pronta. Ele roda isolado da sua página, segue a fonte do seu site e busca a aparência que você escolheu no painel.

Instalar

Carregue o script uma vez por página e chame Qorum.montar com o elemento onde os comentários vão aparecer:

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

Opções

Opção	Tipo	Para que serve
`key`	texto	Obrigatória. A chave pública do site (`pk_...`).
`ref`	texto	Obrigatória. Qual conversa mostrar. Veja como escolher.
`title`	texto	Nome da conversa. Aparece no painel e nas notificações. Padrão: o título da página.
`url`	texto	Endereço da conversa, usado em "Copiar link" e nas notificações. Padrão: o endereço atual, sem o `#`.
`token`	função ou texto	Token do login do seu site. Prefira uma função que devolve o token atual, assim o widget sempre usa o mais novo.
`onLogin`	função	Chamada quando a pessoa clica em Entrar. Use para abrir o login do seu site.
`onExpired`	função	Chamada quando o Qorum recusa o token do seu site (venceu ou é inválido). Gere outro e chame `definirToken`.
`template`	texto	Passa por cima do template do painel nesta página: `classico`, `cartoes`, `bolhas`, `compacto` ou `minimalista`.
`theme`	texto	Passa por cima do tema do painel: `auto`, `light` ou `dark`.
`idioma`	texto	Idioma do widget: `pt` ou `en`. Padrão: o idioma da sua página (`<html lang>`) e, sem ele, o do navegador. As mensagens do servidor seguem junto.

Sem key ou ref, o widget mostra o aviso "Qorum: faltou key ou ref" no lugar dos comentários.

Métodos

Qorum.montar devolve um objeto com estes métodos:

Método	O que faz
`recarregar()`	Busca os comentários de novo.
`definirToken(token)`	Troca o login (depois que a pessoa entra no seu site, por exemplo). Passe `null` para sair.
`configurar({ ... })`	Muda a aparência na hora: `template`, `tema` (`claro`, `escuro`, `auto`), `cor1`, `cor2`, `raio`.
`sair()`	Sai da conta Qorum neste site.

Montagem automática

Se preferir não escrever JavaScript, use atributos. O widget procura os elementos com data-qorum quando a página carrega:

<div data-qorum
     data-key="pk_SUA_CHAVE_PUBLICA"
     data-ref="post-42"
     data-title="Título do post"
     data-template="cartoes"
     data-theme="auto"
     data-idioma="pt"></div>
<script src="https://useqorum.com/widget.js" async></script>

A montagem automática não aceita token. Se você usa o login do seu site, use Qorum.montar.

Aparência

Template, cores, tema, cantos, ordem padrão e o botão "não curti" ficam no painel, na aba Aparência, com prévia ao vivo. O widget busca essa configuração sozinho, então você troca o visual sem mexer no código. Pode levar até um minuto para as páginas abertas receberem a mudança. Veja os cinco templates funcionando em Templates.

O que o leitor pode fazer

Comentar e responder. Toda resposta fica embaixo do comentário principal, com o @nome de quem foi respondido.
Curtir e marcar "não curti". Clicar de novo desfaz.
Editar e apagar os próprios comentários. Apagar um comentário principal apaga as respostas dele também.
Denunciar comentários de outras pessoas, escolhendo um motivo.
Copiar o link de um comentário.
Ver as respostas que recebeu no sino de notificações.

Conversa viva

Recurso	Como funciona
Reações na página	Uma fileira no topo (amei, haha, uau, triste, raiva, palmas) pra reagir sem escrever. Uma por pessoa: clicar em outra troca, clicar na mesma tira. Liga e desliga em Configurações.
Seguir conversa	O botão Seguir avisa no sino quando entra comentário novo, mesmo sem ninguém responder você. Os avisos da mesma conversa se juntam ("3 comentários novos") até você ler.
Comentários novos	A cada 20 segundos o widget confere se entrou algo e mostra "N comentários novos · clique pra ver", sem recarregar a página.
Ordens	Mais recentes, Melhores (curtidas contra "não curti", sem deixar 2 votos passarem na frente de 200), Em alta (votos e respostas recentes), mais antigos e mais curtidos.
@menção	Digite `@` e duas letras: aparecem as pessoas do site. Quem foi marcado recebe aviso.
Link com `#`	Com a API de busca ligada, digite `#` e o nome de uma obra, produto ou post: o widget mostra as páginas do seu site e o nome vira link. Sem resultado, dá pra colar um link de fora (uma notícia, por exemplo).
Botão Link	Texto + endereço, sem precisar saber a marcação `[texto](https://...)`.
GIF	Busca de GIFs pelo Klipy. O GIF escolhido entra como imagem do comentário.
Vídeo do YouTube	Link do YouTube vira capa com play. O player só carrega quando a pessoa clica (a página não fica pesada).
Bloquear	No menu do comentário. Quem bloqueou para de ver os comentários da pessoa e não recebe aviso dela. A lista fica no sino, em Pessoas bloqueadas.
Editado	Comentário editado mostra "(editado)". Moderadores veem as versões anteriores em Ver histórico de edição.

Formatação

A barra embaixo da caixa de texto aplica a formatação. Também dá para digitar:

Digite	Resultado
`texto`	negrito
`texto`	itálico
`~~texto~~`	~~riscado~~
`\|\|texto\|\|`	texto oculto, que aparece quando alguém clica
`https://...`	link clicável, que abre em outra aba

Qualquer outro HTML digitado aparece como texto, nunca é executado. Ctrl + Enter publica.

Imagens

Com a opção ligada em Configurações, o botão Imagem aparece na barra:

Até 4 imagens por comentário, de até 32 MB cada.
Formatos: JPG, PNG, GIF e WebP. O formato é conferido pelo conteúdo do arquivo, não pelo nome.
Com imagem, o texto pode ficar vazio.
Toda imagem é convertida para WebP antes de ser guardada, porque carrega mais rápido. GIF animado continua animado.
Imagens com o lado maior acima de 2560 pixels são reduzidas para 2560, mantendo a proporção. Acima de 40 megapixels, a imagem é recusada.
As imagens ficam guardadas sem prazo de validade.
Se a aprovação antes de publicar estiver em "Só comentários com link ou imagem", comentários com imagem vão para a fila.

Link direto para um comentário

Todo comentário tem o endereço da página mais #qorum-ID. Quem abre esse link vê o comentário em destaque no topo e a página rola até ele. É esse link que o Copiar link gera e que as notificações usam.

Sites com Content-Security-Policy

Se o seu site usa CSP, libere o Qorum nestas diretivas, senão o navegador bloqueia o widget sem aviso na tela:

script-src  https://useqorum.com
connect-src https://useqorum.com
img-src     https://i.ibb.co https://i.ytimg.com   (imagens e capas de vídeo)
frame-src   https://www.youtube-nocookie.com      (vídeos)

Com GIFs ligados, libere também https://static.klipy.com em img-src.

Fotos de perfil e outras imagens do cartão vêm dos endereços que o seu site mandar.