Live Chat チャネル

Live Chat は ウェブサイト のチャネルです。チャット画面はプラットフォームが用意し、Console で設定して、ページにコードを貼り付けます。あとは顧客がそのチャット画面から直接 Agent と話します。

設定パネルは Agent の チャネル タブから、Web ウィジェット のタイルをクリックして開きます。パネルの名前は「Web クライアント設定」です。

Console でチャネルを設定する

FPT AI Agent Platform にサインインする

Console を開き、アカウントでサインインします。

設定する Agent を選ぶ

自社サイトで顧客に応答する Agent です。

チャネルタブを開く

チャネル は Agent のナビゲーションバーにあります。

Web ウィジェットのタイルをクリックする

右側に「Web クライアント設定」のパネルが開きます。

2 つのタブを埋める

設定タブと ウィジェットのカスタマイズ タブです。詳しくは下の 2 つの節で。

設定を保存をクリックする

チャネルが作られ、すぐに動きはじめます。Web ウィジェットのタイルが 設定済み に変わります。

最初の保存がチャネルを作ります。それまでチャネルは存在しないので、共有リンク、QR コード、埋め込みコードは一度保存したあとにはじめて現れます。

設定と ウィジェットのカスタマイズ は 1 つの下書きと 1 つの保存ボタンを共有します。保存するとチャネル設定全体が上書きされるので、両方のタブを書き終えてから保存してください。片方ずつ保存するのは避けます。

設定タブ

許可ドメイン

このチャネルを使ってよいサイトのドメインの一覧です。20 件まで、1 件あたり 253 文字まで。1 件につき https://shop.example.com のようなドメインを 1 つ書き、後ろにパスは付けません。* を使うとすべてのドメインを許可します。

下で説明する埋め込みコードを貼るだけなら、ここは空のままで構いません。ドメインを並べる必要があるのは、技術チームが自前のチャット画面を作る場合で、それは API 連携のページで扱います。

ドメインを追加する

+ ドメインを追加をクリックする

一覧に新しい入力欄が現れます。

ドメインを入力する

たとえば https://shop.company.com。パスは付けません。

設定を保存をクリックする

保存した時点で反映されます。

ドメインを編集する: 一覧でクリックして書き換え、設定を保存 をクリックします。 ドメインを削除する: 行の端の削除アイコンをクリックし、設定を保存 をクリックします。そのドメインのサイトからはセッションを作れなくなります。

共有リンク、QR コード、埋め込みコード

この 3 つは最初の保存のあとにだけ存在します。保存したら設定タブに戻ってコピーしてください。

ウィジェットを自社サイトに埋め込む

設定タブからコードをコピーし、チャット画面を出したいすべてのページで、閉じ </body> タグの直前に貼り付けます。

<script
  src="https://console-agents.fpt.ai/chat-widget/chat-widget.iife.js"
  data-connection-key="wgt_abc123"
  data-workspace-id="1"
  data-agent-id="5"
  data-base-url="https://console-agents.fpt.ai/direct-bff"
  data-locale="ja"
  data-brand-color="#0B57D0"
  data-brand-text="#FFFFFF"></script>

このコードだけで、隅にチャットボタンが作られます。ほかの HTML も CSS も要らず、ウィジェットは外部ライブラリを読み込みません。

リンクと QR コードで共有する

何も埋め込みたくないとき、たとえばリンクをメールで送る、チラシに QR コードを印刷する、カウンターに置く、といった場合は、設定タブにチャット画面を全画面で開くリンクがあります。

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 連携を参照してください。

スターター - 質問の候補

質問の候補は、顧客が最初のメッセージを送る前にボタンとして表示されます。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 から消え、すぐに応答が止まります。

チャネルを削除すると、ページ上のウィジェットには「このチャネルは利用できません」という画面が出ます。これまでに作られた顧客と会話はすべて残り、何も消えません。古い接続キーは再利用できません。ウェブサイトのチャネルを作り直すと新しい接続キーが発行されるので、コードを貼り直すことになります。

次に読むもの

モバイル SDK

同じチャット画面を Android と iOS のアプリに組み込みます。

API 連携

顧客向けのチャット画面がすでにある場合に。

技術付録

エラーコード、システムの上限、本番前チェックリスト。

紹介

FPT AI Console

Console でチャネルを設定する