Add Comments to Your Eleventy (11ty) Site

To see every shortcode and flow running locally against the public demo tenant, clone the repo and run:

cd example
npm install
npm start

Each component has its own page under example/src/pages/ that you can copy straight into your own Eleventy site.

npm install fastcomments-11ty

Register the plugin in your Eleventy config (.eleventy.js or eleventy.config.js):

const { fastcommentsPlugin } = require('fastcomments-11ty');

module.exports = function(eleventyConfig) {
    eleventyConfig.addPlugin(fastcommentsPlugin);
};

Or with ESM:

import { fastcommentsPlugin } from 'fastcomments-11ty';

export default function(eleventyConfig) {
    eleventyConfig.addPlugin(fastcommentsPlugin);
}

Then use the shortcodes in your templates. In Nunjucks (.njk):

{% fastcomments { tenantId: "demo" } %}

In Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Replace "demo" with your FastComments tenant ID.

Examples

{# Comment count inline with text #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Live chat #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Collab chat — target a content element by CSS selector #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Image chat — target an image element by CSS selector #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Reviews summary #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# User activity feed #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Only register a subset of the shortcodes:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Add a prefix to every registered shortcode name (e.g. "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Each shortcode is also exported as a standalone function that returns the HTML string:

const { fastcomments, commentCount } = require('fastcomments-11ty');

eleventyConfig.addShortcode('comments', fastcomments);
eleventyConfig.addShortcode('commentCount', commentCount);

A working demo is included in the example/ directory:

cd example && npm install && npm start

• FastComments Documentation
• Customization & Configuration
• Eleventy Documentation

These components are wrappers around our core VanillaJS components. We can automatically update these components (fix bugs, add features) without publishing this library, so while it may not be published for a while that does not mean FastComments is not under active development! Feel free to check our blog for updates. Breaking API changes or features will never be shipped to the underlying core library without a version bump in this library.