Installation

The embed code

Copy your embed code from Site Console → your widget → Install & Embed, where your app key is already filled in.

<script defer src="https://embeds.crowment.com/comments.js"></script>

<crow-comments app-key="YOUR_APP_KEY"></crow-comments>

1. Put the <script> tag in the <head> of your pages. It only needs to load once per page.
2. Put the <crow-comments> tag in the <body>, where the comment section should appear, usually right after your article.

That is the whole installation. The widget fits the width of the element around it.

WordPress

The Crowment Comments plugin replaces the built-in WordPress comments with the widget, so you don't need to edit your theme.

1. Download crowment-comments.zip.
2. In WordPress, go to Plugins → Add New → Upload Plugin, choose the zip and select Install Now, then Activate.
3. Go to Settings → Crowment Comments, paste your app key and save.

Your existing WordPress comments stay in your database; they are hidden while the plugin is active. To update the plugin, upload the new zip the same way and confirm replacing the current version.

Frameworks and site builders

<crow-comments> is a standard web component, so it works anywhere you can add HTML: static sites, CMS themes, React, Vue, Svelte, Angular and others.

Some frameworks warn about unknown tags. Tell them crow-comments is a custom element:

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: tag => tag === 'crow-comments',
    },
  },
})

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'crow-comments',
        },
      },
    }),
  ],
}

Single-page apps

You do not need to re-create the widget when your app changes route. It follows client-side navigation by itself (pushState, replaceState, and the back and forward buttons) and loads the thread of the new page.

Which thread a page shows

Each page has its own thread. By default, the widget identifies a page by its URL path and ignores the rest of the address. For https://example.com/blog/hello?ref=mail#comments that is /blog/hello. This means:

• /blog/hello?utm_source=newsletter and /blog/hello share one thread.
• /blog/hello and /blog/hello/ are different paths, so they have different threads. Keep your URLs consistent.
• Threads belong to one widget. Two widgets never share comments, even on the same path.

Three attributes change how a page is identified:

• watch-query adds the query parameters to the page identity, in alphabetical order, so ?b=2&a=1 and ?a=1&b=2 are the same. Use it when the query selects the content, as in /watch?v=abc123. Every parameter counts, tracking parameters such as utm_source included.
• watch-hash adds the hash to the page identity. Use it for hash-based routing such as /#/posts/42.
• page-id replaces the URL with an identifier you choose. Use it when the same content lives at several URLs, or when your URLs might change. A stable value such as your post's database ID keeps the thread attached through any URL change.

<crow-comments app-key="YOUR_APP_KEY" page-id="post-1842"></crow-comments>

Linking to a comment

Add crowment_cid with a comment ID to any page URL to open that page with the comment's thread loaded, for example https://example.com/blog/hello?crowment_cid=COMMENT_ID. Comment IDs can be copied from the comment's menu in the widget.

Attribute reference

Boolean attributes are on when present: <crow-comments app-key="…" watch-query>. You can change any attribute after the page loads and the widget follows.