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