FastComments.com

Installation

FastComments is designed to be installed on any kind of page - static or dynamic, light themed or dark, public or internal pages. It should be easy to install and adapt to any kind of site or web based application.

Wordpress Internal Link

You can find our WordPress plugin 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 install to your account.

Any comments left with FastComments through our WordPress plugin will be automatically synced back to your WordPress install so that you retain control over your data.

VanillaJS Internal Link

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.

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:

Installation Example
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5window.FastCommentsUI(document.getElementById('fastcomments-widget'), {
6 "tenantId": "demo"
7});
8</script>
9

You can find documentation on configuring it here.

Angular Internal Link

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 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 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 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 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 Copy
1
2<lib-fastcomments [config]="fastcommentsConfig"></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.

React Internal Link

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

You can find the configuration the React component supports here.

React Native Internal Link

You can find our React Native library on NPM here.

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

FastComments React Native via NPM
Copy Copy
1
2npm install --save fastcomments-react-native
3
FastComments React Native via Yarn
Copy Copy
1
2yarn add fastcomments-react-native
3

The configuration is specified slightly differently compared to the fastcomments-react library:

React Native Example
Copy Copy
1
2import { FastCommentsCommentWidget } from 'fastcomments-react-native';
3
4// ...
5
6 const myTenantId = 'demo'; // Your tenant id. Can be fetched from https://fastcomments.com/auth/my-account/api-secret
7 const myAppPageId = 'native-test'; // the ID or URL of the comment thread in your app.
8 const config = {
9 tenantId: myTenantId,
10 urlId: myAppPageId
11 };
12
13 return (
14 <FastCommentsCommentWidget config={config}/>
15 );
16

You can find the configuration the React Native component supports here.

Vue Internal Link

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

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.

TypeScript Internal Link

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.

Multiple Instances on The Same Page Internal Link

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.

Common Use Cases Internal Link

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.

Debugging Common Issues Internal Link

Here are some symptoms we see encountered frequently, and common solutions.

"This is a demo" Message

This is shown when you've copied the widget code from our home page, which uses our demo tenant. To use your tenant, copy the widget code from here.

"FastComments cannot load on this domain" Error

FastComments needs to know which domains are owned by you to authenticate requests associated with your account. Check out our documentation to see how to resolve this error (simply add the exact subdomain + domain to your account).

Note that this should only occur after the trial period is over. During the trial period, any requests from new domains will automatically be added to your account.

Migrated Comments Not Showing for Custom Installations

Usually this happens when the imported comments are tied to a Page ID, and you are passing a URL (or no value, in which case it defaults to the page URL).

You can debug this by exporting your comments and viewing the URL ID column (currently Column B).

Ensure the values you see in the URL ID column are the same values you are passing to the widget configuration as the urlId parameter.

For further explanation, try reading our How Comments are Tied to Pages and Articles documentation.

If all else fails, reach out to us.

Comment Widget Not Showing

If the comment widget isn't showing, check the Chrome developer console for errors.

For most misconfiguration, the comment widget will at least show an error on the page if it is able to load. Seeing nothing is usually an indication of a scripting error.

Desired Configuration Not Working as Expected

Try our Chrome extension to see what configuration the comment widget is being passed. If all fails, take as screenshot of what the chrome extension says and reach out to us.

Comments Missing on Same URL With Different Hash Bang

By default, FastComments will use the page URL for the "bucket" where comments are stored. If your URLs include #hashbangs, and these #hashbangs should not be part of the identifier that identifies a comment thread, we can simply ignore the hash bang value, for example:

Ignore Hash Bangs Example
Copy Copy
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 url: location.href.replace(location.hash, ''),
8 urlId: location.href.replace(location.hash, '')
9});
10</script>
11

Note that after making this change, a migration will have to be preformed. For that, reach out to us.

Not Receiving Emails

At FastComments, we put a lot of work into ensuring our delivery of emails is as reliable as possible. However, some email providers are notoriously difficult to deliver to reliably. Check your spam folder for messages from fastcomments.com.

If you reach out to us we can usually provide more insight into why you may not be seeing emails from us.

Notion and Google Sites Internal Link

Want to add comments to your Notion pages? We have you covered.

Notion

For adding commenting to Notion docs, see the explanation video here.

Google Sites

Google Sites is also supported, and the flow is similar.

  1. Create a conversation to embed.
  2. When editing your Google Site, navigate to Insert -> Embed. Select By URL.
  3. Paste the URL from Step 1.
  4. Hit Insert. Done!
Note: Comments Will Not Appear Until Publish
FastComments in Google Sites