フレームワーク別の導入

CarePort Widget はどのフレームワークでも <script> タグ 1 つで動作します。SPA / SSR フレームワークでの注意点を以下にまとめます。

Vanilla HTML

</body> の直前にスニペットを貼り付けるだけです。

<!doctype html>
<html lang="ja">
  <body>
    <!-- ページのコンテンツ -->

    <script
      src="https://cdn.careport.app/v1/widget.js"
      data-key="cp_live_xxxxxxxxxxxxxxxx"
      data-bot-id="00000000-0000-0000-0000-000000000000"
    ></script>
  </body>
</html>

Next.js (App Router)

next/script を使い、ルートレイアウトに配置します。SSR 環境では <script> を直書きせず必ず next/script を使ってください。

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        {children}
        <Script
          src="https://cdn.careport.app/v1/widget.js"
          strategy="afterInteractive"
          data-key="cp_live_xxxxxxxxxxxxxxxx"
          data-bot-id="00000000-0000-0000-0000-000000000000"
        />
      </body>
    </html>
  );
}

ヒント: next/script は data-* 属性をそのまま出力するため、ウィジェットの自動初期化（script[data-key^="cp_"] の検出）がそのまま機能します。

Next.js (Pages Router)

pages/_app.tsx に next/script を配置します。

// pages/_app.tsx
import type { AppProps } from 'next/app';
import Script from 'next/script';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://cdn.careport.app/v1/widget.js"
        strategy="afterInteractive"
        data-key="cp_live_xxxxxxxxxxxxxxxx"
        data-bot-id="00000000-0000-0000-0000-000000000000"
      />
    </>
  );
}

React (Vite / CRA)

最もシンプルなのは index.html にスニペットを置く方法です（Vanilla と同じ）。

<!-- index.html -->
<script
  src="https://cdn.careport.app/v1/widget.js"
  data-key="cp_live_xxxxxxxxxxxxxxxx"
  data-bot-id="00000000-0000-0000-0000-000000000000"
></script>

ルーティングやユーザー情報に応じて動的に制御したい場合は、JavaScript API を useEffect 内で使います。

// App.tsx
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.careport.app/v1/widget.js';
    script.dataset.key = 'cp_live_xxxxxxxxxxxxxxxx';
    script.dataset.botId = '00000000-0000-0000-0000-000000000000';
    document.body.appendChild(script);

    return () => {
      window.CarePort?.getInstance()?.destroy();
      script.remove();
    };
  }, []);

  return <div>{/* アプリ本体 */}</div>;
}

注意: React 18 の Strict Mode では開発時に useEffect が 2 回実行されます。上記のように cleanup で destroy() を呼んでおけば二重マウントを防げます。

どの方法を選ぶか

状況	推奨
静的サイト・WordPress・LP	`script` タグ直書き（Vanilla）
Next.js	`next/script`（`strategy="afterInteractive"`）
React SPA で固定表示	`index.html` に直書き
React SPA で動的制御（ログイン後のみ等）	JavaScript API