Live Demo

How to use it

1. Install the embed code

On each article (Astro, static HTML, etc.), simply add the container and the script tag:

<div id="keyblogging-comments"></div>
<script 
  src="https://my.keyblogging.com/static/embed.js?blog=YOUR-BLOG-SLUG&post=YOUR-POST-SLUG" 
  async></script>

Replace:

• YOUR-BLOG-SLUG — the slug from the dashboard (e.g. my-blog)
• YOUR-POST-SLUG — the stable post ID (often the page path slug, e.g. hello-world)

Astro example: use blog={blogSlug}&post={post.slug} dynamically from your frontmatter.

2. What visitors see

• Anyone — Can read approved comments (no login required).
• Login with GFAVIP — Clicking login opens a secure popup to https://my.keyblogging.com, allowing them to post and reply.
• Pending comments — Stay hidden from public view until you approve them in the dashboard.

3. Crawlable / SEO Fallback

If you want to ensure bots can crawl the comments as pure HTML, you can link to or prerender the public HTML route:

https://my.keyblogging.com/embed/YOUR-BLOG-SLUG/YOUR-POST-SLUG

4. Optional CSS variables

You can easily theme the comment box to match your site without overriding complex CSS classes:

#keyblogging-comments { 
  --kb-fg: #111; 
  --kb-muted: #6b7280; 
  --kb-border: #e5e7eb; 
  --kb-bg: #fff; 
  --kb-accent: #111; 
  --kb-radius: 8px; 
  --kb-font: system-ui, sans-serif; 
}