Installation | FastComments Docs

Instalação

FastComments foi projetado para ser instalado em qualquer tipo de página - estática ou dinâmica, com tema claro ou escuro, páginas públicas ou internas. Deve ser fácil de instalar e adaptar a qualquer tipo de site ou aplicação web.

WordPress

Você pode encontrar nosso plugin WordPress aqui.

Um guia de instalação completo e documentação sobre o plugin estão aqui.

Este plugin suporta comentários ao vivo, SSO e instalação sem código. Simplesmente siga o guia de instalação na página de administração após instalar o plugin. Ele irá guiá-lo para conectar sua instalação WordPress à sua conta.

Qualquer comentário deixado com FastComments através do nosso plugin WordPress pode ser sincronizado automaticamente com sua instalação WordPress para que você mantenha o controle sobre seus dados. Isso pode ser desativado para limitar o tamanho do seu banco de dados WordPress.

VanillaJS / Trecho HTML

A versão VanillaJS do widget é muito fácil de instalar, não requerendo sistemas de build ou código do lado do servidor.

Simplesmente adicione o seguinte trecho de código a qualquer página:

Simple Code Snippet
Copy Run 
<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo"
}];
</script>

Você pode usar o mesmo trecho de código em muitas páginas; ele criará automaticamente uma thread separada por página.

Muitas aplicações têm uma opção "Código de Incorporação HTML". Selecione isso e cole o trecho de código acima.

Você também não precisa de uma conta para experimentar! Você pode ver "tenantId: demo" no trecho acima se não estiver logado. Dessa forma, usará a conta de demonstração.

Você pode encontrar documentação sobre como configurar o widget aqui.

Todas as versões do widget FastComments são wrappers em torno da biblioteca principal VanillaJS. Isso nos permite adicionar recursos e corrigir problemas em um só lugar - e as mudanças se propagam automaticamente para as outras variantes do widget de comentários.

Angular

Você pode encontrar nossa biblioteca Angular no NPM aqui.

O widget de comentários FastComments para Angular suporta todos os mesmos recursos da versão VanillaJS - comentários ao vivo, SSO e mais.

Você precisará do fastcomments-typescript, que é uma dependência peer. Por favor, certifique-se de que esteja incluído na sua compilação TypeScript. No futuro, essa dependência peer será movida para @types/fastcomments, o que simplificará esta instalação.

FastComments Angular via NPM

Copy

  npm install fastcomments-typescript --save
  npm install ngx-fastcomments --save

A dependência peer deve ser adicionada no seu arquivo tsconfig.json, por exemplo:

Adding fastcomments-typescript peer dependency

Copy

"include": [
  "src/**/*.ts",
  "node_modules/fastcomments-typescript/src/index.ts"
],

Então, adicione o FastCommentsModule à sua aplicação:

Add The Module to Your App

Copy

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FastCommentsModule } from 'ngx-fastcomments';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FastCommentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Uso

Para começar, passamos um objeto de configuração para o tenant de demonstração:

Usage - Inline Configuration

Copy

<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>

Como a configuração pode ficar bem complicada, podemos passar uma referência de objeto:

Usage - Pass Object for Configuration

Copy

<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>

Usage - EU

Copy

<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>

O widget usa detecção de mudanças, então alterar qualquer propriedade do objeto de configuração fará com que ele seja recarregado.

Você pode encontrar a configuração que o componente Angular suporta aqui.

React

Você pode encontrar nossa biblioteca React no NPM aqui.

O widget de comentários FastComments para React suporta todos os mesmos recursos da versão VanillaJS - comentários ao vivo, SSO e mais.

FastComments React via NPM

Copy

npm install --save fastcomments-react

FastComments React via Yarn

Copy

yarn add fastcomments-react

React Example

Copy

import React, { Component } from 'react'
import {FastCommentsCommentWidget} from 'fastcomments-react'
class Example extends Component {
  render() {
    return <FastCommentsCommentWidget tenantId="demo" />
  }
}

Se você está na UE, você vai querer definir o parâmetro region assim:

React Example - EU

Copy

    <FastCommentsCommentWidget tenantId="demo" region="eu" />

Você pode encontrar a configuração que o componente React suporta aqui.

React Native

Você pode encontrar nossa biblioteca React Native no NPM aqui.

O widget de comentários FastComments para React Native suporta todos os mesmos recursos da versão VanillaJS - comentários ao vivo, SSO e mais.

FastComments React Native via NPM

Copy

npm install --save fastcomments-react-native

FastComments React Native via Yarn

Copy

yarn add fastcomments-react-native

A configuração é especificada de forma ligeiramente diferente em comparação com a biblioteca fastcomments-react:

React Native Example

Copy

import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
  const tenantId = 'demo'; // Your tenant id. Can be fetched from https://fastcomments.com/auth/my-account/api-secret
  const pageId = 'native-test'; // the ID or URL of the comment thread in your app.
  const config = {
    tenantId: tenantId,
    urlId: pageId
  };
  return (
      <FastCommentsCommentWidget config={config}/>
  );

Se você está na UE, você vai querer definir o parâmetro region:

React Native - EU

Copy

  // ...
  const config = {
    tenantId: tenantId,
    urlId: pageId,
    region: 'eu'
  };
  // ...

Você pode encontrar a configuração que o componente React Native suporta aqui.

Vue

Você pode encontrar nossa biblioteca Vue no NPM aqui.

Adicionalmente, uma biblioteca vue-next está disponível no NPM aqui

O código fonte pode ser encontrado no GitHub.

O widget de comentários FastComments para Vue suporta todos os mesmos recursos da versão VanillaJS - comentários ao vivo, SSO e mais.

As instruções abaixo são para Vue 3, pois já está disponível há algum tempo, no entanto FastComments também suporta Vue 2 através da biblioteca fastcomments-vue.

FastComments Vue via NPM

Copy

npm install --save fastcomments-vue-next

FastComments Vue via Yarn

Copy

yarn add fastcomments-vue-next

Vue Example

Copy

<template>
  <img alt="Vue logo" src="./assets/logo.png">
    <fast-comments v-bind:config="{tenantId: 'demo'}"/>
</template>
<script>
import {FastComments} from 'fastcomments-vue-next';
export default {
  name: 'App',
  components: {
    FastComments
  }
}
</script>

Se você está na UE, você vai querer definir a region para EU:

FastComments Vue - EU

Copy

<fast-comments v-bind:config="{tenantId: 'demo', region: 'eu'}"/>

As bibliotecas fastcomments-vue e fastcomments-vue-next suportam a mesma configuração que o widget de comentários VanillaJS.

Você pode encontrar a configuração que o componente Vue suporta aqui.

TypeScript

As definições TypeScript para FastComments, que incluem tipos para toda configuração passada ao widget de comentários, podem ser encontradas no NPM aqui.

Você pode encontrá-las no GitHub aqui.

Múltiplas instâncias na mesma página

Cada instância do widget de comentários é isolada. Por isso, FastComments suporta nativamente mais de uma instância por página, ou múltiplas instâncias apontando para a mesma thread de chat.

No caso da biblioteca VanillaJS, por exemplo, você simplesmente precisa vincular o widget de comentários a diferentes nós DOM. Se você quer simplesmente atualizar a thread atual na página, veja Trocar Threads de Comentários Sem Recarregar a Página;

Sincronizando Estado de Autenticação Entre Múltiplas Instâncias

Vamos analisar o exemplo de uma aplicação single-page personalizada que é uma lista de perguntas frequentes com sua própria thread de comentários.

Neste caso, temos múltiplas instâncias de FastComments no DOM ao mesmo tempo.

Isso é ok, mas apresenta alguns desafios para a experiência do usuário.

Considere este fluxo:

O usuário visita a página com uma lista de perguntas, cada uma com seu próprio widget de comentários.
O usuário insere seu nome de usuário e email e deixa uma pergunta em uma das threads.
Ele vê outro item de FAQ sobre o qual tem uma pergunta.
Ele vai comentar novamente. Ele precisa inserir seu email e nome de usuário novamente?

Neste caso, FastComments cuida da sincronização do estado de autenticação entre instâncias do widget para você. No passo quatro, o usuário já estará temporariamente autenticado já que inseriu seu nome de usuário e email na mesma página.

Casos de uso comuns

Mostrando Comentários ao Vivo Imediatamente

O widget de comentários é ao vivo por padrão, no entanto comentários ao vivo aparecem sob um botão "Mostrar N Novos Comentários" para evitar que o conteúdo da página se mova.

Em alguns casos, ainda é desejável mostrar os novos comentários imediatamente, sem ter que clicar em um botão.

Neste caso, você vai querer habilitar a flag showLiveRightAway, cuja documentação você pode encontrar aqui.

Permitindo Comentários Anônimos (Não Exigindo Email)

Por padrão, FastComments exige que o usuário deixe um email quando comenta.

Isso pode ser desabilitado, instruções estão aqui.

Estilo Personalizado

Muitos de nossos clientes aplicam seu próprio estilo ao widget de comentários. Você pode encontrar a documentação aqui.

Mostrando os Mesmos Comentários em Múltiplos Domínios

Mostrar os mesmos comentários em múltiplos sites é algo que FastComments suporta nativamente. Veja nossa documentação sobre este assunto.

Mudando a Página Atual

FastComments suporta SPAs e aplicações complexas. Mudar a página atual é fácil e é coberto aqui.

Depuração de problemas comuns

Aqui estão alguns sintomas que encontramos frequentemente e soluções comuns.

Mensagem "This is a demo"

Isso é mostrado quando você copiou o código do widget da nossa página inicial, que usa nosso tenant de demonstração. Para usar seu tenant, copie o código do widget de aqui.

Erro "FastComments cannot load on this domain"

FastComments precisa saber quais domínios pertencem a você para autenticar requisições associadas à sua conta. Confira nossa documentação para ver como resolver este erro (simplesmente adicione o subdomínio exato + domínio à sua conta).

Note que isso só deve ocorrer após o período de teste terminar. Durante o período de teste, quaisquer requisições de novos domínios serão automaticamente adicionadas à sua conta.

Comentários Migrados Não Aparecem para Instalações Personalizadas

Geralmente isso acontece quando os comentários importados estão vinculados a um Page ID, e você está passando uma URL (ou nenhum valor, neste caso usa por padrão a URL da página).

Você pode depurar isso exportando seus comentários e visualizando a coluna URL ID (atualmente Coluna B).

Certifique-se de que os valores que você vê na coluna URL ID são os mesmos valores que você está passando para a configuração do widget como parâmetro urlId.

Para mais explicações, tente ler nossa documentação sobre Como Comentários são Vinculados a Páginas e Artigos.

Se tudo mais falhar, entre em contato conosco.

Se o widget de comentários não está aparecendo, verifique o console de desenvolvedor do Chrome por erros.

Para a maioria das configurações incorretas, o widget de comentários pelo menos mostrará um erro na página se conseguir carregar. Não ver nada geralmente é uma indicação de um erro de script.

Configuração Desejada Não Funciona Como Esperado

Experimente nossa extensão Chrome para ver qual configuração o widget de comentários está recebendo. Se tudo falhar, tire um screenshot do que a extensão Chrome mostra e entre em contato conosco.

Comentários Faltando na Mesma URL com Hash Bang Diferente

Por padrão, FastComments usará a URL da página para o "bucket" onde os comentários são armazenados. Se suas URLs incluem #hashbangs, e estes #hashbangs não devem fazer parte do identificador que identifica uma thread de comentários, podemos simplesmente ignorar o valor do hash bang, por exemplo:

Ignore Hash Bangs Example

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.FastCommentsUI(document.getElementById('fastcomments-widget'), {
    tenantId: "demo",
    url: location.href.replace(location.hash, ''),
    urlId: location.href.replace(location.hash, '')
});
</script>

Note que após fazer esta mudança, uma migração terá que ser realizada para comentários existentes. Para isso, entre em contato conosco.

Por padrão, FastComments usará a URL da página para o "bucket" onde os comentários são armazenados. Se suas URLs incluem parâmetros de query que não devem fazer parte do identificador que identifica uma thread de comentários, podemos simplesmente ignorá-los, por exemplo:

Ignore Query Parameters

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.FastCommentsUI(document.getElementById('fastcomments-widget'), {
    tenantId: "demo",
    url: location.protocol + '//' + location.host + location.pathname,
    urlId: location.pathname
});
</script>

Note que após fazer esta mudança, uma migração terá que ser realizada para comentários existentes. Para isso, entre em contato conosco.

Não Recebendo Emails

No FastComments, colocamos muito trabalho para garantir que nossa entrega de emails seja o mais confiável possível. No entanto, alguns provedores de email são notoriamente difíceis de alcançar de forma confiável. Verifique sua pasta de spam por mensagens de fastcomments.com.

Se você entrar em contato conosco geralmente podemos fornecer mais informações sobre por que você pode não estar vendo emails nossos.

Notion e Google Sites

Quer adicionar comentários às suas páginas do Notion? Nós temos a solução.

Notion

Para adicionar comentários a documentos do Notion, veja o vídeo explicativo aqui.

Google Sites

Google Sites também é suportado, e o fluxo é similar.

Crie uma conversa para incorporar.
Ao editar seu Google Site, navegue até Inserir -> Incorporar. Selecione Por URL.
Cole a URL do Passo 1.
Clique em Inserir. Pronto!

Nota: Comentários Não Aparecerão Até Publicar

Nimbus Note

Adicionar comentários ao vivo a uma Nimbus Note também é suportado, e o fluxo é similar ao Notion.

Crie uma conversa para incorporar.
Ao editar sua nota, adicione um bloco de incorporação.
Use a URL do Passo 1 como a URL para incorporar.
Pronto!

Próximo Guia

Plugins de terceiros

Instalações personalizadas

Incorporação em documentos

Instalação

WordPress

VanillaJS / Trecho HTML

Angular

Uso

React

React Native

Vue

TypeScript

Múltiplas instâncias na mesma página

Sincronizando Estado de Autenticação Entre Múltiplas Instâncias

Casos de uso comuns

Mostrando Comentários ao Vivo Imediatamente

Permitindo Comentários Anônimos (Não Exigindo Email)

Estilo Personalizado

Mostrando os Mesmos Comentários em Múltiplos Domínios

Mudando a Página Atual

Depuração de problemas comuns

Mensagem "This is a demo"

Erro "FastComments cannot load on this domain"

Comentários Migrados Não Aparecem para Instalações Personalizadas

Widget de Comentários Não Aparece

Configuração Desejada Não Funciona Como Esperado

Comentários Faltando na Mesma URL com Hash Bang Diferente

Parâmetros de Query da URL Afetando o Widget

Não Recebendo Emails

Notion e Google Sites

Notion

Google Sites

Nimbus Note

Idioma 🇧🇷 Português (Brasil)

Plugins de terceiros

Instalações personalizadas

Incorporação em documentos

Instalação

WordPress

VanillaJS / Trecho HTML

Angular

Uso

React

React Native

Vue

TypeScript

Múltiplas instâncias na mesma página

Sincronizando Estado de Autenticação Entre Múltiplas Instâncias

Casos de uso comuns

Mostrando Comentários ao Vivo Imediatamente

Permitindo Comentários Anônimos (Não Exigindo Email)

Estilo Personalizado

Mostrando os Mesmos Comentários em Múltiplos Domínios

Mudando a Página Atual

Depuração de problemas comuns

Mensagem "This is a demo"

Erro "FastComments cannot load on this domain"

Comentários Migrados Não Aparecem para Instalações Personalizadas

Widget de Comentários Não Aparece

Configuração Desejada Não Funciona Como Esperado

Comentários Faltando na Mesma URL com Hash Bang Diferente

Parâmetros de Query da URL Afetando o Widget

Não Recebendo Emails

Notion e Google Sites

Notion

Google Sites

Nimbus Note