Eleventy Integration

This guide shows you how to add JamComments to an Eleventy site. Before starting, you’ll need:

• A JamComments account
• A site created in your account
• An API key (get one in your account settings)

Installation

npm install @jam-comments/eleventy

Configuration

Add the plugin to your .eleventy.js file:

const jamComments = require('@jam-comments/eleventy');

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(jamComments, {
    domain: process.env.JAM_COMMENTS_DOMAIN,
    apiKey: process.env.JAM_COMMENTS_API_KEY,
    tz: "America/Chicago" // optional
  });
};

Environment

In development (when NODE_ENV is not “production”), the plugin shows dummy comments and silently accepts submissions without saving them. In production, it fetches real comments and saves submissions.

Set JAM_COMMENTS_ENVIRONMENT to override this behavior.

Usage

Add the jamcomments shortcode to your templates. The path is optional — if not provided, it uses the current page’s URL.

<h1>My Page Title</h1>

<p>Here's some page content.</p>

<!-- Comments form and existing comments render here -->
{% jamcomments path.url %}

Supported Template Engines

• Nunjucks (*.njk)
• Liquid (*.liquid)

Customizing UI Text

Override the default text in your plugin config:

eleventyConfig.addPlugin(jamComments, {
  domain: process.env.JAM_COMMENTS_DOMAIN,
  apiKey: process.env.JAM_COMMENTS_API_KEY,
  copy: {
    commentPlaceholder: "Share your thoughts...",
    submitButton: "Post Comment",
    namePlaceholder: "Your name",
  },
});

Property	Default
confirmationMessage	”Comment successfully submitted!”
submitButton	”Submit”
namePlaceholder	(empty)
emailPlaceholder	(empty)
commentPlaceholder	”Write something in plain text or Markdown…”
writeTab	”Write”
previewTab	”Preview”
authButton	”Log In or Register”
logOutButton	”Log Out”
replyButton	”Reply”
nameLabel	”Name”
emailLabel	”Email”
commentCountLabel	”comment/comments”
replyCountLabel	”reply/replies”

Note: Count labels are automatically pluralized.

Server-Side Structured Data

You can pass a schema object to have JamComments include your comments in the page’s JSON-LD:

{% jamcomments path.url, {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "My Blog Post"
} %}

Important: Don’t render the schema yourself if you use this feature — JamComments will include it for you.

Date Format

Change how dates are displayed (uses PHP date format):

eleventyConfig.addPlugin(jamComments, {
  domain: process.env.JAM_COMMENTS_DOMAIN,
  apiKey: process.env.JAM_COMMENTS_API_KEY,
  dateFormat: "l, F j, Y", // Thursday, October 31, 2024
});

Contributing

Found a bug or have an improvement? Open an issue or pull request on GitHub.