You can find our WordPress plugin here.

A complete installation guide and docs around the plugin are here.

This plugin supports live commenting, SSO, and no-code installation. Simply follow the installation guide in the admin page after installing the plugin. It will guide you through connecting your WordPress installation to your account.

Any comments left with FastComments through our WordPress plugin can be automatically synced back to your WordPress install so that you retain control over your data. This can be turned off to limit the size of your WordPress database.

The VanillaJS version of the widget is very easy to install, not requiring any build systems or server side code.

Simply add the following code snippet to any page:

Simple Code Snippet

Copy Run

1

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

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

4<script>

5FastCommentsUI(document.getElementById('fastcomments-widget'), {

6 "tenantId": "demo"

7});

8</script>

9

You can use the same code snippet on many pages; it will automatically create a separate thread per page.

Many applications have an "HTML Embed Code" option. Select that and paste the code snippet above in.

You also don't need an account to try it! You might see "tenantId: demo" in the above snippet if you're not logged in. This way it will use the demo account.

You can find documentation on configuring the widget here.

All versions of the FastComments widget are wrappers around the core VanillaJS library. This allows us to add features and fix issues in one place - and the changes automatically propagate to the other variants of the commenting widget.

You can find our Angular library on NPM here.

The FastComments Angular commenting widget supports all of the same features of the VanillaJS one - live commenting, sso, and so on.

You will need fastcomments-typescript, which is a peer dependency. Please ensure this is included in your TypeScript compilation. In the future, this peer dependency will be moved to @types/fastcomments which will simplify this installation.

FastComments Angular via NPM

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

The peer dependency should be added in your tsconfig.json file, for example:

Adding fastcomments-typescript peer dependency

Copy

1

2"include": [

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

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

5],

6

Then, add the FastCommentsModule to your application:

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

Usage

To get started, we pass a config object for the demo tenant:

Usage - Inline Configuration

Copy

1

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

3

Since the configuration can get quite complicated, we can pass in an object reference:

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

The widget uses change detection, so changing any properties of the configuration object will cause it to be reloaded.

You can find the configuration the Angular component supports here.

You can find our React library on NPM here.

The FastComments React commenting widget supports all of the same features of the VanillaJS one - live commenting, sso, and so on.

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

If you're in the EU, you'll want to set the region parameter like so:

React Example - EU

Copy

1

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

3

You can find the configuration the React component supports here.

You can find our Vue library on NPM here.

Additionally, a vue-next library is on NPM here

The source code can be found on GitHub.

The FastComments Vue commenting widget supports all of the same features of the VanillaJS one - live commenting, sso, and so on.

The below instructions are for Vue 3 since it has been out for some time, however FastComments also supports Vue 2 via the fastcomments-vue library.

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

If you're in the EU, you'll want to set the region to EU:

FastComments Vue - EU

Copy

1

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

3

The fastcomments-vue and fastcomments-vue-next libraries support the same configuration as the VanillaJS commenting widget.

You can find the configuration the Vue component supports here.

The TypeScript definitions for FastComments, which include types for all configuration passed to the commenting widget, can be found on NPM here.

You can find it on GitHub here.

Each instance of the comment widget is isolated. Because of this, FastComments inherently supports more than one instance per page, or multiple instances pointing to the same chat thread.

In the case of the VanillaJS library for example, you simply have to tie the comment widget to different DOM nodes. If you want to simply update the current thread on the page, see Switching Comment Threads Without Reloading The Page;

Syncing Authentication State Across Multiple Instances

Let's go over the example of a custom single-page-application that is a list of frequently asked questions with their own comment thread.

In this case, we have multiple instances of FastComments in the DOM at once.

This is fine, but it poses some challenges for user experience.

Consider this flow:

1. The user visits the page with a list of questions, each with their own comment widget.
2. The user enters their username and email and leaves a question on one of the threads.
3. They see another FAQ item they have a question about.
4. They go to comment again. Do they have to enter their email and username again?

In this case, FastComments handles syncing the authentication state across widget instances for you. In step four, the user will already be temporarily authenticated since they entered their username and email on the same page.

Showing Live Comments Right Away

The comment widget is live by default, however live comments appear under a "Show N New Comments" button to prevent the page content from moving around.

In some cases, it's still desirable to show the new comments right away, without having to click a button.

In this case, you want to enable the showLiveRightAway flag, which you can find documentation for here.

Allowing Anonymous Commenting (Not Requiring Email)

By default, FastComments requires the user to leave an email when they comment.

This can be disabled, instructions are here.

Custom Styling

Many of our customers apply their own styling to the comment widget. You can find the documentation here.

Showing The Same Comments on Multiple Domains

Showing the same comments on multiple sites is something FastComments supports out of the box. See our documentation on this subject.

Changing The Current Page

FastComments supports SPAs and complex applications. Changing the current page is easy, and covered here.