Widget
データ属性リファレンス
CarePort Widget の script タグで指定できる data-* 属性の一覧
<script> タグに data-* 属性を付けることで、ウィジェットの外観や挙動をカスタマイズできます。すべての属性は JavaScript API のオプションにも対応しています。
必須属性
| 属性 | 説明 | 例 |
|---|---|---|
data-key | API キー（cp_live_ または cp_test_ で始まる）。この属性がないとウィジェットは起動しません。 | cp_live_xxxx |
補足: 自動初期化は
script[data-key^="cp_"]セレクタで対象スクリプトを検出します。そのためdata-keyは自動起動の起点でもあります。
外観
| 属性 | 対応オプション | 値 | デフォルト |
|---|---|---|---|
data-color | accentColor | アクセントカラー（hex） | #635BFF |
data-position | position | bottom-right / bottom-left | bottom-right |
data-lang | language | ja / en | ja |
data-welcome | welcomeMessage | ウェルカムメッセージ | こんにちは！… |
data-quick-replies | quickReplies | カンマ区切りの候補文字列 | （なし） |
data-z-index | zIndex | 重なり順（数値） | 999999 |
data-hide-branding | hideBranding | true で「Powered by」を非表示（Pro+） | false |
挙動
| 属性 | 対応オプション | 値 | デフォルト |
|---|---|---|---|
data-bot-id | botId | ボット ID（UUID）。実 API 接続に使用 | （なし） |
data-auto-open | autoOpenDelay | 自動オープンまでの秒数（0 で無効） | 0 |
注意:
data-auto-openは秒で指定します（内部でミリ秒に変換されます）。data-auto-open="3"で 3 秒後に自動オープンします。
高度な接続設定
通常は管理画面が発行するスニペットで設定済みのため、手動で指定する必要はありません。
| 属性 | 対応オプション | 説明 |
|---|---|---|
data-api-url | apiUrl | API サーバー URL（CarePort Cloud Run API） |
data-supabase-url | supabaseUrl | Supabase プロジェクト URL |
data-anon-key | supabaseAnonKey | Supabase Anon Key |
使用例
<script
src="https://cdn.careport.app/v1/widget.js"
data-key="cp_live_xxxxxxxxxxxxxxxx"
data-bot-id="00000000-0000-0000-0000-000000000000"
data-color="#10b981"
data-position="bottom-left"
data-lang="en"
data-welcome="How can we help you today?"
data-quick-replies="Pricing, Book a demo, Support"
data-auto-open="5"
></script>quickReplies のように複数値を取る属性、ユーザー情報（user）やコールバック（onMessage など）を渡したい場合は、データ属性ではなく JavaScript API を使用してください。