Add Comments To a Website

Om reacties aan uw WordPress-site toe te voegen, kunt u onze WordPress-plug-in hier vinden.

Een volledige installatiegids en documentatie over de plugin vindt u hier.

Deze plug-in ondersteunt live reacties, SSO en installatie zonder code. Volg simpelweg de installatiegids op de adminpagina nadat u de plug-in hebt geïnstalleerd. Het begeleidt u bij het koppelen van uw WordPress-installatie aan uw account.

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

De VanillaJS-versie van de widget is de eenvoudigste manier om opmerkingen aan uw website toe te voegen, er zijn geen buildsystemen of server-side code voor nodig.

Voeg het volgende codefragment eenvoudig toe aan elke pagina om opmerkingen op uw site toe te voegen:

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

U kunt hetzelfde codefragment op meerdere pagina's gebruiken; het maakt automatisch een afzonderlijke thread per pagina aan.

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

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

Documentatie over het configureren van de widget vindt u hier.

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 plaats op te lossen - en de wijzigingen worden automatisch doorgevoerd naar de andere varianten van de commentaarwidget.

Als u reacties wilt toevoegen aan een met Angular gebouwde site, vindt u onze Angular-bibliotheek op NPM hier.

De FastComments Angular-commentaar-widget ondersteunt alle functies van de VanillaJS-versie - live reacties, sso, enzovoort.

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

FastComments Angular via NPM

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

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

Toevoegen van fastcomments-typescript als peer-dependency

Copy

1

2"include": [

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

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

5],

6

Voeg daarna de FastCommentsModule toe aan uw applicatie:

Module toevoegen aan uw 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

Gebruik

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

Gebruik - Inlineconfiguratie

Copy

1

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

3

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

Gebruik - Object doorgeven voor configuratie

Copy

1

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

3

Gebruik - EU

Copy

1

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

3

De widget gebruikt change detection, dus als u eigenschappen van het configuratieobject wijzigt, wordt het opnieuw geladen.

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

Om reacties toe te voegen aan een site die met React is gebouwd, vind je onze React-bibliotheek op NPM hier.

De FastComments React-commentaarwidget ondersteunt alle functies van de VanillaJS-versie - live reacties, sso, enzovoort.

FastComments React via NPM

Copy

1

2npm install --save fastcomments-react

3

FastComments React via Yarn

Copy

1

2yarn add fastcomments-react

3

React-voorbeeld

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 je in de EU bent, wil je de region-parameter als volgt instellen:

React-voorbeeld - EU

Copy

1

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

3

De configuratie die de React-component ondersteunt vind je hier.

Om opmerkingen toe te voegen aan je website die gebouwd is met Vue, kun je onze Vue-bibliotheek op NPM hier vinden.

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

De broncode is te vinden op GitHub.

De FastComments Vue-commentaarwidget ondersteunt alle dezelfde functies als die van VanillaJS - live commentaar, sso, enzovoort.

De onderstaande instructies zijn voor Vue 3 omdat het al een tijdje uit is, maar FastComments ondersteunt ook Vue 2 via de fastcomments-vue-bibliotheek.

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 Voorbeeld

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 je in de EU bent, wil je de region op EU zetten:

FastComments Vue - EU

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-commentaarwidget.

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

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.

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.

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.