Add Comments To a Website

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.

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

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

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

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

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

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

1

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

3

Usage - EU

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.

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

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

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

React Example - EU

Copy

1

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

3

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

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

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

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

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

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