トラブルシューティング

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

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

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

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 サポートまでお問い合わせください。