...
...
...
...
...
まずは管理画面になれるため、手順通りに設定をしてみましょう。
この手順で簡単なボタン設定ができます！
| 目次 | ||||
|---|---|---|---|---|
|
2021/10/25 update（作成完了）
このガイドはチャットボタン設定のクイックスタートガイドです。
すぐに出来る簡単な基本設定をこちらに記載しています。
ログイン設定
サンプルを参考にボタン設定をしてみましょう。
| 情報 |
|---|
...
チャットボタン設定方法 |
ログインするためには、WhatYa管理画面にユーザーが登録されている必要があります。こちらでは画像タイプのボタン設定方法をご紹介いたします。
ユーザー登録は以下の手順で行ってください。
① WhatYa管理画面の左メニューのスタッフ管理を選択します。
...
② 「first_name」「last_name」「nick_name」「email」を入れます。
...
③ 登録された事を確認します
...
スタッフのパスワード設定についてはユーザーが初回ログインしたタイミングで設定します。
Googleのアカウントスタッフで登録している場合は、Googleのアカウント情報を使ってそのまま管理画面にログインします。
※現時点では管理画面から登録をメールなどで通知する機能はございません。
| 情報 |
|---|
ログイン方法 |
Googleアカウントをご利用の場合
ユーザー登録が完了したら、ユーザーにお知らせしてログインしてもらいましょう。
登録されているユーザーがGoogleアカウントである場合は「Login With Google」を
押していただければそのままログインできます。
...
Google以外のメールアドレスをご利用の場合
①初めてログインする場合は「パスワード忘れ・登録」をリンクをクリックします。
...
②管理コンソールに登録されているメールアドレスを入力して「SEND EMAIL」を押します。
...
③以下のようなメールが届いたら、パスワード再設定のリンクをクリックします
...
④ポップアップからパスワードを設定します
...
⑤設定したらE-mailアドレスと設定したパスワードでログインをすれば管理コンソールに入れます。
...
チャットボタン設定の概要
ここからはボタン設定でどんな事が出来るか？概要をご説明します。
| 情報 |
|---|
動作イメージ（概要） |
WhatYa管理画面から、どのようなボタン設定ができるか、動作イメージを説明します。
基本は、左メニューの「チャットボタン設定」から設定をします。
| 情報 |
|---|
ボタンの種類を選択 |
管理コンソールから以下４タイプのボタンを設定する事ができます。
通常
画像
吹き出し（左向き）
吹き出し（右向き）
「通常」に設定した場合
装飾の無いデフォルトのボタンが表示されます。
...
「画像」に設定した場合
画像に設定した場合はデフォルトでは白い四角の中に指定した画像が表示され
画面左側に表示されます。
ボタンの中にテキストを入れる事が可能。
アイコンの位置、背景の白い四角などCSSでデザイン調整可能。
※スマートフォンの操作を想定してデフォルトの表示位置を左側にしています。
...
「吹き出し（左向き）」に設定した場合
左に向いた吹き出しを表示します。テキストは管理画面からいつでも変更可能です。
この機能を利用する場合は、画像URLの指定が必須となります。
アイコンの位置や吹き出し、背景の白い丸については、CSSで指定をする事でデザインを調整できます。
...
「吹き出し（右向き）」に設定した場合
右に向いた吹き出しを表示します。テキストは管理画面からいつでも変更可能です。
この機能を利用する場合は、画像URLの指定が必須となります。
アイコンの位置や吹き出し、背景の白い丸については、CSSで指定をする事でデザインを調整できます。
...
| 情報 |
|---|
ボタンアニメーションの動作 |
スライドインやフェードインでボタンに動きをつけて存在をアピールします。
スライドイン
アイコンがスライドして出てきます。
「下から上」「上から下」「左から右」「右から左」いずれかの設定が可能
下から上で設定した動作イメージ
※画面遷移を行った4秒あたりと、画面をリロードした11秒あたりの動作にご注目下さい。
...
フェードイン
徐々にアイコンを表示させます。表示される速度をミリ秒で設定可能です。
3000ミリ/秒 = 3秒で設定した例
※画面遷移を行った7秒あたりと、画面をリロードした14秒あたりの動作にご注目下さい。
...
フェードアウト
※特定の条件でボタンが消える設定をしている場合（非表示設定）に徐々にボタンを消していく設定
消えていく速度をミリ秒で設定可能です。
5000ミリ秒（5秒）経過したらボタンが消える
フェードアウトの速さは3000ミリ秒（3秒）で設定した例
動画5秒あたりの動作にご注目下さい。
...
| 情報 |
|---|
ボタン表示 |
以下指定した条件を満たすと、アイコンが表示される設定が可能です。
タイマー
ページを開いてから〇秒経過したら、ボタンを表示させる事ができます。
※5000ミリ秒（5秒）で設定した例
...
スクロール
スクロールの指定した範囲内に入るとアイコンが表示されます。
例えば開始位置を30、終了位置を70で設定した場合は以下のようになります。
...
※フォーカスの設定についてはアドバンス設定にて、ご説明します。
| 情報 |
|---|
ボタン非表示 |
以下指定した条件を満たすと、アイコンを非表示（消える）にする設定が可能です。
タイマー
ページを開いてから〇秒経過したら、ボタンを非表示にします。
※5000ミリ秒（5秒）で設定した例
...
スクロール
スクロールで指定した範囲内に入るとアイコンが非表示になります。
例えば開始位置を30、終了位置を70で設定した場合は以下のようになります。
...
新規設定と編集の考え方
| 情報 |
|---|
ボタン設定作成の概要 |
まず大まかな手順として、ボタンの設定は以下の流れで設定を行います
...
次は各フローごとに説明をしていきます。
| 情報 |
|---|
新規作成 |
チャットボタン設定の右上にある「新しく設定をはじめる」から新しい設定を作る事ができます。
...
| 情報 |
|---|
下書き保存 |
設定作業を中断したい場合は「下書きとして保存」します。
...
| 情報 |
|---|
設定の再開 |
次回管理画面を開いたときにチャットボタン設定のトップ画面の「編集中」から再開できます。
...
| 情報 |
|---|
保存 |
設定が完了したら保存を押します。
※保存を押すと設定が確定する為、編集ができなくなるのでご注意下さい
...
保存を押すと、設定が確定して保存済み一覧の一番上に追加されます。
※この保存された一覧を「リビジョン」と呼びます。
...
| 情報 |
|---|
テスト環境に反映 |
作成したリビジョンをクリックすると「テスト環境に保存ボタン」が表示されますので、このボタンを押して「テスト環境」に反映します
※リビジョンは好きな設定を選んで、テスト環境に反映できるようになっています。
※ここで編集はできません。
...
リビジョンの一覧を確認
設定がテスト環境に適用されると「Testing」のマークが付きます。
...
テスト環境で確認されているかを確認します。
※テスト環境の反映先についての情報はこちらをご確認下さい。
...
| 情報 |
|---|
本番環境に反映 |
最後に「本番環境に反映」のボタンを押します。
※テスト環境反映後でなければ「本番環境」に反映できません。
...
リビジョンの一覧を確認
リビジョンの一覧が「Main」のマークがついたら、本番環境に設定が反映されていますので、本番環境を確認してください。
...
| 情報 |
|---|
既存の設定をコピーして設定を作る |
こちらでお話をさせていただいた様に「保存後」は編集ができません。
https://solairo.atlassian.net/wiki/spaces/WHAT1/pages/2074345547#%E4%BF%9D%E5%AD%98
ただし、この機能を使う事で編集内容はそのままの状態で「設定」をコピーする事が可能です。
設定のコピーの手順
リビジョンの一覧から、コピーしたい設定をクリックします。
（適用中も保存済どちらもコピー可能です）
...
コピーしたい項目を選んだら「これをベースに設定を編集」を押します。
...
設定がコピーされたら編集を行います。
解りやすいようにCommentの部分（名前）を変更しておく事をお勧めします。
...
後は保存をして、テスト環境と本番環境へ適用して新しく設定したコピーを反映させてください。
...
| 情報 |
|---|
リビジョンの一覧から設定を削除する |
保存済みの一覧にあるリビジョンは削除する事ができます。
※本番・テスト環境に反映中の設定は削除できませんが、別な設定をして
解除がされれば削除が可能です。
例えば設定一覧の「機能の設定一覧３」を削除したい場合は、リビジョンの一覧からクリックします
...
設定画面に切り替わったら「この設定を削除」を押すと削除されます。
...
テスト環境で反映を確認するには？
設定が思ったような動きをしているかどうか確認するための前準備と方法を2種類ご説明します。
| 情報 |
|---|
前準備：テスト環境に設定を反映する |
チャットボタン設定画面の設定を開き、「テスト環境に反映」ボタンを押します。
...
テスト環境に反映すると、以下のマークが現れます。「Testing」マークが付いていている設定の動作確認が可能です。
...
この状態になると、以下2種類の方法で本番に影響せず動作確認が可能となります。
| 情報 |
|---|
方法その1：レビュー画面で確認する |
弊社担当者よりお送りさせていただいた、レビュー環境のURLの末尾に「?testing=true」を追加していただくことで、動作確認が可能です。
例）レビュー画面のURLが、「https://whatya.solairo-api.com/XXX/review.html」 の場合、以下のスニペットのようにご記載下さい。
| コード ブロック |
|---|
https://whatya.solairo-api.com/XXX/review.html?testing=true |
※URLは各クライアント様へご提供された環境コードへご変更下さい。
方法1のメリット：
レビュー画面にCSS入力欄があるため、手軽にデザイン（CSS）変更の確認が試せる
URLを開けばよいだけなので、動作確認がとても容易
方法1のデメリット：
WEBサイト側のCSSの影響が確認できない
ボタン有効化条件に何かしらの設定がある場合、ボタン有効化条件に、
?testing=trueを追加しなければならない
※ボタン有効化条件を何かしら設定していて、
レビュー画面ではアイコンが表示されない場合は、こちらの記事をご確認下さい。
導入事例：https://whatya.solairo-api.com/sola3/review.html?testing=true
ユーザー名：solairo パスワード：solairov2
| 情報 |
|---|
方法その2：御社ステージング環境で確認する |
テスト用のタグを埋め込んで頂くことで、クライアント様自社のWEBサイトでも確認することが可能です。
例）埋め込みタグが、「<script src="https://whatya.solairo-api.com/XXX/chat.js"></script>」の場合、以下のスニペットのようにご記載下さい。
| コード ブロック |
|---|
<script src="https://whatya.solairo-api.com/XXX/chat.js" data-testing="true"></script> |
方法2のメリット：
WEBサイト側のCSSの影響が確認できる
本番環境に沿った、動作確認ができる
方法2のデメリット：
タグを埋めなければならない
ボタン有効化条件を設定しなければならない
方法によるが、手軽にデザイン（CSS）変更の確認が試せない
導入事例：（※表示のイメージは、下記サンプル動画をご確認ください。）
まず、どのようにボタン設定ができるか確認したい場合は、こちらの設定をそのままコピーしてお使いください。
...
| 注意 |
|---|
こちらの設定では、全てのページに同じボタン設定が適用されます。 |
チャットボタン設定 ＞ 「新しく設定をはじめる」ボタン をクリック
「 01.[通常のボタン] ラベル未設定 」をクリック
ラベルを設定
「 01.[通常のボタン] 」のラベルを設定します。
ラベルの設定は必須ではありませんので、任意の文字列をご入力ください。ボタンの種類を選択
適用するボタンの種類を選択します。「通常のボタン」をクリック
ボタンの種類の中から「画像」を選択
表示優先度を設定
ボタンの表示優先度を設定します。
今回のサンプルでは単一のボタン設定のため、スキップします。ボタンテキストを設定
画像ボタンの上部に表示されるテキストを設定します。
下記ボタンテキストのサンプルを参考にご設定ください。
・ボタンテキスト…商品を探す画像URLを設定
ボタンに表示される画像のURLを設定します。
下記画像URLのサンプルを参考にご設定ください。
・画像URL…https://ser-solairo.sakura.ne.jp/ser-image/search_item_banner.png
（画像は弊社素材ですのでご自由にお使いいただいて構いません。）ボタン要素IDを設定
チャットボタンのHTML上のIDを設定します。
ボタン要素ID欄に「button1」とご記入ください。ボタンアニメーションを設定
適用するボタンアニメーションを設定します。
今回のサンプルではアニメーションを適用しないため、「無効」をご選択ください。ボタン有効化条件を設定
ボタン設定を適用させるドメイン/パス/パラメーターの条件を設定します。
ボタン有効化条件をクリック
「設定を追加する」ボタンをクリック
「ページのURL」を選択し、domainの「追加」ボタンをクリック
今回はドメイン配下の全ページにボタン設定を適用するため、ドメインを指定します。
例）URL：https://ser-solairo.sakura.ne.jp/ec-solairo/
...
サンプルを参考にボタン設定をしてみましょう。
| 情報 |
|---|
チャットボタン設定方法 |
こちらでは画像タイプのボタン設定方法をご紹介いたします。
（※表示のイメージは、下記サンプル動画をご確認ください。）
まず、どのようにボタン設定ができるか確認したい場合は、こちらの設定をそのままコピーしてお使いください。
...
| 注意 |
|---|
こちらの設定では、全てのページに同じボタン設定が適用されます。 |
ボタンの種類
まず、適用するボタンの種類を下記の中から「画像」をご選択ください。
通常のボタン
画像
吹き出し（左向き/右向き）
ボタンテキストと画像URLを下記のサンプルを参考にご設定ください。
...
ボタンテキスト…商品を探す
...
ボタン要素ID…button1
...
ボタンアニメーション
次に、適用するボタンアニメーションを下記の中から「無効」をご選択ください。
無効
スライドイン
フェードイン/フェードアウト
...
ボタン有効化条件
ボタン設定を適用させるドメイン/パス/パラメターの条件を下記のサンプルを参考にご設定ください。
今回は全ページにボタン設定を適用するため、ドメインを下記のように指定します。
例）URL：https://ser-solairo.sakura.ne.jp/ec-solairo/の場合
ドメイン…ser-solairo.sakura.ne.jp ※環境に合わせてご変更下さい
...
ボタン表示条件
ボタン表示条件は設定なし
...
ボタン非表示条件
ボタン非表示条件は設定なし
...
チャットを閉じた後の挙動
チャットを閉じた後の挙動は設定なし
...
CSSでの設定方法
画像タイプの閉じるボタンは、デフォルトでは下記のように「＜」マークとなっております。
デフォルトの「＜」から「×」ボタンに変更したい場合は、CSSでデザイン変更いただきます。
...
下記、サンプルCSSです。
こちらのCSSをベンダーさまにお渡しし、デザイン変更をご依頼ください。
| 注意 |
|---|
下記はあくまでもサンプルとなりますので、各企業さま毎の環境での動作の保証はできかねますことご了承ください。 |
| コード ブロック | ||
|---|---|---|
| ||
/* <ボタン → ×ボタン */
#button1 > 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");
} |
※#button1の部分をご自身で設定したボタン要素IDにご変更ください。
...
| 情報 |
|---|
テスティングに反映する |
...
チャットボタン設定 ＞ 新しく設定をはじめる をクリック
...
01.通常のボタン をクリック
...
ボタン有効化条件 をクリックし、 設定を追加する をクリックします。
...
保存 をクリックします。
...
「保存済」の一覧に表示されたことを確認し、該当の設定を開きます。
...
| 情報 |
|---|
本番に反映する |
テスティングに反映後、動作確認をし問題なければ、本番反映の手順に進みます。
「適用中」一覧の「Testing」マークが付いている該当のボタン設定をクリックします。
...
...
※環境に合わせてご変更下さい
任意のURLのドメイン（ホスト名）を指定し、「確定」ボタン をクリック
次に、テスト環境で動かすため、テスト環境のドメインを追加します。
domainの「追加」ボタンをクリック
下記のテスト環境のドメインを指定し、「確定」ボタン をクリック
・ドメイン…whatya.solairo-api.com
2つのドメインを追加しましたら、「確定」ボタンをクリックし、ボタン有効化条件の設定が完了となります。
ボタン表示条件を設定
ボタンが表示される条件を設定します。
今回のサンプルではボタンが表示される条件を設定しないため、スキップします。
ボタン非表示条件を設定
ボタンを非表示（消える）にする条件を設定します。
今回のサンプルではボタンを非表示にする条件を設定しないため、スキップします。チャットを閉じた後の挙動を設定
チャットウィンドウのXボタンで閉じた後のボタン表示の挙動を設定します。
今回のサンプルではチャットを閉じた後の挙動を設定しないため、スキップします。
コメントをつけてボタン設定を保存
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
画面右下に「保存されました」というダイアログが表示されると、ボタンの設定が完了となります。
テスト環境に反映
設定したボタン設定をテスト環境に反映します。
チャットボタン設定 ＞ 保存済み一覧の中から設定したボタン設定をクリック
「テスト環境に反映」ボタンをクリック
任意のコメントを入力し、「確定」ボタンをクリック
画面右下に「環境への反映が完了しました」というダイアログが表示されると、テスト環境への反映が完了となります。
レビュー画面（テスト環境）での動作確認
テスト環境に反映したボタン設定をレビュー画面（テスト環境）で動作確認します。
チャットボタン設定 ＞ 適用中の中からテスト環境に反映したボタン設定の「Testing」ボタンをクリック
レビュー画面（テスト環境）に遷移し、設定したボタン設定を確認いただけます。本番環境に反映
設定したボタン設定をテスト環境に反映します。
チャットボタン設定 ＞ 「テスト環境を本番環境へ反映」ボタンをクリック
任意のコメントを入力し、「確定」ボタンをクリック
画面右下に「環境への反映が完了しました」というダイアログが表示されると、本番環境への反映が完了となります。
レビュー画面（本番環境）での動作確認
本番環境に反映したボタン設定をレビュー画面（本番環境）で動作確認します。
チャットボタン設定 ＞ 適用中の中から本番環境に反映したボタン設定の「Main」ボタンをクリック
レビュー画面（本番環境）に遷移し、設定したボタン設定を確認いただけます。
...
| 情報 |
|---|
サンプルボタン設定のインポート方法 |
上記サンプルボタン設定をそのままインポートすることが可能です。
サンプルボタン設定のインポート手順をご紹介いたします。
※まず、下記サンプルボタン設定のインポートファイルを任意の場所に保存してください。
| View file | ||
|---|---|---|
|
チャットボタン設定 ＞ 「設定をインポート」ボタン をクリック
任意の場所に保存したサンプルボタン設定のインポートファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップ
ファイルがアップロードされたことを確認し、「確定」ボタンをクリック
画面右下に「保存されました」というダイアログが表示されると、インポートが完了となります。
※テスト環境、本番環境への反映確認方法はこちらの手順15〜18と同じ流れとなるため、割愛させていただきます。