Claude Code への依頼方法

Claude Code などの AI コーディングエージェントに、このドキュメントだけで CarePort の導入を任せる

CarePort の Widget / フォームは <script> タグだけで動く素直な埋め込みなので、Claude Code をはじめとする AI コーディングエージェント（Cursor / GitHub Copilot / Codex など）に導入作業ごと任せられます。

CarePort のソースコードは非公開ですが、この公式ドキュメントだけで AI が正しく実装できるように要点をまとめてあります。エージェントには、このページ（または本文中の URL）を読ませてから依頼してください。

このページの使い方: ① 下の「事前に用意するもの」を揃える → ② 「依頼プロンプト」をコピーして自分の値に置き換える → ③ Claude Code に貼り付ける。

1. 事前に用意するもの

エージェントに渡す前に、CarePort 管理画面で次を取得してください。これらはエージェント側では生成できません。

必要なもの	取得場所	用途
API キー（`cp_live_…`）	設定 > インテグレーション	フォーム・Widget 共通の認証
フォーム ID（UUID）	フォーム > 対象フォーム > 埋め込み	埋め込みフォーム導入時
ボット ID（UUID）	ウィジェット（チャット）タブ	チャット Widget 導入時

加えて、自分の状況をエージェントに伝えます。

使用フレームワーク（例: Next.js App Router / Pages Router / React(Vite) / 素の HTML / WordPress）
フォームを表示したい場所（例: /contact ページ）
Widget を出すページの範囲（例: 公開ページのみ / サイト全体 / ログイン後のみ）

API キーについて: cp_live_… は埋め込み HTML に載る公開（publishable）キーです。ブラウザに露出する前提の設計なので、エージェントに渡したりフロントエンドのコードに書いても問題ありません（CarePort の送信はオリジンではなく API キーで認可します）。

2. 依頼プロンプト（コピペ）

次のテンプレートの 〔〕 を自分の値に置き換えて、Claude Code に貼り付けてください。

CarePort（https://docs.careport.app）の埋め込みフォームとチャット Widget を、
このプロジェクトに導入してください。実装方針は CarePort 公式ドキュメントに従ってください:
- フォーム: https://docs.careport.app/docs/forms/installation
- Widget : https://docs.careport.app/docs/widget/installation

【環境】
- フレームワーク: 〔例: Next.js 15 App Router〕

【埋め込みフォーム】
- フォーム ID: 〔325a5b34-...〕
- API キー  : 〔cp_live_...〕
- 設置場所  : 〔例: /contact ページの本文〕

【チャット Widget】
- ボット ID : 〔07c42d24-...〕
- API キー  : 〔cp_live_...〕（フォームと同じ）
- 表示範囲  : 〔例: 公開ページ（/ と /contact）のみ。ログイン後の画面には出さない〕
- 色 / 位置 / 言語: 〔#2563eb / bottom-right / ja〕

【守ってほしいこと】
- フォームの見た目（色・項目・文言）は CarePort 管理画面側の設定が正。data 属性やコードで
  再現・上書きしないこと（Widget の data-color など公式に定義された属性の指定は可）。
- SSR/SPA では <script> を直書きせず、フレームワーク標準の方法で読み込むこと
  （Next.js は next/script の strategy="afterInteractive"）。
- クライアント遷移でフォームのページに後から来る場合は CarePortForm.mount() でマウントすること。
- 実装後、型チェック/ビルドが通ること、実際にフォームと Widget が表示されることを確認すること。

フォームだけ / Widget だけを導入する場合は、不要なブロックを削って渡してください。

3. エージェントに渡す技術仕様（要約）

Web 取得ができないエージェントのために、最低限必要な事実をまとめます。この節をそのまま貼り付けても実装できます。

埋め込みコード

<!-- フォーム: 表示したい位置に <div>、ページに 1 つ <script> -->
<div data-careport-form data-form-id="<FORM_ID>"></div>
<script src="https://cdn.careport.app/v1/form.js" data-key="<API_KEY>"></script>

<!-- Widget: </body> 直前に 1 つ -->
<script
  src="https://cdn.careport.app/v1/widget.js"
  data-key="<API_KEY>"
  data-bot-id="<BOT_ID>"
  data-color="#2563eb"
  data-position="bottom-right"
  data-lang="ja"
></script>

必須の前提

<script> は 1 ページに 1 つ。data-key（cp_…）が無いと動きません。
配信は CDN（https://cdn.careport.app/v1/{form,widget}.js）、送信先 API は https://api.careport.app。
どちらも closed Shadow DOM でレンダリングされ、ホストの CSS と干渉しません。
フォームは読み込み時にページ内の全 [data-careport-form] を自動検出してマウントします。Widget は data-key^="cp_" の <script> を検出して自動起動します。

フレームワーク別の要点

Next.js（App Router）
- フォーム = 対象ページに <div data-careport-form data-form-id> ＋ next/script（strategy="afterInteractive", data-key）
- Widget = ルートレイアウトに next/script（data-key, data-bot-id）
React SPA（Vite / CRA）
- 固定表示は index.html に <script>
- 動的にページ遷移してくるフォームは window.CarePortForm.mount(el) で明示マウント（冪等）
- Widget を動的制御するときは unmount 時に window.CarePort.getInstance()?.destroy()

data 属性（よく使うもの）

フォーム:

要素	属性	必須	説明
`<div>`	`data-careport-form`	✅	マウント対象マーカー（値不要）
`<div>`	`data-form-id`	✅	フォーム ID（UUID）
`<script>`	`data-key`	✅	API キー（`cp_…`）
`<script>`	`data-lang`	—	`ja` / `en`（既定 `ja`）

Widget:

属性	必須	説明	既定
`data-key`	✅	API キー（`cp_…`）	—
`data-bot-id`	—	ボット ID（UUID・実 API 接続に使用）	—
`data-color`	—	アクセントカラー（hex）	`#635BFF`
`data-position`	—	`bottom-right` / `bottom-left`	`bottom-right`
`data-lang`	—	`ja` / `en`	`ja`
`data-auto-open`	—	自動オープンまでの秒数	`0`

送信・通知の流れ（重要）

フォーム送信は https://api.careport.app に直接 POST され、CarePort のチケット / 顧客になります。
あなたのバックエンドは経由しません。 送信時のメール / Slack 通知が必要なら、CarePort 管理画面の通知設定で行います（埋め込み側のコードでは設定しません）。

やってはいけないこと

フォームの色・項目・文言を data 属性やコードで再現しようとしない（管理画面の設定が正・編集すれば再デプロイ不要で反映）。
Widget を意図せず認証必須画面に常駐させない（表示範囲は依頼どおりに限定する）。
cp_live_… を秘密鍵として隠そうとしてビルドを複雑化しない（publishable・露出前提）。

4. 導入後のレビュー観点

エージェントの実装が終わったら、次を確認してください。

フォームが指定した位置に表示され、項目と送信ボタンが出る
送信するとチケットが作られる（CarePort 管理画面で確認。テスト送信は実データになるので注意）
Widget の起動ボタン（FAB）が、指定した表示範囲のページにだけ出る
ブラウザのコンソールに CSP エラーが出ていない

CSP を設定しているサイト: script-src に https://cdn.careport.app、connect-src に https://api.careport.app を許可してください。