トラブルシューティング

ウィジェットが表示されない

まず以下を確認してください。

data-key 属性が設定されているか（cp_live_ / cp_test_ で始まる値）。data-key が無いと自動初期化されません。
ブラウザのコンソールに [CarePort] API key is required が出ていないか
スクリプトの URL が https://cdn.careport.app/v1/widget.js になっているか
広告ブロッカーがスクリプトを止めていないか

AI が定型文しか返さない（モックモード）

ウィジェットは表示・送信できるのに、ナレッジベースを反映した実際の AI 応答ではなく、「返品」「料金」「配送」などのキーワードに対する固定のデモ文言しか返ってこない場合、ウィジェットがモックモードで動作しています。

原因: ウィジェットは「接続先（API URL）」と「ボット ID」の両方が解決できないとき、デモ用のモック応答にフォールバックします。具体的には次のいずれかです。

data-bot-id が指定されていない、または無効な値
古いスニペット（接続先を持たない）＋古くキャッシュされた widget.js の組み合わせ

現行バージョンでの挙動: 接続先を省略した場合は本番 API（https://api.careport.app）が自動的に既定値として使われます。そのため、最新の widget.js を読み込んでいて data-bot-id が正しければ、data-api-url が無くても実 AI 応答になります。モック応答が出るのは主に 古い widget.js がブラウザ／CDN にキャッシュされているケースです。

解決策:

管理画面で発行される最新のスニペットをコピーし直して貼り替える（data-api-url="https://api.careport.app" と data-bot-id が含まれます）。
ブラウザのスーパーリロード（キャッシュ無視再読み込み）で古い widget.js を破棄する。
それでも直らない場合は、data-bot-id の値が管理画面のボット ID と一致しているか確認してください。

CSP（Content Security Policy）

サイトに CSP を設定している場合、CarePort のドメインを許可する必要があります。

Content-Security-Policy:
  script-src 'self' https://cdn.careport.app;
  connect-src 'self' https://api.careport.app https://*.supabase.co;

script-src — ウィジェット本体（cdn.careport.app）の読み込みを許可
connect-src — チャット API（api.careport.app）および Supabase への接続を許可

補足: ウィジェットはスタイルを Shadow DOM 内に注入します。style-src を厳格に制限している場合は style-src 'unsafe-inline' の許可、または CarePort サポートへの相談が必要になることがあります。

スタイルが崩れる / サイトの CSS と干渉する

CarePort Widget は Shadow DOM (closed) でレンダリングされるため、原則としてホストページの CSS と相互に干渉しません。

ホストページの CSS がウィジェット内部に漏れることはありません
ウィジェットの CSS がホストページに漏れることもありません

もし表示位置が他の固定要素と重なる場合は、data-z-index で重なり順を調整してください。

SSR（Next.js など）でエラーになる

window is not defined などのエラーが出る場合、<script> をサーバーサイドで直接実行しようとしています。

Next.js では必ず next/script を使ってください（strategy="afterInteractive"）
window.CarePort にアクセスするコードは useEffect 内、または next/script の onLoad 内に書いてください

<Script
  src="https://cdn.careport.app/v1/widget.js"
  strategy="afterInteractive"
  data-key="cp_live_xxxx"
  onLoad={() => {
    // ここでは window.CarePort が利用可能
    window.CarePort?.getInstance()?.on('ready', () => {});
  }}
/>

React で開発時にウィジェットが 2 つ表示される

React 18 の Strict Mode では useEffect が開発時に 2 回実行されます。cleanup 関数で destroy() を呼んでいるか確認してください。

useEffect(() => {
  // ... スクリプト追加
  return () => {
    window.CarePort?.getInstance()?.destroy();
  };
}, []);

解決しない場合

上記で解決しない場合は、ブラウザのコンソールログ（[CarePort] プレフィックス）を添えて CarePort サポートまでお問い合わせください。