Add Comments To a Website

Um Kommentare zu Ihrer WordPress-Seite hinzuzufügen, finden Sie unser WordPress-Plugin hier.

Eine vollständige Installationsanleitung und Dokumentation zum Plugin finden Sie hier.

Dieses Plugin unterstützt Live-Kommentare, SSO und eine No-Code-Installation. Folgen Sie nach der Installation des Plugins einfach der Installationsanleitung auf der Admin-Seite. Diese führt Sie durch das Verbinden Ihrer WordPress-Installation mit Ihrem Konto.

Alle Kommentare, die mit FastComments über unser WordPress-Plugin hinterlassen werden, können automatisch zurück in Ihre WordPress-Installation synchronisiert werden, sodass Sie die Kontrolle über Ihre Daten behalten. Dies kann deaktiviert werden, um die Größe Ihrer WordPress-Datenbank zu begrenzen.

Die VanillaJS-Version des Widgets ist die einfachste Möglichkeit, Kommentare zu Ihrer Website hinzuzufügen, ohne Build-Systeme oder serverseitigen Code zu benötigen.

Fügen Sie einfach den folgenden Codeausschnitt in jede Seite ein, um Kommentare zu Ihrer Website hinzuzufügen:

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

Sie können denselben Codeausschnitt auf mehreren Seiten verwenden; er erstellt automatisch einen separaten Thread pro Seite.

Viele Anwendungen haben eine "HTML Embed Code"-Option. Wählen Sie diese aus und fügen Sie den obigen Codeausschnitt dort ein.

Sie benötigen außerdem kein Konto, um es auszuprobieren! Möglicherweise sehen Sie "tenantId: demo" im obigen Ausschnitt, wenn Sie nicht eingeloggt sind. Auf diese Weise wird das Demo-Konto verwendet.

Die Dokumentation zur Konfiguration des Widgets finden Sie hier.

Alle Versionen des FastComments-Widgets sind Wrapper um die zentrale VanillaJS-Bibliothek. Dadurch können wir Funktionen hinzufügen und Probleme an einer Stelle beheben - und die Änderungen werden automatisch auf die anderen Varianten des Kommentar-Widgets übertragen.

Um Kommentare auf einer mit Angular erstellten Website hinzuzufügen, finden Sie unsere Angular-Bibliothek auf NPM hier.

Das FastComments Angular-Kommentarmodul unterstützt alle dieselben Funktionen wie das VanillaJS-Widget - Live-Kommentare, SSO und so weiter.

Sie benötigen fastcomments-typescript, das als Peer-Abhängigkeit fungiert. Bitte stellen Sie sicher, dass dies in Ihre TypeScript-Kompilierung aufgenommen ist. Zukünftig wird diese Peer-Abhängigkeit zu @types/fastcomments verschoben, was diese Installation vereinfachen wird.

FastComments Angular über NPM

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

Die Peer-Abhängigkeit sollte in Ihrer tsconfig.json-Datei hinzugefügt werden, zum Beispiel:

Hinzufügen der fastcomments-typescript Peer-Abhängigkeit

Copy

1

2"include": [

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

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

5],

6

Fügen Sie dann das FastCommentsModule zu Ihrer Anwendung hinzu:

Modul zu Ihrer App hinzufügen

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

Verwendung

Um zu beginnen, übergeben wir ein Konfigurationsobjekt für den Demo-Tenant:

Verwendung - Inline-Konfiguration

Copy

1

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

3

Da die Konfiguration ziemlich komplex werden kann, können wir eine Objektreferenz übergeben:

Verwendung - Objekt zur Konfiguration übergeben

Copy

1

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

3

Verwendung - EU

Copy

1

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

3

Das Widget verwendet Change Detection, sodass das Ändern von Eigenschaften des Konfigurationsobjekts dazu führt, dass es neu geladen wird.

Die Konfiguration, die die Angular-Komponente unterstützt, finden Sie hier.

Um Kommentare zu einer mit React erstellten Website hinzuzufügen, finden Sie unsere React-Bibliothek auf NPM hier.

Das FastComments React-Kommentierungs-Widget unterstützt alle der gleichen Funktionen des VanillaJS-Widgets - Live-Kommentare, SSO, und so weiter.

FastComments React über NPM

Copy

1

2npm install --save fastcomments-react

3

FastComments React über Yarn

Copy

1

2yarn add fastcomments-react

3

React-Beispiel

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

Wenn Sie sich in der EU befinden, sollten Sie den region-Parameter wie folgt setzen:

React-Beispiel - EU

Copy

1

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

3

Sie finden die Konfiguration, die die React-Komponente unterstützt, hier.

Um Kommentare zu Ihrer mit Vue erstellten Website hinzuzufügen, finden Sie unsere Vue-Bibliothek auf NPM hier.

Außerdem ist eine vue-next-Bibliothek auf NPM hier

Der Quellcode ist auf GitHub zu finden.

Das FastComments Vue-Kommentar-Widget unterstützt alle dieselben Funktionen wie das VanillaJS-Widget - live commenting, sso, und so weiter.

Die untenstehenden Anweisungen gelten für Vue 3, da es bereits seit einiger Zeit verfügbar ist, jedoch unterstützt FastComments auch Vue 2 über die fastcomments-vue-Bibliothek.

FastComments Vue über NPM

Copy

1

2npm install --save fastcomments-vue-next

3

FastComments Vue über Yarn

Copy

1

2yarn add fastcomments-vue-next

3

Vue-Beispiel

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

Wenn Sie sich in der EU befinden, sollten Sie die region auf EU setzen:

FastComments Vue - EU

Copy

1

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

3

Die Bibliotheken fastcomments-vue und fastcomments-vue-next unterstützen dieselbe Konfiguration wie das VanillaJS-Kommentar-Widget.

Die Konfiguration, die die Vue-Komponente unterstützt, finden Sie hier.

Die TypeScript-Definitionen für FastComments, die Typen für alle Konfigurationen des Kommentar-Widgets enthalten, finden Sie auf NPM hier.

Sie finden sie auf GitHub hier.

Jede Instanz des Kommentar-Widgets ist isoliert. Aus diesem Grund unterstützt FastComments von Haus aus mehr als eine Instanz pro Seite oder mehrere Instanzen, die auf denselben Chat-Thread verweisen.

Im Fall der VanillaJS-Bibliothek müssen Sie das Kommentar-Widget einfach an verschiedene DOM-Knoten binden. Wenn Sie einfach den aktuellen Thread auf der Seite aktualisieren möchten, siehe Kommentar-Threads wechseln ohne die Seite neu zu laden;

Synchronisierung des Authentifizierungsstatus über mehrere Instanzen

Betrachten wir das Beispiel einer benutzerdefinierten Single-Page-Anwendung, die eine Liste häufig gestellter Fragen mit eigenem Kommentar-Thread ist.

In diesem Fall haben wir mehrere Instanzen von FastComments gleichzeitig im DOM.

Das ist in Ordnung, aber es stellt einige Herausforderungen für die Benutzererfahrung dar.

Betrachten Sie diesen Ablauf:

1. Der Benutzer besucht die Seite mit einer Liste von Fragen, jede mit ihrem eigenen Kommentar-Widget.
2. Der Benutzer gibt seinen Benutzernamen und seine E-Mail-Adresse ein und hinterlässt eine Frage in einem der Threads.
3. Er sieht ein anderes FAQ-Element, zu dem er eine Frage hat.
4. Er möchte erneut kommentieren. Muss er seine E-Mail-Adresse und seinen Benutzernamen erneut eingeben?

In diesem Fall übernimmt FastComments die Synchronisierung des Authentifizierungsstatus über Widget-Instanzen für Sie. In Schritt vier wird der Benutzer bereits temporär authentifiziert sein, da er seinen Benutzernamen und seine E-Mail-Adresse auf derselben Seite eingegeben hat.

Live-Kommentare sofort anzeigen

Das Kommentar-Widget ist standardmäßig live, jedoch erscheinen Live-Kommentare unter einem "N neue Kommentare anzeigen"-Button, um zu verhindern, dass sich der Seiteninhalt verschiebt.

In einigen Fällen ist es dennoch wünschenswert, die neuen Kommentare sofort anzuzeigen, ohne auf einen Button klicken zu müssen.

In diesem Fall möchten Sie das showLiveRightAway-Flag aktivieren, dessen Dokumentation Sie hier finden.

Anonyme Kommentare erlauben (keine E-Mail erforderlich)

Standardmäßig erfordert FastComments, dass der Benutzer beim Kommentieren eine E-Mail-Adresse hinterlässt.

Dies kann deaktiviert werden, Anweisungen finden Sie hier.

Benutzerdefiniertes Styling

Viele unserer Kunden wenden ihr eigenes Styling auf das Kommentar-Widget an. Die Dokumentation finden Sie hier.

Dieselben Kommentare auf mehreren Domains anzeigen

Das Anzeigen derselben Kommentare auf mehreren Websites ist etwas, das FastComments von Haus aus unterstützt. Siehe unsere Dokumentation zu diesem Thema.

Die aktuelle Seite wechseln

FastComments unterstützt SPAs und komplexe Anwendungen. Das Wechseln der aktuellen Seite ist einfach und wird hier behandelt.