Add comments to an Astro site

1. Create a component

<div data-disfora-comments></div>
<script is:inline src="https://disfora.com/public/disfora.js" async></script>

is:inline tells Astro to output the tag as written. Without it, Astro tries to process the script as part of your own code.

2. Add it to your post layout

Use the component in the layout that renders a post. In the official blog template that's src/layouts/BlogPost.astro, and the post body is its <slot />:

---
import Comments from '../components/Comments.astro';
// …the layout's other imports and props
---
<article>
  <h1>{title}</h1>
  <slot />
</article>
<Comments />

Only pages that use this layout get comments. Add <div data-disfora-ratings></div> to the component for a star rating as well.

Sites using the client router

With <ClientRouter /> from astro:transitions, Astro swaps in the next page's <body> and runs its inline scripts again. Disfora keeps one copy of itself running, finds the new container and loads that post's comments. You don't need transition:persist or data-astro-rerun.

Check it on your site

Disfora only loads on the domain in your project, so localhost:4321 won't show it. Deploy, then verify your domain if you haven't yet, and open a post on your live site.

Ask a question

Something missing or unclear? Ask here and we'll answer in the thread.