How to install & use Comments Plugin

Add the following two snippets to your page:

a. Comment container — place it where comments should appear:

<div class="adityoarr-comments" data-thread-id="my-post-slug"></div>

b. Loader script — add it once, anywhere after the container above (ideally right before </body>):

<script src="https://apps.adityoarr.com/comments-plugin/embed.js" async></script>

That's it. The widget loads itself automatically, lazy-loads once it's about to come into view, and resizes itself to fit the number of comments.

So it doesn't feel like magic, here's the flow:

1. embed.js finds every div.adityoarr-comments element on the page.
2. For each one, it creates a sandboxed, isolated <iframe> pointing at the widget page on our servers.
3. The iframe only fully loads once it's about to scroll into view (lazy loading), so it doesn't slow down your page.
4. Comment content, the post form, and anonymous login all run inside the iframe — none of our scripts run directly on your page.
5. The iframe messages the parent page to report its content height, so the iframe automatically resizes (no odd scrollbars). That message's origin is validated, so other sites can't spoof it.

The data-thread-id attribute determines which “comment thread” is shown. Use a value that is unique and stable for each page or post — for example the article's slug or post ID:

<div class="adityoarr-comments" data-thread-id="how-to-build-a-nextjs-plugin"></div>

If this attribute is left out, the widget automatically falls back to window.location.pathname. That works, but it's risky: if the page URL ever changes (a redesign, slug migration, etc.), existing comments get “detached” from their new page. It's best to always set data-thread-id explicitly and never change it after it's published.

You can place more than one .adityoarr-comments container on the same page — for example for a product list where each item has its own comments. Just give each container a different data-thread-id; a single <script> tag is still enough to initialize all of them.

<div class="adityoarr-comments" data-thread-id="product-1"></div>
<div class="adityoarr-comments" data-thread-id="product-2"></div>

<script src="https://apps.adityoarr.com/comments-plugin/embed.js" async></script>

Static HTML / WordPress / other CMS: paste both snippets directly into your page template (e.g. single.php in WordPress, or a “Custom HTML” block).

Next.js / React: load the script with next/script using strategy="lazyOnload", and render the <div> container from inside your component.

import Script from "next/script";

export default function BlogPost() {
  return (
    <>
      <div className="adityoarr-comments" data-thread-id="my-post-slug" />
      <Script
        src="https://apps.adityoarr.com/comments-plugin/embed.js"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue / Nuxt / Svelte / other frameworks: the same pattern applies — render the <div> container, then load embed.js after the component mounts (e.g. in onMounted or the equivalent of useEffect).

If your website enforces a strict CSP, add the following directives so the widget can load correctly:

script-src https://apps.adityoarr.com;
frame-src https://apps.adityoarr.com;

Without these two directives, the browser can silently block the loader script or the widget's iframe — usually showing up as a console error rather than anything visible on the page.

Comments still display even if you haven't registered your domain. But if you need moderation (approve/delete/mark as spam) and per-site settings, register your domain:

1. Open the login page and sign in with a Google account.
2. In the dashboard, click Add New Site and enter your site's name and domain.
3. Manage incoming comments from Dashboard → Comments.

The widget doesn't show up at all. Make sure the <div class="adityoarr-comments"> element exists in the DOM before embed.js runs, and check the browser console for CSP or CORS errors.

The widget's height doesn't adjust / gets cut off. This is usually because the resize postMessage is being blocked. Make sure no browser extension or proxy is filtering postMessage, and that your domain doesn't block the apps.adityoarr.com origin.

Comments fail to post. Check the console for errors from /api/comments — the most common causes are rate limiting (too many comments in a short window) or a slow connection during token verification.

Do I need to install any npm package? No. This widget runs as an already-hosted service — you just paste the HTML/JS snippet above into your page.

Do visitors need an account to comment? No. By default visitors comment anonymously; they're never asked to create an account.

Can it be used on multiple domains at once? Yes. Register each domain from the dashboard so it gets its own settings and moderation queue.