Widget Quick Start

CarePort Widget は、<script> タグ 1 行でサイトに AI チャットサポートを追加できる埋め込み型ウィジェットです。Shadow DOM で隔離されているため、既存サイトの CSS と干渉しません。

5 分で動かす

1. 管理画面でスニペットを取得

CarePort 管理画面で対象のボットを開き、「ウィジェット」 タブを表示します。<script> スニペットが自動生成されているので、コピーボタンで取得してください。

注意: スニペットに data-key（API キー）が含まれていない場合は、まず 設定 > インテグレーション から API キーを発行してください。data-key が無いとウィジェットは起動しません。

2. サイトに貼り付ける

取得したスニペットを、サイトの </body> の直前に貼り付けます。

<script
  src="https://cdn.careport.app/v1/widget.js"
  data-key="cp_live_xxxxxxxxxxxxxxxx"
  data-bot-id="00000000-0000-0000-0000-000000000000"
  data-color="#635BFF"
  data-position="bottom-right"
  data-lang="ja"
></script>

3. 動作確認

ページを開くと、右下にチャットの起動ボタン（FAB）が表示されます。クリックするとチャットウィンドウが開きます。

仕組み

スクリプトが読み込まれると、data-key が cp_ で始まる <script> タグを検出して自動初期化します。追加の JavaScript は不要です。

Shadow DOM (closed) でレンダリングされ、ホストページの CSS と完全に分離されます
バンドルは IIFE 単一ファイルで、CDN（https://cdn.careport.app/v1/widget.js）から配信されます
手動でマウントを制御したい場合は JavaScript API を使用します

次のステップ

フレームワーク別の導入方法 — Next.js / React など
データ属性リファレンス — data-color などのカスタマイズ
JavaScript API — window.CarePort.init() とイベント購読
トラブルシューティング — CSP / SSR / スタイル干渉