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秒あたりの動作にご注目下さい。

slidin1.mp4

フェードイン

徐々にアイコンを表示させます。表示される速度をミリ秒で設定可能です。

3000ミリ/秒 = 3秒で設定した例

※画面遷移を行った7秒あたりと、画面をリロードした14秒あたりの動作にご注目下さい。

fadein1.mp4

フェードアウト

※特定の条件でボタンが消える設定をしている場合（非表示設定）に徐々にボタンを消していく設定

消えていく速度をミリ秒で設定可能です。

5000ミリ秒（5秒）経過したらボタンが消える

フェードアウトの速さは3000ミリ秒（3秒）で設定した例

動画5秒あたりの動作にご注目下さい。

fadeout.mp4

ボタン表示

以下指定した条件を満たすと、アイコンが表示される設定が可能です。

タイマー

ページを開いてから〇秒経過したら、ボタンを表示させる事ができます。

※5000ミリ秒（5秒）で設定した例

hyouji_timer.mp4

スクロール

スクロールの指定した範囲内に入るとアイコンが表示されます。

例えば開始位置を30、終了位置を70で設定した場合は以下のようになります。

※フォーカスの設定についてはアドバンス設定にて、ご説明します。

ボタン非表示

以下指定した条件を満たすと、アイコンを非表示（消える）にする設定が可能です。

タイマー

ページを開いてから〇秒経過したら、ボタンを非表示にします。

※5000ミリ秒（5秒）で設定した例

fadeout.mp4

スクロール

スクロールで指定した範囲内に入るとアイコンが非表示になります。

例えば開始位置を30、終了位置を70で設定した場合は以下のようになります。

新規設定と編集の考え方

ボタン設定作成の概要

まず大まかな手順として、ボタンの設定は以下の流れで設定を行います

　次は各フローごとに説明をしていきます。

新規作成

チャットボタン設定の右上にある「新しく設定をはじめる」から新しい設定を作る事ができます。

下書き保存

設定作業を中断したい場合は「下書きとして保存」します。

設定の再開

次回管理画面を開いたときにチャットボタン設定のトップ画面の「編集中」から再開できます。

保存

設定が完了したら保存を押します。
※保存を押すと設定が確定する為、編集ができなくなるのでご注意下さい

保存を押すと、設定が確定して保存済み一覧の一番上に追加されます。

※この保存された一覧を「リビジョン」と呼びます。

テスト環境に反映

作成したリビジョンをクリックすると「テスト環境に保存ボタン」が表示されますので、このボタンを押して「テスト環境」に反映します

※リビジョンは好きな設定を選んで、テスト環境に反映できるようになっています。

※ここで編集はできません。

リビジョンの一覧を確認

設定がテスト環境に適用されると「Testing」のマークが付きます。

テスト環境で確認されているかを確認します。

※テスト環境の反映先についての情報はこちらをご確認下さい。

https://solairo.atlassian.net/wiki/spaces/WHAT1/pages/2074345547#%E3%83%86%E3%82%B9%E3%83%88%E7%92%B0%E5%A2%83%E3%81%A7%E3%81%AE%E5%8F%8D%E6%98%A0%E7%A2%BA%E8%AA%8D%E3%81%AE%E3%81%97%E3%81%8B%E3%81%9F

本番環境に反映

最後に「本番環境に反映」のボタンを押します。

※テスト環境反映後でなければ「本番環境」に反映できません。

リビジョンの一覧を確認

リビジョンの一覧が「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）変更の確認が試せない

導入事例：https://ser-solairo.sakura.ne.jp/ec-solairo/user_data/minoruda?id=testtest

サンプルを参考にボタン設定をしてみましょう。

チャットボタン設定方法

こちらでは画像タイプのボタン設定方法をご紹介いたします。
（※表示のイメージは、下記サンプル動画をご確認ください。）
まず、どのようにボタン設定ができるか確認したい場合は、こちらの設定をそのままコピーしてお使いください。

画面収録 2021-10-19 11.22.26.mov

こちらの設定では、全てのページに同じボタン設定が適用されます。
特定のページに表示をさせたい場合はアドバンス設定をご確認ください。

ボタンの種類

まず、適用するボタンの種類を下記の中から「画像」をご選択ください。

通常のボタン
画像
吹き出し（左向き/右向き）

ボタンテキストと画像URLを下記のサンプルを参考にご設定ください。

ボタンテキスト…商品を探す
画像URL…http://ser-solairo.sakura.ne.jp/ser-image/search_item_banner.png
（画像は弊社素材ですのでご自由にお使いいただいて構いません。）
ボタン要素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.通常のボタンをクリック

ボタンの種類は画像を選択、ボタンテキスト、画像URL、ボタン要素IDに任意の値を入力、
ボタンのアニメーションは無効を選択します。
ボタン有効化条件をクリックし、設定を追加するをクリックします。

domain の追加ボタンをクリックします。

任意のURLのドメイン（ホスト名）を指定し、設定をクリックします。

追加をクリックし、ボタン有効化条件の設定が完了となります。
保存をクリックします。

コメント入力画面が表示されるので、任意のコメントを入力し、はいをクリックします。
「保存済」の一覧に表示されたことを確認し、該当の設定を開きます。

「テスト環境に反映」のボタンをクリックします。

「適用中」一覧の該当ボタン設定に「Testing」マークが表示されると、
ボタン有効化条件で指定した環境での動作確認ができます。

ボタン有効化条件で指定した環境で、該当のボタン設定が反映されているかご確認ください。
画面収録 2021-10-21 17.09.20.mov