チャットボタン設定の作成方法・ボタン作成の概念をこのページで解説しています。
...
まずチャットボタン設定を開いたときに、一覧に表示されている設定を「リビジョン」と呼びます。
...
任意のリビジョンをクリックして展開すると、一覧表示される設定を「ボタン設定」と呼びます。
...
※テスト環境とは、弊社が用意したレビュー用の画面で、この画面からボタンの状態をプレビューする事ができます。
...
| ヒント |
|---|
WhatYaのタグが埋め込まれたページでテストをするには？ |
WhatYaのタグが埋め込まれているページにおいては、
設定をテスティングに反映後、御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。
...
以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://ser-solairo.sakura.ne.jp/ec-solairo/?_whatya_testing
テスト環境に適用したものに更に「本番環境に適用」を行うと本番環境に反映されます。
...
ここからは、リビジョンを新規作成してボタン設定を行う手順となります。
「＋新しく設定をはじめる」をクリックします。
リビジョンの名前を付けて、ボタン設定を展開します。
展開したらラベル名をつけてボタンの設定を行います。
※ラベル名をつけておくと以下のように複数設定を付けたときに何の設定か解りやすくなるので、名前を付けておくことをおすすめします。
設定が完了したら「保存」をクリックします。
「確定」をクリックします。※このタイミングでリビジョンのコメント（名前）も変更できます。
...
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
現在WhatYaをご利用のお客さま |
...
以下の手順で不要なリビジョンを削除できます。
削除したいリビジョンをクリックします。
「この設定を削除」を選択します。
「はい」をクリックするとリビジョンが削除されます。
...
| 注意 |
|---|
本番・テスト環境のリビジョンは削除できません |
適用中の一覧からリビジョンは削除できません。
...
編集を押して、一覧を編集モードにすると、右に「ゴミ箱アイコン」が現れます。
削除したいボタン設定のゴミ箱アイコンを押して「はい」を選択すると設定が削除されます。
...
...
ボタンの各種設定
ここからは設定どのようにボタンの動作を変更できるかを解説いたします。
...
管理コンソールから以下5タイプのボタンを設定する事ができます。
通常通常のボタン
画像画像＋テキスト
画像（CSSカスタマイズ用）画像のみ
吹き出し（左向き）
吹き出し（右向き）
ポップアップ
...
通常通常のボタン
装飾の無いデフォルトのボタンが表示されます。
...
画像画像＋テキスト
画像に設定した場合はデフォルトでは白い四角の中に指定した画像が表示され画面左側に表示されます。ボタンの中にテキストを入れたり、アイコンの位置、背景の白い四角などをCSSで調整できます。
※この機能を利用する場合は、画像URLの指定が必須となります。
※スマートフォンの操作を想定してデフォルトの表示位置を左側にしています。
...
画像のみ
画像＋テキストとの違いは以下です。
画像＋テキスト | 画像のみ | |
|---|---|---|
閉じるボタンの有無 | 有り | 無し |
吹き出し（左向き）
左に向いた吹き出しを表示します。テキストは管理画面からいつでも変更可能です。
アイコンの位置や吹き出し、背景の白い丸については、CSSで指定をする事でデザインを調整できます。
...
この場合は以下のように設定します。
全ページに表示するアイコン → 「1」で設定する
特定のページだけ表示させたいアイコン→「1000」 （多めに設定しておきます）
...
| 情報 |
|---|
ボタンテキスト・画像URL・×ボタンの有効無効 |
...
下記、サンプル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");
} |
...
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
...
※レビュー画面とは空色が提供している、設定したチャットのプレビューが見れる画面です。
...
ボタン有効化条件 > 設定を追加する > この条件を除外にチェックを入れて、表示させたくないページのパス もしくは パラメーターを指定します。
この例の場合はパスで /ec-solairo/contact を指定します。
このように除外設定にチェックを入れてる場合は、指定されたパスのボタンが無効化されます。
| 情報 |
|---|
除外設定を利用した応用方法 |
例えば除外設定を利用せずに、赤色のサイトに２つ表示条件設定がされていると以下のような動作となります。
...
要素のiDで条件を設定する場合は、サイト内のスクリプトはCSSを管理しているベンダーにご相談下さい。
以下の要素が対象です。
・要素のID
・クエリ
更に以下を条件とします。
・有無
・完全一致
・数値範囲
（例）
例えばこのWebページの場合、クエリを「ec-price__price」
...
「〇秒経過したらボタンが表示される」「スクロールバー〇％まで動いたらボタンが表示される」など、ボタンが表示される条件を設定する事で、ボタンに動きを付ける事ができます。
ボタン表示条件をクリックして展開します
設定を追加するボタンをクリックします
条件の種類を選びます（タイマー or スクロール）
表示条件の種類
タイマーを選択した場合
ページを開いてから一定時間経過したら、ボタンが表示されます。
設定はミリ秒単位で設定してください。
※ミリ秒単位：1000ミリ/秒 = 1秒
...
「〇秒経過したらボタンが非表示になる」「スクロールバー〇％まで動いたらボタンが非表示になる」など、ボタンが非表示となる条件を設定する事で、ボタンに動きを付ける事ができます。
ボタン非表示条件をクリックして展開します
設定を追加するボタンをクリックします。
条件の種類を選びます（タイマー or スクロール）
非表示条件の種類
タイマーを選択した場合
ページを開いてから一定時間経過したら、ボタンが非表示になります。
設定はミリ秒単位で設定してください。※ミリ秒単位：1000ミリ/秒 = 1秒
...
「リスト式応答設定の開始地点」を選択し、任意の開始地点を選択します
「リスト式応答設定」にて本番環境に反映されているシナリオが、指定した開始地点から開始されるようになります
...
| 注意 |
|---|
上級者向け設定 |
こちらは弊社コミュニケーションデザインチームが、ボタンにシナリオを繋げるときに利用します。
基本的にこの設定は変更しないようにしてください。
※すでにチャットボットが運用されている場合は、WhatYaヘルプセンターにご相談ください。
...
エクスポート手順（リビジョン）
エクスポートをしたいリビジョンをクリックします
設定をエクスポートをクリックすると設定ファイルがエクスポートされます。
インポート手順（リビジョン）
設定をインポートをクリックします
エクスポートしたファイルを四角の中へドロップして確定をクリックします。
ファイルが認識されると赤枠のようにファイル名が表示されます。
名前をつけて確定をクリックします
※インポート後、一覧に表示されたとき分かりやすい名前にする事をお勧めします。
リビジョン一覧にインポートした設定が追加されます。
| 情報 |
|---|
ボタン設定単位のインポート・エクスポート |
ボタン設定のインポート・エクスポートができます。
※他のWhatYa環境のボタン設定もインポート・エクスポート可能です。
...
エクスポートしたいボタン設定のダウンロードマークをクリックします
※編集モードになっているときは表示されません。
ファイルとしてダウンロードされます。
...
インポート手順（ボタン設定）
ボタン設定を追加したいリビジョンをクリックします。
編集をクリックして編集モードにします。
ボタン設定をインポートをクリックします。
エクスポートしたファイルを四角の中へドロップして確定をクリックします。
※ファイルが認識されると赤枠のようにファイル名が表示されます。
名前を付けて確定をクリックします
※インポート後、一覧に表示されたとき解りやすい名前にする事をお勧めします。
一覧にインポートしたボタン設定が追加されます。
