FastComments.com


Installatie

FastComments is ontworpen om op elk type pagina te worden geïnstalleerd - statisch of dynamisch, met een licht of donker thema, openbare of interne pagina's. Het moet eenvoudig te installeren en zich aan te passen aan elk soort site of webgebaseerde applicatie.


WordPress Internal Link

U kunt onze WordPress-plugin hier vinden.

Een complete installatiehandleiding en documentatie over de plugin zijn hier te vinden.

Deze plugin ondersteunt live reacties, SSO en installatie zonder code. Volg simpelweg de installatiehandleiding op de admin-pagina na het installeren van de plugin. Het zal u begeleiden bij het verbinden van uw WordPress-installatie met uw account.

Alle reacties die met FastComments via onze WordPress-plugin worden achtergelaten, kunnen automatisch worden gesynchroniseerd met uw WordPress-installatie, zodat u de controle over uw gegevens behoudt. Dit kan worden uitgeschakeld om de grootte van uw WordPress-database te beperken.

VanillaJS / HTML-fragment Internal Link

De VanillaJS-versie van de widget is zeer eenvoudig te installeren en vereist geen buildsystemen of server-side code.

Voeg simpelweg het volgende codefragment toe aan elke pagina:

Simple Code Snippet
Copy CopyRun External Link
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

U kunt hetzelfde codefragment op veel pagina's gebruiken; het zal automatisch een aparte thread per pagina aanmaken.

Veel applicaties hebben een "HTML Embed Code" optie. Selecteer die en plak het bovenstaande codefragment erin.

U hebt ook geen account nodig om het uit te proberen! U ziet mogelijk "tenantId: demo" in het bovenstaande fragment als u niet bent ingelogd. Op deze manier wordt het demo-account gebruikt.

U kunt documentatie over het configureren van de widget hier vinden.

Alle versies van de FastComments-widget zijn wrappers rond de kern VanillaJS-bibliotheek. Dit stelt ons in staat om functies toe te voegen en problemen op één plek op te lossen - en de wijzigingen worden automatisch doorgevoerd naar de andere varianten van de reactiewidget.

Angular Internal Link

U kunt onze Angular-bibliotheek op NPM hier vinden.

De FastComments Angular reactiewidget ondersteunt alle dezelfde functies als de VanillaJS-versie - live reacties, SSO, enzovoort.

U hebt fastcomments-typescript nodig, wat een peer dependency is. Zorg ervoor dat dit is opgenomen in uw TypeScript-compilatie. In de toekomst zal deze peer dependency worden verplaatst naar @types/fastcomments, wat deze installatie zal vereenvoudigen.

FastComments Angular via NPM
Copy Copy
1
2 npm install fastcomments-typescript --save
3 npm install ngx-fastcomments --save
4

De peer dependency moet worden toegevoegd in uw tsconfig.json-bestand, bijvoorbeeld:

Adding fastcomments-typescript peer dependency
Copy Copy
1
2"include": [
3 "src/**/*.ts",
4 "node_modules/fastcomments-typescript/src/index.ts"
5],
6

Voeg vervolgens de FastCommentsModule toe aan uw applicatie:

Add The Module to Your App
Copy 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

Gebruik

Om te beginnen geven we een configuratieobject door voor de demo-tenant:

Usage - Inline Configuration
Copy Copy
1
2<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>
3

Omdat de configuratie behoorlijk ingewikkeld kan worden, kunnen we een objectreferentie doorgeven:

Usage - Pass Object for Configuration
Copy Copy
1
2<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>
3
Usage - EU
Copy Copy
1
2<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>
3

De widget gebruikt wijzigingsdetectie, dus het wijzigen van eigenschappen van het configuratieobject zal ervoor zorgen dat het opnieuw wordt geladen.

U kunt de configuratie die de Angular-component ondersteunt hier vinden.

React Internal Link

U kunt onze React-bibliotheek op NPM hier vinden.

De FastComments React reactiewidget ondersteunt alle dezelfde functies als de VanillaJS-versie - live reacties, SSO, enzovoort.

FastComments React via NPM
Copy Copy
1
2npm install --save fastcomments-react
3
FastComments React via Yarn
Copy Copy
1
2yarn add fastcomments-react
3
React Example
Copy 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

Als u in de EU bent, wilt u de region-parameter als volgt instellen:

React Example - EU
Copy Copy
1
2 <FastCommentsCommentWidget tenantId="demo" region="eu" />
3

U kunt de configuratie die de React-component ondersteunt hier vinden.

Vue Internal Link

U kunt onze Vue-bibliotheek op NPM hier vinden.

Daarnaast is een vue-next-bibliotheek beschikbaar op NPM hier

De broncode is te vinden op GitHub.

De FastComments Vue reactiewidget ondersteunt alle dezelfde functies als de VanillaJS-versie - live reacties, SSO, enzovoort.

De onderstaande instructies zijn voor Vue 3 aangezien het al enige tijd beschikbaar is, maar FastComments ondersteunt ook Vue 2 via de fastcomments-vue-bibliotheek.

FastComments Vue via NPM
Copy Copy
1
2npm install --save fastcomments-vue-next
3
FastComments Vue via Yarn
Copy Copy
1
2yarn add fastcomments-vue-next
3
Vue Example
Copy 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

Als u in de EU bent, wilt u de region instellen op EU:

FastComments Vue - EU
Copy Copy
1
2<fast-comments v-bind:config="{tenantId: 'demo', region: 'eu'}"/>
3

De fastcomments-vue en fastcomments-vue-next bibliotheken ondersteunen dezelfde configuratie als de VanillaJS reactiewidget.

U kunt de configuratie die de Vue-component ondersteunt hier vinden.

TypeScript Internal Link

De TypeScript-definities voor FastComments, die types bevatten voor alle configuratie die aan de reactiewidget wordt doorgegeven, zijn te vinden op NPM hier.

U kunt ze vinden op GitHub hier.

Meerdere instanties op dezelfde pagina Internal Link

Elke instantie van de reactiewidget is geïsoleerd. Hierdoor ondersteunt FastComments van nature meer dan één instantie per pagina, of meerdere instanties die naar dezelfde chatthread verwijzen.

In het geval van de VanillaJS-bibliotheek hoeft u de reactiewidget simpelweg aan verschillende DOM-knooppunten te koppelen. Als u simpelweg de huidige thread op de pagina wilt bijwerken, zie Reactiethreads Wisselen Zonder de Pagina te Herladen;

Authenticatiestatus Synchroniseren Over Meerdere Instanties

Laten we het voorbeeld bekijken van een aangepaste single-page-applicatie die een lijst is van veelgestelde vragen met hun eigen reactiethread.

In dit geval hebben we meerdere instanties van FastComments tegelijk in de DOM.

Dit is prima, maar het brengt enkele uitdagingen voor de gebruikerservaring met zich mee.

Overweeg deze stroom:

  1. De gebruiker bezoekt de pagina met een lijst vragen, elk met hun eigen reactiewidget.
  2. De gebruiker voert zijn gebruikersnaam en e-mail in en laat een vraag achter op een van de threads.
  3. Hij ziet een ander FAQ-item waarover hij een vraag heeft.
  4. Hij gaat opnieuw reageren. Moet hij zijn e-mail en gebruikersnaam opnieuw invoeren?

In dit geval handelt FastComments het synchroniseren van de authenticatiestatus over widget-instanties voor u af. In stap vier zal de gebruiker al tijdelijk geauthenticeerd zijn omdat hij zijn gebruikersnaam en e-mail op dezelfde pagina heeft ingevoerd.

Veelvoorkomende toepassingen Internal Link

Live Reacties Direct Tonen

De reactiewidget is standaard live, maar live reacties verschijnen onder een "Toon N Nieuwe Reacties" knop om te voorkomen dat de pagina-inhoud verschuift.

In sommige gevallen is het toch wenselijk om de nieuwe reacties direct te tonen, zonder op een knop te hoeven klikken.

In dit geval wilt u de showLiveRightAway vlag inschakelen, waarvan u de documentatie hier kunt vinden.

Anonieme Reacties Toestaan (Geen E-mail Vereisen)

Standaard vereist FastComments dat de gebruiker een e-mail achterlaat wanneer hij reageert.

Dit kan worden uitgeschakeld, instructies zijn hier.

Aangepaste Styling

Veel van onze klanten passen hun eigen styling toe op de reactiewidget. U kunt de documentatie hier vinden.

Dezelfde Reacties Tonen op Meerdere Domeinen

Dezelfde reacties op meerdere sites tonen is iets dat FastComments standaard ondersteunt. Zie onze documentatie over dit onderwerp.

De Huidige Pagina Wijzigen

FastComments ondersteunt SPA's en complexe applicaties. De huidige pagina wijzigen is eenvoudig en wordt hier behandeld.