シナリオの作成・管理

デザイン設定

デザイン設定では、チャットのデザインを設定することができます。

カラー

カラーでは、チャットの各種カラーを設定することができます。

content_04_01.jpg

設定できる項目は以下です。

項目 説明 チャットの箇所
ヘッダ背景色 チャットのタイトルの背景色を変更できます。 __________2021-04-19_15.01.55.png
ヘッダ文字色 チャットのタイトルの文字色を変更できます。
チャット背景色 チャットの背景色を変更できます。 content_04_08.jpg
システム発言背景色 システム側の発言の背景色を変更できます。 content_04_09.jpg
システム発言枠線色 システム側の発言の枠線色を変更できます。
システム発言文字色 システム側の発言の文字色を変更できます。
ユーザー発言背景色 ユーザー側の発言の背景色を変更できます。 content_04_10.jpg
ユーザー発言枠線色 ユーザー側の発言の枠線色を変更できます。
ユーザー発言文字色 ユーザー側の発言の文字色を変更できます。
ボタン背景色 ボタンの背景色を変更できます。 content_04_11.jpg
ボタン枠線色 ボタンの枠線色を変更できます。
ボタン文字色 ボタンの文字色を変更できます。
プレースホルダー文字色 フォームのプレースホルダーの文字色を変更できます。 content_04_12.jpg
フォーム項目背景色 フォームの背景色を変更できます。 content_04_20.jpg
フォーム項目枠線色 フォームの枠線色を変更できます。
フォーム項目文字色 フォームの文字色を変更できます。
フォーム送信ボタン背景色 フォームの送信ボタンの背景色を変更できます。 content_04_13.jpg
フォーム送信ボタン文字色 フォームの送信ボタンの文字色を変更できます。
カルーセル枠線色 カルーセルの枠線色を変更できます。 content_04_14.jpg
カルーセル左右ボタン色 カルーセルの左右ボタン色を変更できます。

色を変更する場合は、カラーフォームをクリックし、カラーパネルで色を指定してください。

content_04_15.jpg

content_04_16.jpg

 

基本設定

基本設定では、チャットの動作を設定することができます。

content_04_04.jpg

 

設定できる項目は以下です。

項目 説明
応答文表示時間(ms) 応答文が表示されるまでの時間をミリ秒で設定できます。
スクロールスピード(ms) スクロールスピードをミリ秒で設定できます。
z-index チャットウィンドウのz-indexを設定できます。

talkmationのチャットが最前面に表示されるように、デフォルトの値は「1000001」が設定されています。
チャットを設置するページにz-indexの値が「1000001」の要素があり、かつtalkmationのチャットを最前面に表示したい場合は、本項目を「1000002」以上の値に設定してください。
※z-indexとは、要素の重なりの順序を数値で指定するCSSのプロパティです。指定した数値が大きい要素ほど最前面に表示されます。
初期表示状態 チャットが設定されているWEBページを表示した際の、チャットの表示状態を設定できます。

【閉じた状態で表示の場合】
チャットのヘッダーのみが表示されます。
【開いた状態で表示の場合】
チャットのヘッダーと最初のメッセージが表示されます。
【非表示の場合】
チャットは表示されません。
※JavaScriptでチャットを表示する記述をすることで、チャットを表示させることができます。JavaScriptの記述については、JavaScript関数リファレンスをご参照ください。
オペレーター画像 チャットのオペレーター画像を設定できます。
設定したい画像のパスを入力してください。
発言アニメーション 応答文のアニメーションを設定できます。

【無効の場合】
アニメーションが無い状態で表示されます。
【有効の場合】
アニメーションが有る状態で表示されます。
発言アニメーションスピード(ms) 発言アニメーションが「有効」の場合、アニメーションのスピードをミリ秒で設定できます。
フォーム入力内容表示 フォームに入力された内容の表示の有無を設定できます。

【無効の場合】
フォームに入力された内容は表示されません。
【有効の場合】
「[フォームの項目名]:[入力された内容]」の形式で、ユーザー側の発言に表示されます。

 

スマホ設定

スマホ設定では、スマートフォン用のチャットの表示状態を設定することができます。

content_04_05.jpg

設定できる項目は以下です。

項目 説明
タイトル チャットのヘッダーに表示する文言を設定できます。
閉じた状態のデザイン 閉じた状態のチャットのデザインを設定できます。

【スマホ表示の場合】
チャットのヘッダーが小さく表示されます。
【PC表示の場合】
チャットのヘッダーが大きく表示されます。
閉じた状態の右からの位置 閉じた状態のチャットの右からの位置を設定できます。
閉じた状態の下からの位置 閉じた状態のチャットの下からの位置を設定できます。
開いた状態の右からの位置 開いた状態のチャットの右からの位置を設定できます。
開いた状態の下からの位置 開いた状態のチャットの下からの位置を設定できます。
横幅 チャットの横幅を設定できます。
高さ チャットの高さを設定できます。

 

PC設定

PC設定では、スマートフォン用のチャットの表示状態を設定することができます。

content_04_06.jpg

設定できる項目は以下です。

項目 説明
タイトル チャットのヘッダーに表示する文言を設定できます。
閉じた状態のデザイン 閉じた状態のチャットのデザインを設定できます。

【スマホ表示の場合】
チャットのヘッダーが小さく表示されます。
【PC表示の場合】
チャットのヘッダーが大きく表示されます。
閉じた状態の右からの位置 閉じた状態のチャットの右からの位置を設定できます。
閉じた状態の下からの位置 閉じた状態のチャットの下からの位置を設定できます。
開いた状態の右からの位置 開いた状態のチャットの右からの位置を設定できます。
開いた状態の下からの位置 開いた状態のチャットの下からの位置を設定できます。
横幅 チャットの横幅を設定できます。
高さ チャットの高さを設定できます。

 

LINE LIFF設定

LINE LIFF設定設定では、LINE用のチャットの表示状態を設定することができます。

content_04_17.jpg

設定できる項目は以下です。

項目 説明 チャットの箇所
タイトル 画面のヘッダーに表示する文言を設定できます。 content_04_18.jpg
talkmationタイトルバー チャットのヘッダーの表示状態を設定できます。
※チャットのヘッダーには、「スマホ設定」の「タイトル」に設定した内容が表示されます。
content_04_19.jpg

この記事の目次

このセクションの記事

シナリオの作成・管理