Gatsby Integration

These instructions assume you've already created a JamComments account as well as a "site" within that account. If you haven't, learn more about that process on the Getting Started page.

Installation & Configuration

Install the plugin by running npm install @jam-comments/gatsby or yarn add @jam-comments/gatsby. After doing so, configure it by adding the following to your gatsby-config.js.

In your deployed site, it's strongly recommended to store the values in environment variables.
module.exports = {
// ... other configuration stuff
plugins: [
// ...other plugins
resolve: '@jam-comments/gatsby',
options: {
api_key: process.env.JAM_COMMENTS_API_KEY,
domain: process.env.JAM_COMMENTS_DOMAIN


Embedding Comments

To include a comment form and existing comments on your blog posts, you'll need to place the following component on your page component(s), along with the required pageContext, apiKey, and domain props.

import React from "react";
import JamComments from "@jam-comments/gatsby/ui";

const MyPost = (props) => {
return (


export default MyPost;

Component Props


Also provided by Gatsby, the pageContext object holds any comment data that's already been submitted, which will then be rendered on the page when it's built.


You API key for the site generated in the JamComments dashboard. It'll be the same value used in your gatsby-config.js file, so you should probably store it in the same environment variable for easy sharing.


The domain for your blog.

Querying for Data

If needed, you can query available comments by using the following type of query:

allJamComment(limit: 10) {
edges {
node {


The source for this plugin is open to contributions. If you have a bug fix or idea for improvement, leave a pull request or issue in the GitHub repository.