Add comments to a custom HTML site

You do not need a backend for this

A hand-coded HTML site is the simplest thing on the web: files on a server, no database, no build step. That simplicity is a feature, and it is exactly why bolting on comments has traditionally been a pain. Comments need somewhere to store data and something to handle submissions, which is the one thing a static HTML site does not have. Gabden solves that by handling the storage and submission for you. Your page stays static. The comment section lives inside a small embed that talks to Gabden's servers.

The embed

Adding comments is two lines of HTML. Drop this where you want the comment section to appear, usually near the bottom of the page or after the article:

<div id='gabden-conversations'></div>
<script async src='https://YOUR-SITE.gabden.com/conversations.js'
  data-page='canonical'
  data-theme='auto'></script>

The div is where the comment section renders. The script loads Gabden and fills that div. The async attribute means the script does not block your page while it loads. That is the whole installation.

Getting your Gabden subdomain

Replace YOUR-SITE with the key for your website. You copy it from your Gabden dashboard after you create a free account and add your site. The key tells Gabden which site the comments belong to, so keep it consistent across your pages.

How each page gets its own thread

You might wonder how comments on your "about" page stay separate from comments on a blog post when you paste the same snippet on both. Gabden keys each discussion thread to the page's canonical URL. Every distinct URL gets its own thread automatically. You paste the identical two lines on every page, and each page keeps its own conversation without any per-page configuration.

If your pages set a canonical link tag, Gabden uses it. That matters if the same content is reachable at more than one address, for example with and without a trailing slash. Point the canonical at the address you want to be the real one, and the thread follows it.

A minimal example

Here is where the snippet sits in a normal HTML article:

<article>
  <h1>My post</h1>
  <p>The article text goes here.</p>
</article>

<section>
  <h2>Comments</h2>
  <div id='gabden-conversations'></div>
  <script async src='https://YOUR-SITE.gabden.com/conversations.js'
  data-page='canonical'
  data-theme='auto'></script>
</section>

No database connection, no server code, no form handling. The comment section, replies, reactions, and moderation all run through Gabden.

What you get without extra work

• Threaded replies and reactions (like and heart) built in.
• Readers can post anonymously, as a guest with a name and email, or signed in with Google or GitHub. No forced account.
• Moderation from your dashboard: pre-moderate everything, auto-approve, auto-approve returning verified people, or moderate only anonymous users, plus a blocked-word filter and a spam queue.
• Light and dark themes with presets, so the section fits your site.
• Per-page control to turn comments off on specific URLs when you do not want them.

Performance notes

The embed is about 10KB and loads asynchronously, so it does not hold up your page render. On a hand-coded site where you have already kept things lean, that matters, because a heavy comment script would undo the speed you worked for. Gabden does not add tracking cookies, does not fingerprint, and does not do cross-site tracking, so the two lines you paste do not turn your simple site into something that surveils its readers.

Where to start

Create an account, add your site, copy the key, and paste the two lines into your template. If your HTML pages share a common footer include, put the snippet there once and every page gets comments at the same time. For a version of this that covers any platform, see add comments to any website, or read the docs for the finer configuration options.