Astro Integration

This guide shows you how to add JamComments to an Astro 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/astro

Basic Setup

Set these environment variables:

Variable	Description
JAM_COMMENTS_DOMAIN	Your site’s domain (without “https://“)
JAM_COMMENTS_API_KEY	Your API key from account settings
JAM_COMMENTS_ENVIRONMENT	”production” or “development” (optional, defaults to NODE_ENV)

For details on setting environment variables in Astro, see their docs.

Usage

Import the component and place it where you want comments to appear:

---
import JamComments from '@jam-comments/astro';
---

<article>
  <!-- Your post content -->
</article>

<JamComments />

That’s it! The component reads your environment variables and handles everything else.

Advanced Configuration

You can also pass options directly to the component instead of using environment variables:

---
import JamComments from '@jam-comments/astro';

// Get the current path from the request
const path = new URL(Astro.request.url).pathname;
---

<JamComments
  path={path}
  apiKey="123ABC"
  domain="your-site.com"
  environment="production"
  tz="America/Chicago"
/>

Speed Up Your Build (Batch Mode)

By default, the plugin fetches comments for each page individually. For better build performance on static sites, enable batch mode in your Astro config:

astro.config.js

import { defineConfig } from "astro/config";
import { jamComments } from "@jam-comments/astro/config";
import "dotenv/config";

export default defineConfig({
  integrations: [
    jamComments({
      domain: process.env.JAM_COMMENTS_DOMAIN,
      apiKey: process.env.JAM_COMMENTS_API_KEY,
      environment: "production", // optional
      timezone: "America/Chicago", // optional
    }),
  ],
});

This fetches all comment data in batches upfront, speeding up your build.

Customizing UI Text

Override the default text in the comment form:

<JamComments
  copy={{
    commentPlaceholder: "Share your thoughts...",
    submitButton: "Post Comment",
    namePlaceholder: "Your name",
  }}
/>

When using batch mode, add copy settings to your config instead:

astro.config.js

jamComments({
  domain: process.env.JAM_COMMENTS_DOMAIN,
  apiKey: process.env.JAM_COMMENTS_API_KEY,
  copy: {
    commentPlaceholder: "Share your thoughts...",
    submitButton: "Post Comment",
  }
}),

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

JamComments can merge your comment data into your page’s JSON-LD schema and render it server-side. This is great for SEO.

---
import JamComments from '@jam-comments/astro';

const postSchema = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "My Post",
  "datePublished": "2024-04-03"
};
---

<JamComments schema={postSchema} />

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

<!-- Thursday, October 31, 2024 -->
<JamComments dateFormat="l, F j, Y" />

Contributing

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