Installation
Installing Connect takes one snippet. This page explains the snippet, every attribute you can set on it, and the one concept worth understanding before you deploy: page identity.
The snippet
Create a site in the dashboard (name plus domain), then paste this where you want comments to appear, usually at the bottom of your article template:
<div id="hakanai-connect"></div>
<script async src="https://connect.hakanai.io/embed.js" data-key="YOUR_SITE_KEY"></script>
Replace YOUR_SITE_KEY with the public key shown on your site's overview page. The dashboard displays the exact snippet with your key already filled in.
That is a complete installation. The widget loads lazily when the reader scrolls near the container, fetches the comments for the current page, and renders the thread with a comment form.
If you use one of the major static site generators, the platform guides give you a ready-made template: Hugo, Astro, Jekyll, Eleventy, Nuxt.
Script attributes
All configuration lives on the script tag:
| Attribute | Default | Description |
|---|---|---|
data-key | required | Public key of your Connect site |
data-page-id | none | Stable identifier for the page. See Page identity below |
data-target | #hakanai-connect | CSS selector of the container element |
data-url | current page URL | Page URL shown in the moderation dashboard |
data-locale | site setting | Force the widget language (en or fr) |
data-api | https://api.hakanai.io | API base URL. You will not need this |
Page identity
Every page with comments has a thread, and every thread needs an identity. By default, Connect uses the page URL (normalized: no query string, no trailing slash) as that identity.
This works, with one caveat: if the URL changes, the comments do not follow. Renaming a slug, restructuring permalinks, or moving a post to another section creates a new URL, hence a new empty thread, and the old comments are orphaned.
The fix is the data-page-id attribute. Give each page a stable identifier that survives URL changes, typically the post slug or your CMS entry id:
<script async src="https://connect.hakanai.io/embed.js"
data-key="YOUR_SITE_KEY"
data-page-id="my-post-slug"></script>
Two rules:
- Once you pick a page id scheme, keep it. Changing it later orphans threads exactly like a URL change would.
- If you import from Disqus, imported threads are identified by their URL, so keep the default URL identity for those pages, or use the page URL as the page id.
If you are starting fresh and your URLs are stable, the default is fine. If you are in doubt, set data-page-id now; it costs nothing and removes the problem permanently.
Allowed domains
Comments are only accepted from the domains declared on your site. The main domain is set at creation; add staging or preview domains under Site settings, one per line. A comment posted from an undeclared domain is rejected before it reaches moderation.
Verifying the installation
Deploy, open an article, and scroll to the bottom. You should see the comment form. Post a test comment: depending on your moderation mode, it appears immediately or shows "Your comment is awaiting moderation", and you receive a notification email.
If the widget does not appear, check the browser console. The script logs an explicit error when data-key is missing or the container element is not found.
Next steps
- Moderation: choose how comments get published.
- Styles and theming: match the widget to your design.
- Comment counts: show "5 comments" on your listing pages.