【ボタン設定】チャットボタン設定 各項目の解説(アドバンス)
チャットボタン設定の作成方法・ボタン作成の概念をこのページで解説しています。
チャットボタンの詳細な設定をしたいときはこちらをご確認ください。
- 1 基本操作
- 1.1 前提:リビジョンとボタン設定
- 1.2 リビジョン単位でテスト環境・本番環境に適用
- 1.3 WhatYaのタグが埋め込まれたページでテストをするには?
- 1.4 新規作成
- 1.5 現在WhatYaをご利用のお客さま
- 1.6 ボタン設定の編集
- 1.7 リビジョンの削除
- 1.8 ボタン設定の削除
- 2 ボタンの各種設定
- 2.1 ボタンの種類の設定
- 2.2 表示優先度の設定
- 2.3 ボタンテキスト・画像URL・×ボタンの有効無効
- 2.4 ボタン要素idの設定
- 2.5 ボタンアニメーションの動作と設定
- 2.6 ボタン有効化条件の設定
- 2.7 ボタン有効化条件(除外設定)
- 2.8 除外設定の手順
- 2.9 除外設定を利用した応用方法
- 2.10 ×ボタンで閉じた後に次のボタンを表示させないようにするには
- 2.11 ボタン表示条件の設定
- 2.12 ボタン非表示条件の設定
- 2.13 「チャットを閉じた後の挙動」の設定
- 2.14 「リスト式応答設定の開始地点」の設定
- 3 インポートとエクスポート
基本操作
ここからは操作の流れを解説いたします。
前提:リビジョンとボタン設定
まずチャットボタン設定を開いたときに、一覧に表示されている設定を「リビジョン」と呼びます。
任意のリビジョンをクリックして展開すると、一覧表示される設定を「ボタン設定」と呼びます。
例えば、リビジョンがこの様に2つ設定されていた場合
ツリーで考えるとこのようなイメージになっています。
リビジョン単位でテスト環境・本番環境に適用
反映したいリビジョンの設定を選んで「テスト環境に適用」を行うとテスト環境に反映されます。
※テスト環境とは、弊社が用意したレビュー用の画面で、この画面からボタンの状態をプレビューする事ができます。
WhatYaのタグが埋め込まれたページでテストをするには?
WhatYaのタグが埋め込まれているページにおいては、
設定をテスティングに反映後、御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。
▼設定例:https://ser-solairo.sakura.ne.jp/ec-solairo/ の場合
以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://ser-solairo.sakura.ne.jp/ec-solairo/?_whatya_testing
テスト環境に適用したものに更に「本番環境に適用」を行うと本番環境に反映されます。
※イメージ
ここからは、リビジョンを新規作成してボタン設定を行う手順となります。
「+新しく設定をはじめる」をクリックします。
リビジョンの名前を付けて、ボタン設定を展開します。
展開したらラベル名をつけてボタンの設定を行います。
※ラベル名をつけておくと以下のように複数設定を付けたときに何の設定か解りやすくなるので、名前を付けておくことをおすすめします。設定が完了したら「保存」をクリックします。
「確定」をクリックします。※このタイミングでリビジョンのコメント(名前)も変更できます。
現在ご利用中のWhatYaを維持する必要があります。ご利用中のWhatYaを表示させたい場合は以下ご留意ください。
Note
新規リビジョン作成時にデフォルトで入っているボタン設定を削除もしくは上書きした場合、現在ご利用中のWhatYaが表示されなくなるのでご注意ください。
ご利用中のWhatYaを表示させたい場合は、デフォルトで入っているボタン設定を削除もしくは上書きせずに、そのまま残した状態で新しくボタン設定を追加ください。
保存後に編集したい場合は、編集したいリビジョンを選択して「編集ボタン」をクリックすると編集する事ができます。※編集後は通常の手順同様に保存を押してください。
※編集中で未保存の場合は、画面の一番上に「編集中」と表示されます
適用中一覧からリビジョンは編集できません。
適用中のリビジョンの編集を行いたい場合は「保存済み一覧」から適用中のリビジョンを探し「編集」を行って下さい
以下の手順で不要なリビジョンを削除できます。
削除したいリビジョンをクリックします。
「この設定を削除」を選択します。
「はい」をクリックするとリビジョンが削除されます。
適用中の一覧からリビジョンは削除できません。
適用中のリビジョンの削除を行いたい場合は「保存済み一覧」から適用中のリビジョンを探し「削除」を行って下さい
ボタン設定の削除を使います。こちらは、リビジョンに複数ボタン設定がされていたうちの1つを削除したい場合の手順となります。
編集を押して、一覧を編集モードにすると、右に「ゴミ箱アイコン」が現れます。
削除したいボタン設定のゴミ箱アイコンを押して「はい」を選択すると設定が削除されます。
ボタンの各種設定
ここからは設定どのようにボタンの動作を変更できるかを解説いたします。
ボタンの種類を選択します
管理コンソールから以下5タイプのボタンを設定する事ができます。
通常のボタン
画像+テキスト
画像のみ
吹き出し(左向き)
吹き出し(右向き)
ポップアップ
通常のボタン
装飾の無いデフォルトのボタンが表示されます。
画像+テキスト
画像に設定した場合はデフォルトでは白い四角の中に指定した画像が表示され画面左側に表示されます。ボタンの中にテキストを入れたり、アイコンの位置、背景の白い四角などをCSSで調整できます。
※この機能を利用する場合は、画像URLの指定が必須となります。
※スマートフォンの操作を想定してデフォルトの表示位置を左側にしています。
画像のみ
設定した画像がそのままのサイズで、画面左側に表示されます。
サイズなどCSSでカスタマイズすることを前提としております。
「カーソルをポインターにする」について
「画像のみ」はデフォルトの場合、カーソルが通常の矢印で表示されます。
ポインターに変更する場合は、チェックボックスにチェックを入れてください。
通常の矢印(デフォルト)
ポインター
画像+テキストとの違いについて
| 画像+テキスト | 画像のみ |
---|---|---|
閉じるボタンの有無 | 有り | 無し |
テキストの設定 | 有り | 無し |
サイズの自動調整 | 有り | 無し |
吹き出し(左向き)
左に向いた吹き出しを表示します。テキストは管理画面からいつでも変更可能です。
アイコンの位置や吹き出し、背景の白い丸については、CSSで指定をする事でデザインを調整できます。
※この機能を利用する場合は、画像URLの指定が必須となります。
吹き出し(右向き)
右に向いた吹き出しを表示します。テキストは管理画面からいつでも変更可能です。
アイコンの位置や吹き出し、背景の白い丸については、CSSで指定をする事でデザインを調整できます。
※この機能を利用する場合は、画像URLの指定が必須となります。
ポップアップ
こちらのボタンはポップアップとしてご利用いただけます。
表示させるポップアップの画像とポップアップを押下した先のページのURLを設定することができます。
また、ポップアップを表示させる位置と大きさを指定いただけるので、CSSでの調整は不要です。
ポップアップの詳しい設定方法は以下記事をご参照ください。
【ボタン設定】ポップアップ設定方法について
条件が重複した場合、「表示優先度」の数値が多い方の設定されます。
条件が重複するよくあるケースを例にすると「全ページに表示するアイコン」と「特定のページだけに表示するアイコン」がある場合です。
例えばこのような設定をすると、ページ3の条件が重複します。
この場合は以下のように設定します。
全ページに表示するアイコン → 「1」で設定する
特定のページだけ表示させたいアイコン→「1000」 (多めに設定しておきます)
ボタンの画像・テキスト・×ボタンをこちらで設定できます。
ボタンテキスト
ボタンに表示されるテキストをここで設定します
画像URL
アイコンの画像をここからURLで指定します。
×ボタンの有無
ボタンに「閉じるボタン」を表示するかを設定します。
ボタンのCSSのid名を指定できます。例えばボタン要素idを「button6」と設定した場合、CSSで利用できるボタン要素のidが「button6」となります。
※ここで指定するのはボタンの要素idとなりますので、チャットウィンドウのCSSは従来のままです。
設定した要素id(例:button6)の子要素の部分を変更したい場合は、※CSSの指定例の方法を使うと指定できます。