> ## Documentation Index > Fetch the complete documentation index at: https://docs-agents.fpt.ai/llms.txt > Use this file to discover all available pages before exploring further. # Live Chat チャネル > 自社サイトに Agent を載せる。Console で設定し、埋め込みコードを貼り、リンクで共有し、見た目を整え、Visitor API で自前の画面も作れます Live Chat は **ウェブサイト** のチャネルです。チャット画面はプラットフォームが用意し、Console で設定して、ページにコードを貼り付けます。あとは顧客がそのチャット画面から直接 Agent と話します。 設定パネルは Agent の **チャネル** タブから、**Web ウィジェット** のタイルをクリックして開きます。パネルの名前は「Web クライアント設定」です。 ## Console でチャネルを設定する Console を開き、アカウントでサインインします。 自社サイトで顧客に応答する Agent です。 **チャネル** は Agent のナビゲーションバーにあります。 右側に「Web クライアント設定」のパネルが開きます。 **設定** タブと **ウィジェットのカスタマイズ** タブです。詳しくは下の 2 つの節で。 チャネルが作られ、すぐに動きはじめます。Web ウィジェットのタイルが **設定済み** に変わります。 最初の保存がチャネルを作ります。それまでチャネルは存在しないので、共有リンク、QR コード、埋め込みコードは一度保存したあとにはじめて現れます。 **設定** と **ウィジェットのカスタマイズ** は 1 つの下書きと 1 つの保存ボタンを共有します。保存するとチャネル設定全体が上書きされるので、両方のタブを書き終えてから保存してください。片方ずつ保存するのは避けます。 ## 設定タブ Web ウィジェットの設定タブ ### 許可ドメイン このチャネルを使ってよいサイトのドメインの一覧です。20 件まで、1 件あたり 253 文字まで。1 件につき `https://shop.example.com` のようなドメインを 1 つ書き、後ろにパスは付けません。`*` を使うとすべてのドメインを許可します。 下で説明する埋め込みコードを貼るだけなら、ここは空のままで構いません。ドメインを並べる必要があるのは、技術チームが自前のチャット画面を作る場合で、それは [API 連携](/ja/api-integration) のページで扱います。 **ドメインを追加する** 一覧に新しい入力欄が現れます。 たとえば `https://shop.company.com`。パスは付けません。 保存した時点で反映されます。 **ドメインを編集する**: 一覧でクリックして書き換え、**設定を保存** をクリックします。 **ドメインを削除する**: 行の端の削除アイコンをクリックし、**設定を保存** をクリックします。そのドメインのサイトからはセッションを作れなくなります。 ### 共有リンク、QR コード、埋め込みコード この 3 つは最初の保存のあとにだけ存在します。保存したら設定タブに戻ってコピーしてください。 ## ウィジェットを自社サイトに埋め込む 設定タブからコードをコピーし、チャット画面を出したいすべてのページで、閉じ `` タグの直前に貼り付けます。 ```html theme={null} ``` このコードだけで、隅にチャットボタンが作られます。ほかの HTML も CSS も要らず、ウィジェットは外部ライブラリを読み込みません。 ## リンクと QR コードで共有する 何も埋め込みたくないとき、たとえばリンクをメールで送る、チラシに QR コードを印刷する、カウンターに置く、といった場合は、設定タブにチャット画面を全画面で開くリンクがあります。 ```text theme={null} https://console-agents.fpt.ai/chat-widget/?connectionKey=wgt_abc123&locale=ja ``` 隣の QR コードは、まさにそのリンクを符号化したものです。チャットのページは端末に合わせて表示されるので、パソコンでもスマートフォンでも使えます。 ## ウィジェットのカスタマイズタブ このタブには 5 つのサブタブがあり、右側のプレビューパネルには **最小化**、**ようこそ**、**チャット** の 3 つの状態が出ます。変更はすぐプレビューに反映され、すでに貼ってあるコードにも即座に効きます。顧客がページを開くたびに、ウィジェットが設定を読み直すためです。 変更しなかった項目は保存されないので、プラットフォームが既定の配色を更新したときは、そのチャネルにも反映されます。 ### テーマ - 配色 ウィジェットの配色カスタマイズ 値はすべて `#rrggbb` です。形式の誤りは保存時に弾かれます。 | 項目 | 説明 | 既定値 | | - | - | - | | `theme.background` | チャット画面の背景 | `#FFFFFF` | | `theme.brand` | ブランドカラー。チャット画面のヘッダーとチャットボタンの背景 | `#203BDC` | | `theme.brand_text` | ブランドカラーの上に載る文字とアイコンの色 | `#FFFFFF` | | `theme.customer_bubble` | 顧客のメッセージの吹き出しの背景 | `#203BDC` | | `theme.customer_text` | 顧客の吹き出しの文字色 | `#FFFFFF` | | `theme.bot_bubble` | Agent のメッセージの吹き出しの背景 | `#F1F5F9` | | `theme.bot_text` | Agent の吹き出しの文字色 | `#020817` | | `theme.primary` | 全体のアクセントカラー | `#203BDC` | | `theme.header_style` | ヘッダーの塗り方。`solid` か `gradient` | `solid` | **既定に戻す** をクリックすると、すべての色が元に戻ります。 ブランドの正確な 16 進値は自社の VI ガイドラインから取り、文字と背景のコントラストを確認して、読みやすさを保ってください。 ### 一般 ウィジェットの一般設定 | 項目 | 説明 | | - | - | | `name` | チャット画面の上部とチャットページに表示される名前 | | `avatar_url` | 画像。PNG か JPEG、256 x 256 px 以上、2 MB 以下。空にすると Agent 名の頭文字が使われます | | `theme.position` | チャットボタンを置く隅。`left` か `right` | | `locale_default` | 既定の言語。`vi`、`en`、`ja`、`id`、`zh` | | `launcher.greeting` | 画面が閉じているとき、チャットボタンの横の吹き出しに出るあいさつ。200 文字まで。空にすると吹き出しは出ません。ようこそ画面の見出しである `welcome.title` とは別物です | | `turnstile_sitekey` | セッション作成時にボットを止める Cloudflare Turnstile のキー。空ならオフ | `turnstile_sitekey` を未設定のままにせず空文字列にすると、どの顧客も通れないボット判定が有効になります。 ウェブサイトのチャネルに、無操作時間の設定はもうありません。ウィジェットの会話は 24 時間で固定です。それより長く間が空くと、顧客の次のメッセージは新しい会話になります。無操作時間は API チャネルでは引き続き設定できます。[API 連携](/ja/api-integration) を参照してください。 ### スターター - 質問の候補 質問の候補 質問の候補は、顧客が最初のメッセージを送る前にボタンとして表示されます。6 件まで、1 件 120 文字まで。 新しい入力欄が現れます。 顧客が実際に使う言い方で書きます。たとえば「注文状況を確認したい」。 質問をクリックすると編集でき、行の端の削除アイコンで取り除けます。 1 件も設定していないと「質問の候補はまだありません」と表示されます。 ### ようこそ画面 ようこそ画面 | 項目 | 型 | 説明 | | - | - | - | | `welcome.title` | string | ようこそ画面の見出し | | `welcome.subtitle` | string | 見出しの下の短い一文 | | `welcome.button_text` | string | チャットを始めるボタンのラベル | | `welcome.placeholder` | string | 顧客名の入力欄のプレースホルダー | | `welcome.hide_greeting` | boolean | オンにするとようこそ画面を飛ばして、すぐチャットに入ります | | `welcome.guest_mode` | boolean | 既定でオン。オフにするとチャット前に名前を尋ね、その名前を保存して Agent が呼びかけます | **既定に戻す** をクリックすると、文言の項目が初期状態に戻ります。 ### チャット画面 チャット画面の設定 | 項目 | 型 | 説明 | | - | - | - | | `chat.placeholder` | string | メッセージ入力欄のプレースホルダー。空にするとプラットフォームの翻訳済みの文言が使われます | | `chat.disclaimer` | string | 入力欄の横に出る、AI 生成であることの注意書き | | `chat.powered_by` | string | チャット画面のフッターの行。既定は「Powered by FPT.AI」。空にすると非表示になります | | `chat.show_logo_header` | boolean | チャット画面の上部にアイコンを出す。既定でオン | | `chat.show_citations` | boolean | 回答の下に出典カードを出す。既定でオン | | `chat.allow_attachments` | boolean | 顧客が添付を送れるようにする。既定でオン | AI の注意書きは消さないでください。話し相手が人間の担当者ではなく Agent であることを伝えるものであり、AI の透明性に関するルールを守るうえでも必要です。 ## 設定の編集と削除 チャネルタブから Web ウィジェットのタイルをもう一度開き、必要なところを変えて **設定を保存** をクリックします。変更は、コードを貼ったすべての場所にすぐ反映されます。貼り直す必要はありません。 **キャンセル** をクリックすると、保存せずにパネルを閉じます。 Agent ビルダータブの **Publish** ダイアログを開き、**Web ウィジェット** のチェックを外して公開します。ウィジェットの設定は残ります。 チャネル設定を削除すると Console から消え、すぐに応答が止まります。 チャネルを削除すると、ページ上のウィジェットには「このチャネルは利用できません」という画面が出ます。これまでに作られた顧客と会話はすべて残り、何も消えません。古い接続キーは再利用できません。ウェブサイトのチャネルを作り直すと新しい接続キーが発行されるので、コードを貼り直すことになります。 ## 次に読むもの 同じチャット画面を Android と iOS のアプリに組み込みます。 顧客向けのチャット画面がすでにある場合に。 エラーコード、システムの上限、本番前チェックリスト。 This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.