『チャット画面のカスタマイズ』内の各項目より、表示位置、フォントサイズ、色設定などチャットウィンドウの表示設定を細かくカスタマイズすることができます。
※ チャットウィンドウのカスタマイズ機能は、公開先が「Web」の場合のみ利用可能です。
機能概要
タイトル
チャットウィンドウのタイトルを変更できます。
表示位置
チャットウィンドウの表示位置を変更できます。
- 右寄せ
- 左寄せ
- フレーム埋め込み
フレーム埋め込みでは、チャットウィンドウをiframe要素として、HTML上の任意の位置に埋め込むことができます。
埋め込みチャットタグのwidth属性とheight属性の数値を指定することで、チャットウィンドウのサイズ変更も可能です。
また、『会話開始ボタンを表示する』を設定することで、チャットウィンドウ表示時にワンクッション挟む、もしくは表示と同時にチャットを開始するかを選択できます。
チャット呼び出しボタン
タイトルヘッダー部分を従来のバー表示方式以外に、標準のアイコン画像（吹き出しアイコン）や、ユーザーがアップロードした画像をチャット呼び出しボタンとして設定できます。
任意の画像をアップロードして利用することで、UIデザインの幅が広がります。
また、埋め込み先ページからJavaScriptを用いることで、チャットウィンドウの開閉操作も可能です。
- 「カスタム画像」を選択した場合
ファイルを選択ボタンが表示されますので、対応形式の画像をアップロードしてください。
対応画像形式 PNG, JPEG, GIF 画像サイズ 幅48px × 高さ48px ～ 幅400px × 高さ200px 容量上限 3MB - 「非表示（JavaScriptを用いて表示切替）」を選択した場合
「チャットウィンドウを開く」、「チャットウィンドウを閉じる」、「チャットウィンドウの開閉」それぞれのJavaScriptサンプルが表示されますので、埋め込み先ページの該当箇所に利用してください。
また、プレビューより各動作の確認ができます。
フォントサイズ
チャットウィンドウのタイトル、チャット内のフォントサイズを-3から+3までの7段階で設定できます。
カラーテーマ
チャットウィンドウのタイトル、背景、吹き出し等の色をテーマに合わせて変更できます。
- 「カスタム」を選択した場合
- それぞれの部品の背景色、文字色を細かく設定できます。
変更内容は、『チャット画面のカスタマイズ』内のプレビューより確認できます。
- 各項目の”
（背景色）”、”
（文字色）”をクリックすることで、カラーパレットが表示され、任意の色をそれぞれ設定できます。
- 各項目の色を初期状態に戻したい場合は、”デフォルトカラーに戻す“ボタンをクリックしてください。
※ 全項目の色が初期状態に戻ります。
- それぞれの部品の背景色、文字色を細かく設定できます。
チャットウィンドウの高さを埋め込み先サイトに合わせる
チャットウィンドウの高さを指定できます。
※ スマートフォン表示の場合は、チェックの有無に関わらず全画面表示となります。
チャットボットを全画面で公開したい場合は、【チャットボットを全画面で公開したい】 をご覧ください。
| 有効 | ブラウザの高さに合わせて、チャットウィンドウの高さを自動調整します。 |
|---|---|
| 無効 | ブラウザの高さに関わらず、チャットウィンドウの高さは固定となります。 |
プレビュー
各項目で変更した内容をプレビュー画面で確認できます。
手順
- 左メニューの『アプリケーション一覧』から、チャットウィンドウをカスタマイズしたいWeb公開アプリケーションを選択してください。
- 『チャット画面のカスタマイズ』より、チャットウィンドウのカスタマイズを行ってください。
- チャットウィンドウのカスタマイズ後、”保存と埋め込みタグ生成“ボタンをクリックして、内容を保存してください。
- カスタマイズ後のタグが生成されますので、”コピー“ボタンをクリックして、タグの内容をコピーし、htmlファイルに再度埋め込み直してください。
タグ埋め込みの詳細については、【WEBサイトに公開】、【WordPressに公開】をご覧ください。
- 「チャット呼び出しボタン」のカスタム画像を変更した場合のみ、カスタム画像の反映が必要となるため、”カスタム画像の反映“ボタンをクリックしてください。
