` 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](https://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: ```html

``` **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 `` with your own shortname: > **Placing the snippet elsewhere.** The script also tolerates being placed in `` 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. ```html ``` That's it. Load the page — the comment widget appears inside your `

`. > 👍 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](./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: ```javascript 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: ```html My article

My very interesting article

...

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