Guides

Add an embeddable comment section with HTML

The simplest embeddable comment section is one div and one script. Here is how it works on any HTML page.

Add an embeddable comment section with HTML

The simplest possible comment section

You do not need a plugin, a framework, or a database to put comments on a page. If you can edit HTML, you can add a working comment section with two lines. The container div marks where the thread should appear, and the script loads the widget that fills it in.

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

That is the whole embed. Paste it where you want the comments, usually at the bottom of your article, replace YOUR-SITE with your own key from the dashboard, and load the page. A thread appears, ready for replies.

How the pieces work

The div

The <div id='gabden-conversations'> is an empty placeholder. It has no content of its own; it just tells the script where to render. You can style the area around it however you like, but you do not need to put anything inside it.

The script

The <script async> tag loads the widget. The async attribute means the browser keeps rendering your page while the script loads in the background, so your content is not held up. The subdomain in the script URL (the YOUR-SITE part) is your Gabden site, which tells Gabden which account and settings this page belongs to. You copy that key from the dashboard after you create a free account.

The URL becomes the thread

You do not assign an ID to each thread. Gabden keys the discussion to the page's canonical URL. Put the same embed on ten different pages and you get ten separate threads automatically. Put it on one page reachable at one URL and every visitor sees the same conversation. This is what makes the embed truly copy-and-paste: the same two lines work everywhere.

A note on canonical URLs

Because the thread follows the canonical URL, it is worth making sure each page has a clean, stable one. If the same content is reachable at two addresses (with and without a trailing slash, or with tracking parameters), a <link rel='canonical'> tag pointing at the preferred address keeps all the comments on one thread instead of splitting them. Most sites already set this for SEO, so there is usually nothing to change.

What you get out of two lines

The embed is small, about 10KB, but the feature set behind it is not. You get threaded replies, reactions (like and heart), and reader identity options: anonymous, guest with a name and email, or sign-in with Google or GitHub. On the moderation side you choose how strict to be, from pre-moderating everything to auto-approving returning verified people, with a blocked-word filter and a spam queue behind it. Light and dark themes with presets let the widget match your page.

Turning comments off on some pages

You might want the embed on your articles but not on your contact page or landing pages. You can leave the two lines out of those templates, or use Gabden's per-page rules to turn comments off on chosen URLs from the dashboard without touching the HTML.

Privacy by default

The embed sets no tracking cookies, does no fingerprinting, and does no cross-site tracking. Analytics are anonymous and aggregate. You own the comment data and can export it as JSON or CSV. For a plain HTML site with no backend of its own, that means you can add a full comment section without taking on any data-handling burden.

This same two-line embed is what powers the platform-specific guides, so whether your page is hand-written HTML or generated by a site builder, the approach is identical. For platform notes and options, see add comments to any website or the docs.

Join the discussion