web ウィジェットを埋め込む
スクリプトタグ一つで、どんなウェブサイトにもエージェントを設置。バブル、ウィンドウ、全画面の各モードを標準搭載。
基本の埋め込み
<script src="https://chat.agent4.io/ui/embed.js"
data-token="YOUR_SHARE_TOKEN" async></script>ローダーはフローティングのチャットバブル（右下）を注入し、ウィンドウまたは全画面へ展開します。iframe はプラットフォームのオリジンを指すため、あなたのサイトに CORS 設定は不要です。
オプション
| 属性 | 効果 |
|---|---|
data-token | 必須。 console から取得した share token。 |
data-color | ウィジェットのヘッダー／バブルのアクセントカラー。 |
data-position="left" | バブルを右下ではなく左下に配置する。 |
キーボード：Ctrl/⌘ + Shift + F でバブル → ウィンドウ → 全画面を切り替えます。
コマンドパレット（Ask バー）
ドキュメントサイトでよく見る、モダンな「質問する」パターンがお好みですか？embed.js を ask.js に差し替えるだけ——
同じ一行で、他に変更はいりません。
<script src="https://chat.agent4.io/ui/ask.js"
data-token="YOUR_SHARE_TOKEN" async></script>これはスリムな Ask a question バーを注入します。バーをクリックする——またはページ上のどこでも ⌘K / Ctrl+K を押す——と、暗転した背景の上に中央寄せのコマンドパレットとして展開します。Esc または外側のクリックで閉じます。このバーは静的なラベルではありません。そのページで訪問者が尋ねそうな質問を、一つずつタイプ表示します（バブルの推奨質問を支えるのと同じ page playbook から取得されます）。
| 属性 | 効果 |
|---|---|
data-token | 必須。 console から取得した share token。 |
data-color | アクセントカラー。 |
data-position | bottom-center（デフォルト）、bottom-right、または bottom-left。 |
このパレットはバブルとまったく同じエージェント、retrieval、認証を実行します——下記の host-session モードを含めて—— ので、このページの他の内容はそのまま当てはまります。バブルか Ask バーかは console でシェアごとに選べます（Website embed → Chat bubble / Ask bar）。
ドメイン許可リスト
各シェアは allowed_domains リストを持ちます。プラットフォームはそれを frame-ancestors CSP で強制するため、ウィジェットはあなたが列挙したサイト内でのみレンダリングされます。console のシェアで設定します。
認証モード
シェアは次の三つのモードのいずれかで動作します。
- 匿名 — 訪問者はアカウントなしでチャットする。ブラウザごとに固有の空間が与えられる。
- アカウントログイン — 訪問者がプラットフォームのエンドユーザーアカウントでサインインする。履歴と memory がデバイスをまたいで追随する。
- Host session（HMAC） — あなたのバックエンドがユーザーが誰かをウィジェットに伝えるので、ログイン済みユーザーは二度目のログインなしで認識される。
<script src="https://chat.agent4.io/ui/embed.js"
data-token="YOUR_SHARE_TOKEN"
data-uid="user-42"
data-ts="1767139200"
data-sig="HMAC_SHA256(secret, uid + ts)"
async></script>あなたのサーバーはシェアの署名シークレットで data-sig を計算します。プラットフォームはそれを検証し、user-42 を安定したエンドユーザーの身元にマッピングします。
スタンドアロンページ
各シェアは https://chat.agent4.io/s/YOUR_SHARE_TOKEN の全画面ページとしてもアクセスできます——ホスティングするサイトを自分で管理していない場合の、QR コード、メールリンク、広告のランディングページに便利です。