Add Threadly comments to your site

Register a site. You get two things:

• Public key — a non-secret id for your site (looks like pk_J1GWzTik-…). Safe to put in your page’s HTML.
• Origin — the only domain allowed to use that key (e.g. https://yourblog.com). Nobody can copy your key onto a different site and use it.

The allowed origin is the scheme + host (+ port) of your site, exactly as a visitor sees it in their address bar. Three rules keep this painless:

• Use the form visitors actually type. https://yourblog.com, http://localhost:3000, https://blog.example.org:8443 — all are valid origins. Just match what sits in the address bar.
• We strip a trailing slash and any path you pass. https://yourblog.com/, https://yourblog.com/blog, and https://yourblog.com?q=1 all store as https://yourblog.com — so a paste-straight-from-the-address-bar is fine.
• https://yourblog.com and https://www.yourblog.com are different origins. Pick the one your pages actually serve from; the API does the rest.

Invalid input (no scheme, garbage like yourblog.com, or odd schemes like ftp://…) bounces back immediately as a clear error.

Put this where you want comments to appear (e.g. at the bottom of a blog post):

 <div
  data-site="pk_your_public_key"
  data-thread="my-first-post"
  data-api="https://threadly-api.threadly.workers.dev"
></div>

<script
  src="https://threadly-widget.pages.dev/widget/0.5.4/widget.js"
  defer
></script>

That’s it. The script finds the <div>, loads the thread’s comments, and shows a comment box underneath.

data-thread is how Threadly keeps each page’s comments separate. Every page needs its own stable value — changing it hides that page’s existing comments. A database id is best; slugs work too, but treat renaming a published post as a breaking change.

If your site has comments under multiple top-level paths, namespace the id per section so they never merge:

 // app/blog/[slug]/page.tsx
import { Threadly } from "@/components/threadly";

export default async function Post({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return (
    <article>
      {/* … */}
      <Threadly thread={`blog-${slug}`} />
    </article>
  );
}

/blog/test-blog → data-thread="blog-test-blog". /articles/intro → data-thread="articles-intro".

What doesn’t work:

• Same id across two pages — their comments merge into one thread.
• data-thread not set — the widget doesn’t mount. Empty or whitespace-only is treated the same.