Add Comments To a Website

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.

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

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5window.fcConfigs = [{

6 "tenantId": "demo"

7}];

8</script>

9

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.

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

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

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

Adding fastcomments-typescript peer dependency

Copy

1

2"include": [

3 "src/**/*.ts",

4 "node_modules/fastcomments-typescript/src/index.ts"

5],

6

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

Add The Module to Your App

Copy

1

2import { BrowserModule } from '@angular/platform-browser';

3import { NgModule } from '@angular/core';

4

5import { AppComponent } from './app.component';

6import { FastCommentsModule } from 'ngx-fastcomments';

7

8@NgModule({

9 declarations: [

10 AppComponent

11 ],

12 imports: [

13 BrowserModule,

14 FastCommentsModule

15 ],

16 providers: [],

17 bootstrap: [AppComponent]

18})

19export class AppModule { }

20

Uso

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

Usage - Inline Configuration

Copy

1

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

3

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

Usage - Pass Object for Configuration

Copy

1

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

3

Usage - EU

Copy

1

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

3

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.

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

1

2npm install --save fastcomments-react

3

FastComments React via Yarn

Copy

1

2yarn add fastcomments-react

3

React Example

Copy

1

2import React, { Component } from 'react'

3

4import {FastCommentsCommentWidget} from 'fastcomments-react'

5

6class Example extends Component {

7 render() {

8 return <FastCommentsCommentWidget tenantId="demo" />

9 }

10}

11

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

React Example - EU

Copy

1

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

3

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

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

1

2npm install --save fastcomments-vue-next

3

FastComments Vue via Yarn

Copy

1

2yarn add fastcomments-vue-next

3

Vue Example

Copy

1

2<template>

3 <img alt="Vue logo" src="./assets/logo.png">

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

5</template>

6

7<script>

8import {FastComments} from 'fastcomments-vue-next';

9

10export default {

11 name: 'App',

12 components: {

13 FastComments

14 }

15}

16</script>

17

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

FastComments Vue - EU

Copy

1

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

3

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.

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.

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:

1. O usuário visita a página com uma lista de perguntas, cada uma com seu próprio widget de comentários.
2. O usuário insere seu nome de usuário e email e deixa uma pergunta em uma das threads.
3. Ele vê outro item de FAQ sobre o qual tem uma pergunta.
4. 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.

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.