ドキュメント

Ghost Comment を 2 分で導入するためのガイド。 ダッシュボードで Project ID を確認してから始めてください。

クイックスタート（HTML / Vanilla JS）

あらゆるサービスに使える最もシンプルな方法。
</body> の直前にこの1行を追加するだけ。

html
<script
  src="https://ghost-comment.vercel.app/widget.js"
  data-project-id="YOUR_PROJECT_ID"
></script>

YOUR_PROJECT_ID はダッシュボード → プロジェクト詳細画面でコピーできます。

React

GhostComment.tsx を作成してプロジェクトに置きます（下の「GhostComment コンポーネント」節でコードをコピー）。

tsx
import { GhostComment } from './GhostComment'

export default function App() {
  return (
    <>
      <YourApp />
      <GhostComment projectId="YOUR_PROJECT_ID" />
    </>
  )
}
create-react-app / Vite / Remix すべて同じ方法で使えます。

Next.js（App Router）

app/layout.tsx に追加すると全ページに表示されます。

tsx
// app/layout.tsx
import { GhostComment } from '@/components/GhostComment'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        {children}
        <GhostComment projectId="YOUR_PROJECT_ID" />
      </body>
    </html>
  )
}

特定ページにのみ表示したい場合は、そのページの page.tsx に直接追加してください。

Vue 3

vue
<!-- App.vue -->
<template>
  <RouterView />
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  const s = document.createElement('script')
  s.id = 'ghost-comment-widget'
  s.src = 'https://ghost-comment.vercel.app/widget.js'
  s.setAttribute('data-project-id', 'YOUR_PROJECT_ID')
  document.body.appendChild(s)
})

onUnmounted(() => {
  document.getElementById('ghost-comment-widget')?.remove()
})
</script>

Svelte / SvelteKit

svelte
<!-- +layout.svelte -->
<script>
  import { onMount, onDestroy } from 'svelte'

  onMount(() => {
    const s = document.createElement('script')
    s.id = 'ghost-comment-widget'
    s.src = 'https://ghost-comment.vercel.app/widget.js'
    s.setAttribute('data-project-id', 'YOUR_PROJECT_ID')
    document.body.appendChild(s)
    return () => s.remove()
  })
</script>

<slot />

GhostComment.tsx — コピー用コンポーネント

React / Next.js プロジェクト用。このファイルをそのままコピーして使ってください。 npm パッケージのインストールは不要です。

tsx
'use client'
import { useEffect } from 'react'

interface GhostCommentProps {
  projectId: string
  position?: 'left' | 'right'
  color?: string
  prompt?: string
}

export function GhostComment({
  projectId,
  position = 'right',
  color = '#A78BFA',
  prompt,
}: GhostCommentProps) {
  useEffect(() => {
    const id = 'ghost-comment-widget'
    if (document.getElementById(id)) return

    const s = document.createElement('script')
    s.id = id
    s.src = 'https://ghost-comment.vercel.app/widget.js'
    s.setAttribute('data-project-id', projectId)
    s.setAttribute('data-position', position)
    s.setAttribute('data-color', color)
    if (prompt) s.setAttribute('data-prompt', prompt)
    document.body.appendChild(s)

    return () => {
      document.getElementById(id)?.remove()
    }
  }, [projectId, position, color, prompt])

  return null
}
Next.js の場合： ファイル先頭の 'use client' は必須です。Server Component からは使えません。

カスタマイズ

widget.js に渡せるオプションの一覧。 HTML の場合は data-* 属性、 React コンポーネントの場合は props として渡します。

属性 / Prop型デフォルト説明
data-project-idstring—（必須）ダッシュボードから取得するID
data-position"left" | "right""right"ウィジェットの表示位置
data-colorstring（hex）"#A78BFA"ボタン・送信ボタンの色
data-promptstring"本音を聞かせて…"テキストエリアのプレースホルダー

例：

html
<script
  src="https://ghost-comment.vercel.app/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-position="left"
  data-color="#3B82F6"
  data-prompt="改善してほしい点はありますか？"
></script>

API リファレンス（Pro）

Pro プランではダッシュボード以外から直接フィードバックデータを取得できます。

GET /api/feedbacks

bash
curl "https://ghost-comment.vercel.app/api/feedbacks?projectId=YOUR_ID" \
  -H "Authorization: Bearer YOUR_API_KEY"

Response

json
{
  "feedbacks": [
    {
      "id": "abc123",
      "text": "UIが分かりにくい",
      "rating": 2,
      "sentiment": "negative",
      "pageUrl": "https://your-app.com/dashboard",
      "createdAt": "2026-06-24T10:00:00Z"
    }
  ],
  "total": 42
}
API キーはダッシュボード → Settings → API Key から発行できます（Pro のみ）。

FAQ

フィードバックを送ったユーザーを特定できますか？

個人を特定する情報は一切収集しません。デバイスの種類（mobile / desktop）とページURLのみを記録します。これはウィジェットが「完全匿名」として機能するための設計です。

Free プランの30件制限はいつリセットされますか？

毎月1日の0:00（UTC）にリセットされます。30件に達してもウィジェットは表示されたままですが、新しいフィードバックは受け付けなくなります。

自前のFirebaseプロジェクトに繋げることはできますか？

現在はできません。Ghost Comment が管理するインフラを使います。これが「インフラゼロ」を実現する仕組みです。

ウィジェットのサイズ / パフォーマンスへの影響は？

widget.js は約50KBです。スクリプトは非同期ロードされるため、メインスレッドをブロックしません。Core Web Vitalsへの影響はほぼゼロです。

ドメインの制限はありますか？

ありません。1プロジェクトに対して複数ドメインで同じスクリプトタグを使えます。ステージング環境と本番環境で同じプロジェクトIDを使いたい場合はそのままご利用いただけます。

それでも解決しない場合は X で直接聞いてください。

@Yoko_ai_dev に聞く →