Comece a usar o Commely

Visão geral

O Commely tem duas partes:

• Widget: a área de comentários que aparece nas páginas do seu site. Você instala com uma única linha de código, sem bibliotecas adicionais.
• Painel: o dashboard em dash.commely.octavu.online, onde você gera o código de instalação, autoriza domínios, modera comentários e gerencia a equipe.

Os visitantes comentam informando apenas nome e e-mail, sem criar conta e sem login em redes sociais.

Plano gratuito

O plano gratuito não tem custo nem prazo de validade e inclui:

• comentários e respostas ilimitados;
• curtidas e "não curti" em cada comentário;
• tema claro, escuro ou automático;
• cor de destaque personalizada, para combinar com a sua marca;
• painel de moderação completo e equipe com cargos;
• nenhum anúncio para você ou para os seus visitantes.

No plano gratuito:

• o widget exibe a marca "Powered by Commely" no rodapé;
• além da cor de destaque, as demais cores do widget, como texto, fundo e bordas, seguem o padrão do Commely, e outros estilos CSS personalizados são ignorados.

Criar sua conta

1. Acesse a página de cadastro e informe o nome do seu site ou empresa, seu nome, e-mail e uma senha com pelo menos 8 caracteres.
2. Clique em Continuar. Enviamos um código de 6 dígitos para o seu e-mail.
3. Digite o código e clique em Verificar e criar conta. O código vale por 10 minutos e aceita até 5 tentativas.

Chaves e domínios

O widget se identifica com uma chave. Crie as suas em Chaves e domínios no painel. Existem dois tipos:

Domínios autorizados

Toda chave de produção precisa de pelo menos um domínio autorizado. Exemplos:

• exemplo.com libera somente exemplo.com.
• *.exemplo.com libera os subdomínios, como www.exemplo.com e blog.exemplo.com, mas não o domínio raiz. Para liberar os dois, cadastre exemplo.com e *.exemplo.com.

Use o seletor de ambiente do painel para alternar entre os dados de teste e os de produção.

Instalar o widget

A forma mais simples é copiar o código pronto na página Instalação do painel, que já vem com a sua chave e as opções escolhidas. O código tem este formato:

<div id="commely"></div>
<script
  src="https://cdn.octavu.online/js/commely@0.6.2/commely.js"
  data-api-key="cmly_live_SUA_CHAVE"
  async></script>

Cole o código no HTML da página, no ponto onde os comentários devem aparecer, normalmente no fim do artigo. Ele funciona em qualquer site: HTML estático, WordPress (bloco HTML personalizado), Blogger, Ghost, Wix e similares.

Sites com navegação sem recarregar a página

Em sites feitos com React, Vue, Angular ou frameworks parecidos, carregue o script uma vez e monte o widget pelo JavaScript em cada página:

<script src="https://cdn.octavu.online/js/commely@0.6.2/commely.js"></script>

<div id="commely"></div>
<script>
  const commely = Commely.mount('#commely', {
    apiKey: 'cmly_live_SUA_CHAVE',
    key: 'meu-post-123'
  });
  // Ao sair da página: commely.destroy();
</script>

Chame commely.destroy() quando o usuário sair da página, para liberar os recursos do widget.

Opções do widget

Na instalação com a tag <script>, use os atributos data-*. Na instalação por JavaScript, use as opções equivalentes de Commely.mount.

Como as conversas são separadas

Cada conversa, chamada de thread no painel, é identificada por uma chave. Por padrão, a chave é o caminho do endereço da página, como /blog/meu-post.

Isso significa que endereços diferentes para o mesmo conteúdo, como /blog/meu-post e /2026/10/meu-post, geram conversas separadas. Para manter uma única conversa, defina uma chave fixa com data-key, usando um valor que não muda, como o slug ou o ID do post:

<script
  src="https://cdn.octavu.online/js/commely@0.6.2/commely.js"
  data-api-key="cmly_live_SUA_CHAVE"
  data-key="post-123"
  async></script>

Aparência

• Tema: escolha entre claro, escuro ou automático com data-theme. No modo automático, o widget acompanha a preferência de tema do sistema do visitante.
• Cor de destaque: a cor dos botões, links, contadores e do coração da equipe. Escolha a cor na página Instalação do painel ou defina a variável --commely-accent no elemento do widget, como em <div id="commely" style="--commely-accent: #2563eb"></div>. As variações de cor para o cursor e os fundos suaves são calculadas automaticamente.
• Fonte: o widget usa a mesma fonte do seu site, herdada do elemento onde ele é exibido. O tamanho do texto é fixo, para manter a leitura confortável.
• Isolamento: os estilos do widget ficam isolados. O CSS do seu site não quebra o widget, e o widget não altera o seu site.
• Pré-visualização: a página Instalação do painel mostra o widget com as opções escolhidas antes de você copiar o código.

Experiência dos visitantes

• Comentar: o visitante informa nome (até 100 caracteres), e-mail (não é publicado) e o comentário (até 5.000 caracteres). O navegador lembra o nome e o e-mail para os próximos comentários.
• Responder: qualquer comentário pode receber respostas.
• Reagir: cada visitante pode curtir ou marcar "não curti" uma vez por comentário, e pode trocar ou desfazer a reação.
• Editar e excluir: o visitante pode editar ou excluir os próprios comentários a partir do mesmo navegador em que os publicou. Esses comentários aparecem com a etiqueta "Você".
• Respostas da equipe: respostas publicadas pelo painel aparecem com a etiqueta da administração, e comentários curtidos pela equipe exibem um coração.

Moderação

Na página Moderação do painel, você pode:

• buscar comentários por texto, autor ou e-mail e filtrar por publicados ou removidos;
• remover um comentário indevido. As respostas a ele continuam visíveis, e o comentário aparece como removido para os visitantes;
• restaurar um comentário removido, já que o conteúdo original continua disponível para a moderação;
• responder em nome da administração e curtir um comentário com o coração da equipe;
• bloquear uma conversa para novos comentários, mantendo os comentários existentes visíveis;
• excluir uma conversa inteira.

A página Visão geral mostra os números do ambiente selecionado, como total de conversas, comentários e reações, além dos comentários mais recentes.

Equipe e cargos

Em Equipe e cargos, adicione pessoas que já tenham uma conta no Commely, informando o e-mail delas. Cada pessoa recebe um cargo:

Todo site precisa manter pelo menos um proprietário. Uma mesma pessoa pode participar da equipe de vários sites e alternar entre eles pelo painel.

Configurações

Em Configurações, você altera o nome do site ou empresa e o fuso horário usado para exibir datas e relatórios no painel. O painel também permite escolher entre português, inglês e espanhol e entre os temas claro e escuro.

Solução de problemas

O widget não aparece

• Confira se o código tem o atributo data-api-key com a chave completa.
• Confira se existe na página um elemento com id="commely" ou o seletor indicado em data-target.
• Abra o console do navegador (tecla F12) e procure mensagens que comecem com [Commely].

Aparece um erro de domínio não autorizado

• Chaves de produção só funcionam nos domínios cadastrados. Adicione o domínio exato do site, lembrando que exemplo.com e www.exemplo.com são domínios diferentes.
• Para testar no seu computador (localhost), use uma chave de teste.

Os comentários de teste não aparecem no painel

Comentários feitos com chaves de teste ficam no ambiente de teste. Troque o ambiente no seletor do painel para vê-los.

Os comentários aparecem em conversas separadas

A mesma página está sendo acessada por endereços diferentes. Defina uma chave fixa com data-key, como explicado em como as conversas são separadas.