チャットボタン設定の作成方法・ボタン作成の概念をこのページで解説しています。
...
まずチャットボタン設定を開いたときに、一覧に表示されている設定を「リビジョン」と呼びます。
...
任意のリビジョンをクリックして展開すると、一覧表示される設定を「ボタン設定」と呼びます。
...
WhatYaのタグが埋め込まれているページにおいては、
設定をテスティングに反映後、御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。
...
以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://ser-solairo.sakura.ne.jp/ec-solairo/?_whatya_testing
テスト環境に適用したものに更に「本番環境に適用」を行うと本番環境に反映されます。
...
ここからは、リビジョンを新規作成してボタン設定を行う手順となります。
「＋新しく設定をはじめる」をクリックします。
リビジョンの名前を付けて、ボタン設定を展開します。
展開したらラベル名をつけてボタンの設定を行います。
※ラベル名をつけておくと以下のように複数設定を付けたときに何の設定か解りやすくなるので、名前を付けておくことをおすすめします。
設定が完了したら「保存」をクリックします。
「確定」をクリックします。※このタイミングでリビジョンのコメント（名前）も変更できます。
...
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
現在WhatYaをご利用のお客さま |
現在ご利用中のWhatYaを維持する必要があります。ご利用中のWhatYaを表示させたい場合は以下ご留意ください。
...
Note
新規リビジョン作成時にデフォルトで入っているボタン設定を削除もしくは上書きした場合、現在ご利用中のWhatYaが表示されなくなるのでご注意ください。
...
ご利用中のWhatYaを表示させたい場合は、デフォルトで入っているボタン設定を削除もしくは上書きせずに、そのまま残した状態で新しくボタン設定を追加ください。
...
| 情報 |
|---|
ボタン設定の編集 |
保存後に編集したい場合は、編集したいリビジョンを選択して「編集ボタン」をクリックすると編集する事ができます。※編集後は通常の手順同様に保存を押してください。
...
| 情報 |
|---|
リビジョンの削除 |
以下の手順で不要なリビジョンを削除できます。
削除したいリビジョンをクリックします。
「この設定を削除」を選択します。
「はい」をクリックするとリビジョンが削除されます。
...
| 注意 |
|---|
本番・テスト環境のリビジョンは削除できません |
適用中の一覧からリビジョンは削除できません。
...
ボタン設定の削除を使います。こちらは、リビジョンに複数ボタン設定がされていたうちの１つを削除したい場合の手順となります。
...
編集を押して、一覧を編集モードにすると、右に「ゴミ箱アイコン」が現れます。
削除したいボタン設定のゴミ箱アイコンを押して「はい」を選択すると設定が削除されます。
...
...
ボタンの各種設定
ここからは設定どのようにボタンの動作を変更できるかを解説いたします。
...
例えばこのような設定をすると、ページ３の条件が重複します。
...
この場合は以下のように設定します。
全ページに表示するアイコン → 「1」で設定する
特定のページだけ表示させたいアイコン→「1000」 （多めに設定しておきます）
...
| 情報 |
|---|
ボタンテキスト・画像URL・×ボタンの有効無効 |
...
| コード ブロック |
|---|
/*button6設定 ここから */
div#button6 > div {
right: 10px;
bottom: 55px;
position: fixed;
max-width: 200px;
}
/* svgの色 */
div#button6 > div > div >button > span > svg {
color:#ffffff;
}
/* <ボタン → ×ボタン */
div#button6 > div > div > button > span > svg > path{
d: path("M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z");
}
/* ツールバーカラー */
div#button6 > div > div {
background-color: #000000;
padding: 1px;
}
/* ツールバー文字列 */
div#button6 > div > div > p {
color: rgba(245, 245, 245, 0.9);
font-size: 0.75rem;
}
/*button6設定 ここまで */
|
...
補足：「×ボタン」に変更するCSSサンプル
画像タイプの閉じるボタンは、デフォルトでは下記のように「＜」マークとなっております。
デフォルトの「＜」から「×」ボタンに変更したい場合は、CSSでデザイン変更いただきます。
...
下記、サンプルCSSです。
こちらのCSSをベンダーさまにお渡しし、デザイン変更をご依頼ください。
| 注意 |
|---|
下記はあくまでもサンプルとなりますので、各企業さま毎の環境での動作の保証はできかねますことご了承ください。 |
| コード ブロック | ||
|---|---|---|
| ||
/* <ボタン → ×ボタン */
#button6 > div > div > button > span > svg > path{
d: path("M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z");
} |
※#button6の部分をご自身で設定したボタン要素IDにご変更ください。
| 情報 |
|---|
ボタンアニメーションの動作と設定 |
この設定をする事で、スライドインやフェードインでボタンに動きをつけて存在をアピールする事ができます。どのような動作をするかは動画をご用意いたしましたので、こちら参考にしてください。
...
URL（ドメイン・パス・パラメーター）
スケジュール
ページ遷移元のURL
訪問回数・期間内
要素の値
ランダム
URL（ドメイン・パス・パラメーター）
ボタン有効化条件をクリックして展開します。
「設定を追加する」ボタンをクリックします。
＋追加をクリックして条件を追加します。
...
設定できるURLの条件
Domain（ドメイン）
指定したドメインを含むすべてのWebページにボタンの設定を適用する事ができます
https://ser-solairo.sakura.ne.jp
設定例
...
Path（URLのパス）
指定したWebページのパスにボタンの設定を適用する事ができます
https://ser-solairo.sakura.ne.jp/ec-solairo/cart
※正規表現が利用できます
※例えば「/ec-solairo/cart」を含む全てのパスで表示したい場合は.*/ec-solairo/cart.*と記載します。
...
指定したパラメーターを含むWebページにボタンの設定を適用する事ができます。
https://ser-solairo.sakura.ne.jp/ec-solairo/?id=cv_start2
設定例
...
https://ser-solairo.sakura.ne.jp/ec-solairo/?cv_start2
※「=」がついていないパラメーターの場合
設定例
...
複数条件を設定している場合は、すべての条件が満たされた場合か、どれかが満たされた場合かを選択してください。
...
レビュー画面でテストをするために、以下のドメイン名も条件に追加をしてください。
whatya.solairo-api.com
...
※レビュー画面とは空色が提供している、設定したチャットのプレビューが見れる画面です。
...
https://ser-solairo.sakura.ne.jp/ec-solairo/contact
ボタン有効化条件 > 設定を追加する > この条件を除外にチェックを入れて、表示させたくないページのパス もしくは パラメーターを指定します。
この例の場合はパスで /ec-solairo/contact を指定します。
このように除外設定にチェックを入れてる場合は、指定されたパスのボタンが無効化されます。
| 情報 |
|---|
除外設定を利用した応用方法 |
例えば除外設定を利用せずに、赤色のサイトに２つ表示条件設定がされていると以下のような動作となります。
...
要素のiDで条件を設定する場合は、サイト内のスクリプトはCSSを管理しているベンダーにご相談下さい。
以下の要素が対象です。
・要素のID
・クエリ
更に以下を条件とします。
・有無
・完全一致
・数値範囲
（例）
例えばこのWebページの場合、クエリを「ec-price__price」
...
「〇秒経過したらボタンが表示される」「スクロールバー〇％まで動いたらボタンが表示される」など、ボタンが表示される条件を設定する事で、ボタンに動きを付ける事ができます。
ボタン表示条件をクリックして展開します
設定を追加するボタンをクリックします
条件の種類を選びます（タイマー or スクロール）
表示条件の種類
タイマーを選択した場合
ページを開いてから一定時間経過したら、ボタンが表示されます。
設定はミリ秒単位で設定してください。
※ミリ秒単位：1000ミリ/秒 = 1秒
...
スクロールの指定した範囲内に入るとアイコンが表示されます。
以下の条件を指定してください。
設定項目 | 解説 |
|---|---|
対象要素 | ページ全体のスクロールバーであれば設定を入れずに空白のままにしてください。対象となるスクロールバーの要素を指定したい場合のみ「#ID名」という書き方で指定してください。 |
開始位置（必須） | 「30」と入れた場合はスクロールバーが30% |
終了位置（必須） | 「70」と入れた場合はスクロールバーが70% |
範囲の反転 | ここにチェックを入れると条件が反転して「範囲外」に移動したときにチャットボタンが表示されます。 |
例えば開始位置を30、終了位置を70で設定した場合は以下のようになります。
...
「〇秒経過したらボタンが非表示になる」「スクロールバー〇％まで動いたらボタンが非表示になる」など、ボタンが非表示となる条件を設定する事で、ボタンに動きを付ける事ができます。
ボタン非表示条件をクリックして展開します
設定を追加するボタンをクリックします。
条件の種類を選びます（タイマー or スクロール）
非表示条件の種類
タイマーを選択した場合
ページを開いてから一定時間経過したら、ボタンが非表示になります。
設定はミリ秒単位で設定してください。※ミリ秒単位：1000ミリ/秒 = 1秒
...
スクロールの指定した範囲内に入るとアイコンが非表示になります。
以下の条件を指定してください
設定項目 | 解説 |
|---|---|
対象要素 | ページ全体のスクロールバーであれば設定を入れずに空白のままにしてください。対象となるスクロールバーの要素を指定したい場合のみ「#ID名」という書き方で指定してください。 |
開始位置（必須） | 「30」と入れた場合はスクロールバーが30% |
終了位置（必須） | 「70」と入れた場合はスクロールバーが70% |
範囲の反転 | ここにチェックを入れると条件が反転して「範囲外」に移動したときにチャットボタンが非表示になります。 |
...
例えば開始位置を30、終了位置を70で設定した場合は以下のようになります。
...
※リスト式応答の設定方法や動作の詳細についてはこちらをご覧ください。
「リスト式応答設定の開始地点」を選択し、任意の開始地点を選択します
「リスト式応答設定」にて本番環境に反映されているシナリオが、指定した開始地点から開始されるようになります
...
| 注意 |
|---|
上級者向け設定 |
こちらは弊社コミュニケーションデザインチームが、ボタンにシナリオを繋げるときに利用します。
基本的にこの設定は変更しないようにしてください。
※すでにチャットボットが運用されている場合は、WhatYaヘルプセンターにご相談ください。
...
リビジョンの設定のインポート・エクスポートができます。
※他のWhatYa環境のリビジョン設定もインポート・エクスポート可能です。
...
エクスポート手順（リビジョン）
エクスポートをしたいリビジョンをクリックします
設定をエクスポートをクリックすると設定ファイルがエクスポートされます。
インポート手順（リビジョン）
設定をインポートをクリックします
エクスポートしたファイルを四角の中へドロップして確定をクリックします。
ファイルが認識されると赤枠のようにファイル名が表示されます。
名前をつけて確定をクリックします
※インポート後、一覧に表示されたとき分かりやすい名前にする事をお勧めします。
リビジョン一覧にインポートした設定が追加されます。
| 情報 |
|---|
ボタン設定単位のインポート・エクスポート |
ボタン設定のインポート・エクスポートができます。
※他のWhatYa環境のボタン設定もインポート・エクスポート可能です。
...
エクスポート手順（ボタン設定）
エクスポートしたいボタン設定のダウンロードマークをクリックします
※編集モードになっているときは表示されません。
ファイルとしてダウンロードされます。
...
インポート手順（ボタン設定）
ボタン設定を追加したいリビジョンをクリックします。
編集をクリックして編集モードにします。
ボタン設定をインポートをクリックします。
エクスポートしたファイルを四角の中へドロップして確定をクリックします。
※ファイルが認識されると赤枠のようにファイル名が表示されます。
名前を付けて確定をクリックします
※インポート後、一覧に表示されたとき解りやすい名前にする事をお勧めします。
一覧にインポートしたボタン設定が追加されます。
