Instalação

O código de incorporação

Copie seu código de incorporação em Site Console → seu widget → Install & Embed, onde sua app key já vem preenchida.

<script defer src="https://embeds.crowment.com/comments.js"></script>

<crow-comments app-key="YOUR_APP_KEY"></crow-comments>

1. Coloque a tag <script> no <head> das suas páginas. Basta carregá-la uma vez por página.
2. Coloque a tag <crow-comments> no <body>, onde a seção de comentários deve aparecer, normalmente logo depois do seu artigo.

Essa é toda a instalação. O widget se ajusta à largura do elemento ao redor.

WordPress

O plugin Crowment Comments substitui os comentários nativos do WordPress pelo widget; não é preciso editar o tema.

1. Baixe crowment-comments.zip.
2. No WordPress, vá em Plugins → Add New → Upload Plugin, escolha o zip e selecione Install Now e depois Activate.
3. Em Settings → Crowment Comments, cole sua app key e salve.

Seus comentários do WordPress continuam no banco de dados; ficam ocultos enquanto o plugin estiver ativo. Para atualizar o plugin, envie o novo zip do mesmo jeito e confirme a substituição da versão atual.

Frameworks e criadores de sites

<crow-comments> é um web component padrão, então funciona em qualquer lugar onde você possa adicionar HTML: sites estáticos, temas de CMS, React, Vue, Svelte, Angular e outros.

Alguns frameworks avisam sobre tags desconhecidas. Diga a eles que crow-comments é um elemento personalizado:

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: tag => tag === 'crow-comments',
    },
  },
})

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'crow-comments',
        },
      },
    }),
  ],
}

Aplicativos de página única

Você não precisa recriar o widget quando o aplicativo muda de rota. Ele acompanha sozinho a navegação no navegador (pushState, replaceState e os botões de voltar e avançar) e carrega a conversa da nova página.

Qual conversa uma página mostra

Cada página tem sua própria conversa. Por padrão, o widget identifica uma página pelo caminho da URL e ignora o resto do endereço. Para https://example.com/blog/ola?ref=mail#comentarios, isso é /blog/ola. Ou seja:

• /blog/ola?utm_source=newsletter e /blog/ola compartilham uma conversa.
• /blog/ola e /blog/ola/ são caminhos diferentes, então têm conversas diferentes. Mantenha suas URLs consistentes.
• As conversas pertencem a um widget. Dois widgets nunca compartilham comentários, mesmo no mesmo caminho.

Três atributos mudam a forma como uma página é identificada:

• watch-query adiciona os parâmetros de consulta à identidade da página, em ordem alfabética, então ?b=2&a=1 e ?a=1&b=2 são iguais. Use quando a consulta seleciona o conteúdo, como em /watch?v=abc123. Todo parâmetro conta, incluindo os de rastreamento como utm_source.
• watch-hash adiciona o hash à identidade da página. Use com rotas baseadas em hash, como /#/posts/42.
• page-id troca a URL por um identificador escolhido por você. Use quando o mesmo conteúdo está em várias URLs ou quando suas URLs podem mudar. Um valor estável, como o ID do post no seu banco de dados, mantém a conversa ligada à página mesmo que a URL mude.

<crow-comments app-key="YOUR_APP_KEY" page-id="post-1842"></crow-comments>

Link para um comentário

Adicione crowment_cid com o ID de um comentário a qualquer URL de página para abri-la com a conversa daquele comentário carregada, por exemplo https://example.com/blog/ola?crowment_cid=COMMENT_ID. Os IDs dos comentários podem ser copiados no menu do comentário, no widget.

Referência de atributos

Atributos booleanos ficam ativos quando estão presentes: <crow-comments app-key="…" watch-query>. Você pode mudar qualquer atributo depois que a página carregar, e o widget acompanha.