シナリオの作成・管理
デザイン設定
デザイン設定では、チャットのデザインを設定することができます。
カラー
カラーでは、チャットの各種カラーを設定することができます。
| 項目 | 説明 | チャットの箇所 |
|---|---|---|
| ヘッダ背景色 | チャットのタイトルの背景色を変更できます。 | |
| ヘッダ文字色 | チャットのタイトルの文字色を変更できます。 | |
| チャット背景色 | チャットの背景色を変更できます。 | |
| システム発言背景色 | システム側の発言の背景色を変更できます。 | |
| システム発言枠線色 | システム側の発言の枠線色を変更できます。 | |
| システム発言文字色 | システム側の発言の文字色を変更できます。 | |
| ユーザー発言背景色 | ユーザー側の発言の背景色を変更できます。 | |
| ユーザー発言枠線色 | ユーザー側の発言の枠線色を変更できます。 | |
| ユーザー発言文字色 | ユーザー側の発言の文字色を変更できます。 | |
| ボタン背景色 | ボタンの背景色を変更できます。 | |
| ボタン枠線色 | ボタンの枠線色を変更できます。 | |
| ボタン文字色 | ボタンの文字色を変更できます。 | |
| プレースホルダー文字色 | フォームのプレースホルダーの文字色を変更できます。 | |
| フォーム項目背景色 | フォームの背景色を変更できます。 | |
| フォーム項目枠線色 | フォームの枠線色を変更できます。 | |
| フォーム項目文字色 | フォームの文字色を変更できます。 | |
| フォーム送信ボタン背景色 | フォームの送信ボタンの背景色を変更できます。 | |
| フォーム送信ボタン文字色 | フォームの送信ボタンの文字色を変更できます。 | |
| カルーセル枠線色 | カルーセルの枠線色を変更できます。 | |
| カルーセル左右ボタン色 | カルーセルの左右ボタン色を変更できます。 |
色を変更する場合は、カラーフォームをクリックし、カラーパネルで色を指定してください。
基本設定
基本設定では、チャットの動作を設定することができます。
| 項目 | 説明 |
|---|---|
| 応答文表示時間(ms) | 応答文が表示されるまでの時間をミリ秒で設定できます。 |
| スクロールスピード(ms) | スクロールスピードをミリ秒で設定できます。 |
| z-index | チャットウィンドウのz-indexを設定できます。 ecforce chatのチャットが最前面に表示されるように、デフォルトの値は「1000001」が設定されています。 チャットを設置するページにz-indexの値が「1000001」の要素があり、かつecforce chatのチャットを最前面に表示したい場合は、本項目を「1000002」以上の値に設定してください。 ※z-indexとは、要素の重なりの順序を数値で指定するCSSのプロパティです。指定した数値が大きい要素ほど最前面に表示されます。 |
| 初期表示状態 | チャットが設定されているWEBページを表示した際の、チャットの表示状態を設定できます。 【閉じた状態で表示の場合】 チャットのヘッダーのみが表示されます。 【開いた状態で表示の場合】 チャットのヘッダーと最初のメッセージが表示されます。 【非表示の場合】 チャットは表示されません。 |
| オペレーター画像 | チャットのオペレーター画像を設定できます。 設定したい画像のパスを入力してください。 |
| 発言アニメーション | 応答文のアニメーションを設定できます。 【無効の場合】 アニメーションが無い状態で表示されます。 【有効の場合】 アニメーションが有る状態で表示されます。 |
| 発言アニメーションスピード(ms) | 発言アニメーションが「有効」の場合、アニメーションのスピードをミリ秒で設定できます。 |
| フォーム入力内容表示 | フォームに入力された内容の表示の有無を設定できます。 【無効の場合】 フォームに入力された内容は表示されません。 【有効の場合】 「[フォームの項目名]：[入力された内容]」の形式で、ユーザー側の発言に表示されます。 |
スマホ設定
スマホ設定では、スマートフォン用のチャットの表示状態を設定することができます。
| 項目 | 説明 |
|---|---|
| タイトル | チャットのヘッダーに表示する文言を設定できます。 |
| 閉じた状態のデザイン | 閉じた状態のチャットのデザインを設定できます。 【スマホ表示の場合】 チャットのヘッダーが小さく表示されます。 【PC表示の場合】 チャットのヘッダーが大きく表示されます。 |
| 閉じた状態の右からの位置(css) | 閉じた状態のチャットの右からの位置を設定できます。 |
| 閉じた状態の下からの位置(css) | 閉じた状態のチャットの下からの位置を設定できます。 |
| 開いた状態の右からの位置(css) | 開いた状態のチャットの右からの位置を設定できます。 |
| 開いた状態の下からの位置(css) | 開いた状態のチャットの下からの位置を設定できます。 |
| 横幅(css) | チャットの横幅を設定できます。 |
| 高さ(css) | チャットの高さを設定できます。 |
| オペレーター発言横幅(css) | オペレーターの吹き出しの幅を設定できます。 |
| ユーザー発言横幅(css) | ユーザーの吹き出しの幅を設定できます。 |
PC設定
PC設定では、スマートフォン用のチャットの表示状態を設定することができます。
| 項目 | 説明 |
|---|---|
| タイトル | チャットのヘッダーに表示する文言を設定できます。 |
| 閉じた状態のデザイン | 閉じた状態のチャットのデザインを設定できます。 【スマホ表示の場合】 チャットのヘッダーが小さく表示されます。 【PC表示の場合】 チャットのヘッダーが大きく表示されます。 |
| 閉じた状態の右からの位置(css) | 閉じた状態のチャットの右からの位置を設定できます。 |
| 閉じた状態の下からの位置(css) | 閉じた状態のチャットの下からの位置を設定できます。 |
| 開いた状態の右からの位置(css) | 開いた状態のチャットの右からの位置を設定できます。 |
| 開いた状態の下からの位置(css) | 開いた状態のチャットの下からの位置を設定できます。 |
| 横幅(css) | チャットの横幅を設定できます。 |
| 高さ(css) | チャットの高さを設定できます。 |
| オペレーター発言横幅(css) | オペレーターの吹き出しの幅を設定できます。 |
| ユーザー発言横幅(css) | ユーザーの吹き出しの幅を設定できます。 |
LINE LIFF設定
LINE LIFF設定設定では、LINE用のチャットの表示状態を設定することができます。
| 項目 | 説明 | チャットの箇所 |
|---|---|---|
| タイトル | 画面のヘッダーに表示する文言を設定できます。 | |
| ecforce chatタイトルバー | チャットのヘッダーの表示状態を設定できます。 ※チャットのヘッダーには、「スマホ設定」の「タイトル」に設定した内容が表示されます。 |
この記事の目次
このセクションの記事