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 public key (graphcommentId). 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 public key 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):

<div id="graphcomment"></div>

Step 2 — Add the initialization script

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

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

    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.

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 -->
  <div id="graphcomment"></div>

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

      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.