How to add comments to Gatsby
What is Gatsby?
Gatsby is a React-based static site generator with GraphQL data layer. Whether you're building a marketing site, blog or documentation, Gatsby handles the heavy lifting of converting your content into clean, performant HTML.
Why add comments to your Gatsby site?
Adding comments brings your blog to life by letting readers discuss your posts. Comments show your content resonates with real people. They improve SEO with fresh user-generated content and help you learn what your audience wants.
Chirp Form gives you a simple solution that works perfectly with Gatsby's static architecture while respecting visitor privacy with EU hosting and GDPR compliance.
How Chirp Form works with Gatsby
Chirp Form uses two elements: <chirp-form> for submitting comments and <chirp-feed> to display them. Chirp Form handles everything behind the scenes. It stores submissions, filters spam and sends email notifications while your Gatsby site stays completely static. Submissions are identified through privacy-friendly cryptographic hashing rather than storing IP addresses or personal data directly.
Installation steps
Step 1: Add the Chirp Form script
Add the Chirp Form script to your Gatsby layout file. For most sites this goes in src/components/layout.js in the <head> section:
<head>
<!-- Your existing head content -->
<script defer src="https://embed.chirpform.com/latest/chirpform.umd.js"></script>
</head>
The defer attribute ensures the script loads without blocking your page content.
Step 2: Add to your post layout
Add both Chirp elements to src/templates/blog-post.js after your post content:
export default function BlogPost({ data }) {
const post = data.markdownRemark
return (
<Layout>
<article>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
{/* Chirp Comments */}
<section className="comments">
<h2>Comments</h2>
<chirp-form form-id="YOUR_FORM_ID"></chirp-form>
<chirp-feed form-id="YOUR_FORM_ID" filter-url="current"></chirp-feed>
</section>
</Layout>
)
}
The filter-url="current" ensures comments are unique to each post. Replace YOUR_FORM_ID with your actual form ID from your Chirp Form dashboard.
Step 3: Configure your form (optional)
You can fully customize your form fields through your Chirp Form dashboard. The form automatically fetches your configuration and renders everything you've set up.
For styling, you can fully customize the appearance using standard CSS. Check the styling documentation for detailed customization options.