Show the comment thread under your articles

Before you add it

• It is read-only. The box shows the thread. Nobody can post from your site, and nothing is loaded until a reader asks for it.
• You cannot moderate it. The comments are not stored on your site or on this one. You cannot remove or hide a comment from the box, and neither can we: anything anyone writes about your page can appear under it. The box follows the extension's rules and nothing more: comments deleted by their own authors are left out, comments with many down-votes are collapsed, and a run of near-identical comments from one key is folded into one. If that is not acceptable for your site, please do not add the box.
• Abuse. If you or your readers find illegal content or abuse in a thread, ABUSE.md explains what can and cannot be done about it, and who to contact.
• What you can tell your readers. You, the site owner, cannot remove a comment, and no single party can remove every copy. That cuts both ways: it is why a site cannot quietly delete criticism, and why nobody can take an abusive comment down everywhere at once. A relay can still drop a comment, and its author can ask for it to be deleted.

What your readers' browsers send

Nothing loads until a reader presses Show comments from Nostr. Until then the snippet is a button on your page and contacts nobody.

When a reader presses it, their browser:

1. loads the box from nostrcomments.github.io, which is hosted by GitHub. GitHub sees the reader's IP address and that some page shows the box, but not which page: the address is passed after the # in the box's link, and browsers never send that part to a server.
2. connects to six public Nostr relays — nos.lol, relay.damus.io, relay.primal.net, nostr.oxtr.dev, nostr.mom and relay.nostr.net. Each of them sees the reader's IP address and the address of your page, as any server a browser connects to would.

There are no cookies, no analytics and no tracking of any kind, and nothing is sent anywhere else. No pictures or avatars are loaded. The box cannot see your page, and your page cannot see into the box.

Please tell your readers. A line you could add to your privacy policy:

Comments under our articles are loaded from public Nostr relays, but only when you press “Show comments from Nostr”. Your browser then connects to those relays and to GitHub, which see your IP address; the relays also see the address of the page. We do not store or control these comments.

Add it

Paste this where the comments should appear, in the template of your article pages:

<div data-nostrcomments></div>
<script>
(function (box) {
  // NostrComments comment box: https://nostrcomments.github.io/embed/
  // Until the button is pressed, nothing is loaded and no server is contacted.
  var button = document.createElement('button');
  button.type = 'button';
  button.textContent = 'Show comments from Nostr';
  box.appendChild(button);
  button.onclick = function () {
    var canonical = document.querySelector('link[rel~="canonical"]');
    var params = new URLSearchParams({ url: box.getAttribute('data-url') || location.href });
    if (canonical && canonical.getAttribute('href')) params.set('alt', canonical.getAttribute('href'));
    if (box.getAttribute('data-theme')) params.set('theme', box.getAttribute('data-theme'));
    var frame = document.createElement('iframe');
    frame.src = 'https://nostrcomments.github.io/embed/frame.html#' + params;
    frame.title = 'Comments from Nostr';
    frame.setAttribute('sandbox', 'allow-scripts allow-popups allow-popups-to-escape-sandbox');
    frame.setAttribute('referrerpolicy', 'no-referrer');
    frame.style.cssText = 'display:block;width:100%;height:180px;border:0';
    window.addEventListener('message', function (e) {
      if (e.source !== frame.contentWindow || !e.data || e.data.nostrcomments !== 'height') return;
      frame.style.height = Math.min(Math.max(Number(e.data.height) || 0, 80), 20000) + 'px';
    });
    box.replaceChild(frame, button);
  };
})(document.currentScript.previousElementSibling);
</script>

• The box finds the page's address the same way the extension does: the address in the browser, plus the page's canonical link if it has one. Tracking parameters such as utm_source are left out, so every reader lands in the same thread as people using the extension.
• To show the thread of a particular address instead, add it to the first line: <div data-nostrcomments data-url="https://example.com/article"></div>
• The box is light or dark following the reader's system. To fix it, add data-theme="light" or data-theme="dark" to the same line.
• If your site sends a Content-Security-Policy, allow the snippet and the box: add 'sha256-LfnHEeqEcktaKDJwmO3HOFG4S6oQY88jjOA/P6ZtYx4=' to script-src, and https://nostrcomments.github.io to frame-src. The hash only matches the snippet exactly as above.
• Some site builders strip scripts out of posts. Put the snippet in the article template instead.
• The box shows up to 50 comments. A link at the bottom opens the full thread.

Try it

This is the snippet above, showing the thread of this site's front page.

You can check all of this

The box is a static page with no server behind it. Every comment, vote and name is shown only after its signature has been checked in the reader's browser, and the reading rules are copied from the extension, with a check that fails when the two drift apart. The source is here, and the extension's is here.