インストール

埋め込みコード

埋め込みコードは Site Console → ウィジェット → Install & Embed からコピーします。アプリキーはすでに入力されています。

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

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

1. <script> タグをページの <head> に置きます。1 ページにつき 1 回読み込めば十分です。
2. <crow-comments> タグを <body> 内の、コメント欄を表示したい場所に置きます。通常は記事のすぐ後です。

インストールはこれだけです。ウィジェットは周囲の要素の幅に合わせて表示されます。

WordPress

Crowment Comments プラグインは、WordPress 標準のコメントをウィジェットに置き換えます。テーマを編集する必要はありません。

1. crowment-comments.zip をダウンロードします。
2. WordPress で Plugins → Add New → Upload Plugin を開き、zip を選んで Install Now、続いて Activate を選択します。
3. Settings → Crowment Comments で app key を貼り付けて保存します。

既存の WordPress コメントはデータベースに残り、プラグインが有効な間は非表示になります。プラグインを更新するには、新しい zip を同じ方法でアップロードし、現在のバージョンを置き換えることを確認します。

フレームワークとサイトビルダー

<crow-comments> は標準的な Web コンポーネントなので、HTML を追加できる場所ならどこでも動作します。静的サイト、CMS テーマ、React、Vue、Svelte、Angular などで利用できます。

フレームワークによっては、未知のタグについて警告が出ます。crow-comments がカスタム要素であることを設定してください。

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',
        },
      },
    }),
  ],
}

シングルページアプリ

アプリのルートが変わっても、ウィジェットを作り直す必要はありません。ウィジェットはクライアント側のナビゲーション（pushState、replaceState、戻る／進むボタン）を自動で追跡し、新しいページのスレッドを読み込みます。

ページに表示されるスレッド

ページごとに独自のスレッドがあります。標準では、ウィジェットはページを URL のパスで識別し、アドレスの残りの部分は無視します。https://example.com/blog/hello?ref=mail#comments の場合は /blog/hello です。つまり：

• /blog/hello?utm_source=newsletter と /blog/hello は同じスレッドを共有します。
• /blog/hello と /blog/hello/ は別のパスなので、スレッドも別になります。URL は統一しましょう。
• スレッドはひとつのウィジェットに属します。同じパスでも、2 つのウィジェットがコメントを共有することはありません。

ページの識別方法は、次の 3 つの属性で変更できます。

• watch-query は、クエリパラメータをアルファベット順でページ識別子に加えます。そのため ?b=2&a=1 と ?a=1&b=2 は同じとみなされます。/watch?v=abc123 のように、クエリで内容が決まる場合に使います。utm_source などのトラッキング用パラメータも含め、すべてのパラメータが対象です。
• watch-hash は、ハッシュをページ識別子に加えます。/#/posts/42 のようなハッシュベースのルーティングで使います。
• page-id は、URL の代わりに任意の識別子を使います。同じ内容が複数の URL に存在する場合や、URL が変わる可能性がある場合に使います。記事のデータベース ID のような不変の値を使えば、URL が変わってもスレッドはページに結び付いたままです。

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

コメントへのリンク

任意のページ URL にコメント ID 付きの crowment_cid を追加すると、そのコメントのスレッドを読み込んだ状態でページが開きます（例：https://example.com/blog/hello?crowment_cid=COMMENT_ID）。コメント ID は、ウィジェット内のコメントのメニューからコピーできます。

属性リファレンス

真偽値の属性は、記述されていれば有効です：<crow-comments app-key="…" watch-query>。ページの読み込み後に属性を変更しても、ウィジェットはそれに追従します。