Getting Started

GraphComment adds a full comment thread to any web page with one <div> and a small JavaScript snippet. No build step, no framework, no server code required for the basic setup — and you can test it on localhost before you ship.

This guide covers the standard web page integration. If you run AMP pages, use a mobile app WebView, or need single sign-on, see the dedicated guides linked at the end.

Before you start

You need one thing: your shortname (graphcommentId) — the unique identifier of your site. Find it in your GraphComment back-office under the site's Setup tab. It is safe to expose in client-side code — it only identifies which site the comments belong to.

📘
No account yet?
Create a free site at graphcomment.com, then copy the shortname from the Setup tab.

Step 1 — Add the container

Place this element in your HTML exactly where you want the comment thread to appear (typically below the article body), together with the style block that reserves its height:

<style>
  #graphcomment { min-height: 341px; }
  @media (min-width: 501px) { #graphcomment { min-height: 304px; } }
  @media (min-width: 600px) { #graphcomment { min-height: 286px; } }
</style>
<div id="graphcomment"></div>

Do not skip the style block. Our script is loaded asynchronously, so it runs after the first
paint: without it the container is 0 px tall until the script executes, and everything below the
comment thread shifts down when the widget appears — a layout shift that also hurts your Core Web
Vitals. The three values are the floor — the height of a thread with no comments, per screen width
— and never more than that, so no blank space is left on lightly commented pages.

If you display the thread in the side panel mode, omit the style block: the container then
becomes a positioned overlay and needs no reserved height.

Step 2 — Add the initialization script

Immediately after the container, add the snippet below and replace <shortname> with your own shortname:

Placing the snippet elsewhere. The script also tolerates being placed in <head> or anywhere above the container (tag managers, CMS templates): when it runs before the page is parsed, it waits for the DOM to be ready and then starts normally. Placing it right after the container remains the recommended setup, as it starts the widget as early as possible.

<script type="text/javascript">
  /* --- CONFIGURATION (edit this) --- */
  var __semio__params = {
    graphcommentId: "<shortname>",

    behaviour: {
      // Recommended: a stable unique ID for this thread (e.g. your page/post ID)
      // uid: "unique_thread_identifier"
    }

    // Add more parameters here if needed (see "Widget configuration")
  };

  /* --- DO NOT EDIT BELOW --- */
  function __semio__onload() {
    __semio__gc_graphlogin(__semio__params);
  }
  (function () {
    var gc = document.createElement('script');
    gc.type = 'text/javascript';
    gc.async = true;
    gc.defer = true;
    gc.onload = __semio__onload;
    gc.src = 'https://integration.graphcomment.com/gc_graphlogin.js?' + Date.now();
    (document.head || document.body).appendChild(gc);
  })();
</script>

That's it. Load the page — the comment widget appears inside your <div>.

👍
Works on localhost
You don't need a public or allow-listed domain to try GraphComment. Open your page from localhost (or a local file server) and the widget loads normally, so you can integrate and test before deploying.

📘
Indexing matters to you?
The widget loads in an iframe: by default, comments are not part of your page's HTML. If you want them indexed by Google or visible to AI engines, read SEO & GEO before you ship.

Step 3 — Give each thread a stable identity

By default, GraphComment identifies a thread by the page URL. That works, but URLs change — a domain migration, a trailing slash, or tracking parameters can detach comments from their page.

To make a thread's identity permanent, set a uid you control (your CMS post ID is ideal) and, if your URL can vary, pass the canonical url explicitly:

behaviour: {
  uid: "post-12345",
  url: "https://your-site.com/article.html"
}

⚠️
Why this matters
uid is the single most important setting for long-term stability. Set it once and your comments survive URL changes. The most common support request we see — "my comments disappeared after a domain change" — is prevented entirely by using a stable uid.

A note on URLs

GraphComment automatically strips query-string parameters so a page resolves to one canonical thread. To avoid any ambiguity when your page can be reached with extra parameters, don't rely on the query string for identity — set uid (and url if needed) as shown above.

Full example

A complete, copy-pasteable page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My article</title>
</head>
<body>

  <!-- Your page content -->
  <h1>My very interesting article</h1>
  <p>...</p>

  <!-- 1) GraphComment container (with its reserved height) -->
  <style>
    #graphcomment { min-height: 341px; }
    @media (min-width: 501px) { #graphcomment { min-height: 304px; } }
    @media (min-width: 600px) { #graphcomment { min-height: 286px; } }
  </style>
  <div id="graphcomment"></div>

  <!-- 2) Initialization script -->
  <script type="text/javascript">
    var __semio__params = {
      graphcommentId: "demo-gc",   // replace with your shortname

      behaviour: {
        uid: "article-12345",
        url: "https://my.site/article-12345.html",
        readonly: false,
        sort: "newest",
        countPerPage: 5
      },

      statistics: {
        pageTitle: "My very interesting article",
        category: "Tech"
      }
    };

    function __semio__onload() {
      __semio__gc_graphlogin(__semio__params);
    }
    (function () {
      var gc = document.createElement('script');
      gc.type = 'text/javascript';
      gc.async = true;
      gc.defer = true;
      gc.onload = __semio__onload;
      gc.src = 'https://integration.graphcomment.com/gc_graphlogin.js?' + Date.now();
      (document.head || document.body).appendChild(gc);
    })();
  </script>

</body>
</html>

Next steps

Widget configuration — every behaviour, statistics, and integration option (sorting, read-only mode, pagination, header offset, and more).
Single Sign-On — let your logged-in users comment with their existing account.
WordPress plugin — install GraphComment on WordPress without touching code.
Mobile (WebView) — embed GraphComment in a native iOS/Android/React Native app.
Comment count — show "42 comments" next to your article links.
Migrate from Disqus — bring your existing Disqus comments over.
SEO & GEO — make your comments indexable by Google and visible to AI engines.