Add Comments to Your Astro Site
Astro ships zero JS by default — DropComments loads only when needed. Drop a script tag into your blog post layout and you're done. No framework integration required.
How to add comments to Astro
Step 1: Create a free DropComments account
Sign up at dropcomments.net and register your domain. You'll get a unique Site ID.
Step 2: Add the embed snippet to your blog post layout
Open your blog post layout file (e.g. src/layouts/BlogPost.astro) and add the snippet below your content slot:
src/layouts/BlogPost.astro
<!-- Blog content renders here -->
<slot />
<!-- DropComments widget -->
<div id="dropcomments"></div>
<script
src="https://dropcomments.net/embed.js"
data-site-id="your-site-uuid"
is:inline
></script>
<slot />
<!-- DropComments widget -->
<div id="dropcomments"></div>
<script
src="https://dropcomments.net/embed.js"
data-site-id="your-site-uuid"
is:inline
></script>
Step 3: Build and deploy
Run astro build and deploy. Comments appear on all blog posts automatically.
Use is:inline in Astro
Adding is:inline to the script tag tells Astro to leave it as-is without bundling. This is the recommended approach for DropComments in Astro.
Why Astro developers choose DropComments
- No framework dependencies — works with React, Vue, Svelte, or vanilla Astro
- Compatible with Astro's static output and SSR modes
- Loads asynchronously — respects Astro's performance-first philosophy
- No ads, no tracking — free forever