メインコンテンツまでスキップ

チャットウィンドウを自社サイトに組み込みたい

はじめに​

本書では、チャットウィンドウをお客様の管理サイト内に組み込むための手順を説明します。
この手順を実施することで、お客様の管理サイト内にチャットウィンドウを表示し、チャットボットを利用した質問を行うことが可能になります。

以下の手順を順に実施することで、チャットウィンドウをお客様の管理サイトに組み込むことができます。

  • 管理画面側の設定

  • お客様の管理サイト側の設定

実施後のイメージは以下の通りです。アイコンをクリックするとチャットウィンドウの表示/非表示を切り替えることができます。

操作説明​

管理画面での設定​

管理画面でチャットウィンドウの設定を行います。

  • 管理画面を開きます。

  • 左のメニューから「設定」をクリックします。

  • 「チャットウィンドウ設定」タブをクリックします。

次に、以下の手順を実施してチャットウィンドウ設置用のコードを生成し、コードをコピーします。

  • 親のフレームのドメイン名入力欄に、お客様の管理サイトのドメイン名を入力します。

  • 反映ボタンをクリックして設定を反映します。

  • 複製ボタンをクリックしてコードをコピーし、文字列を控えます。

お客様の管理サイト側の設定​

前項にて控えたコードを、お客様の管理サイトのHTMLファイルの body タグ内に貼り付けます。

<body>
  ...
  (省略)
  ...
  <!-- ここに貼り付ける -->
</body>

コード内にアイコンのパスを指定する箇所があるので、お好みのアイコンを用意し、それに対するパスを記述します。

  • buttonタグ > imgタグ > src属性
<button ... ><img src="/images/icon.png" ... /></button>

※アイコンのサイズは「55ピクセル x 55ピクセル」を推奨しています。他のサイズのものを使用する場合には、チャットウィンドウの表示位置を変更する必要があるため、以下の部分の数値を調整し、表示を確認してください。

  • iframeタグ > style属性
<iframe ... style=" ... bottom: 122px; right: 38px; ... "></iframe>

以上で、お客様の管理サイト内にチャットウィンドウを表示することができます。

その他留意点（Tips）​

前提​

チャットウィンドウをお客様の管理サイトに組み込むためには、チャットウィンドウ設置機能が有効である必要があります。本機能を有効化する場合はサービス提供会社に連絡し依頼してください。

ログイン機能をOFFにする​

ログイン機能がONの状態では、チャットウィンドウを表示した際に初めにログイン画面が表示されます。
ログイン機能をOFFにするには、サービス提供会社に連絡してください。

ユーザーとワークスペースを指定する​

チャットウィンドウ機能利用時にユーザーとワークスペースを指定したい場合は、以下の手順を実施してください。

  • 専用のユーザーとワークスペースを作成します。
    ※ここでは作成方法は省略します。

  • 管理画面左側メニューから設定画面に遷移し「基本設定」タブをクリックします。

  • 「チャット画面」のURLパラメータ指定に任意の文字列を入力します。

  • 反映ボタンをクリックします。

次に、お客様の管理サイトのHTMLファイルに埋め込んだ「チャットウィンドウ設置用のコード」を修正します。
修正箇所は iframe タグ内の src 属性で、URLの末尾に以下の文字列を追加します。

?[URLパラメータ指定(ユーザーID)]=[事前に作成したユーザーのID]&[URLパラメータ指定(ワークスペース)]=[事前に作成したワークスペースの名称]

修正例は以下の通りです。

<iframe id="chatWindow" src="https://tenant_name.cbx.ai/chat/index.js?userid=user01&workspace=workspace01" ...(省略) />

ワークスペースを固定化する​

チャット画面にてFAQカテゴリ（ワークスペース）を変更できないようにするには、以下の手順を実施してください。

  • 管理画面左側メニューから設定画面に遷移し「画面表示設定」タブをクリックします。

  • 「各種設定」のワークスペース表示/非表示をOFF（非表示）に変更します。

  • 反映ボタンをクリックします。