チャットボタン設定の作成方法・ボタン作成の概念をこのページで解説しています。

チャットボタンの詳細な設定をしたいときはこちらをご確認ください。

基本操作

ここからは操作の流れを解説いたします。

前提：リビジョンとボタン設定

まずチャットボタン設定を開いたときに、一覧に表示されている設定を「リビジョン」と呼びます。

任意のリビジョンをクリックして展開すると、一覧表示される設定を「ボタン設定」と呼びます。

例えば、リビジョンがこの様に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を維持する必要があります。ご利用中のWhatYaを表示させたい場合は以下ご留意ください。

ボタン設定の編集

保存後に編集したい場合は、編集したいリビジョンを選択して「編集ボタン」をクリックすると編集する事ができます。※編集後は通常の手順同様に保存を押してください。

※編集中で未保存の場合は、画面の一番上に「編集中」と表示されます

本番・テスト環境のリビジョンを編集したい場合

適用中一覧からリビジョンは編集できません。

適用中のリビジョンの編集を行いたい場合は「保存済み一覧」から適用中のリビジョンを探し「編集」を行って下さい

リビジョンの削除

以下の手順で不要なリビジョンを削除できます。

削除したいリビジョンをクリックします。
「この設定を削除」を選択します。
「はい」をクリックするとリビジョンが削除されます。

本番・テスト環境のリビジョンは削除できません

適用中の一覧からリビジョンは削除できません。

適用中のリビジョンの削除を行いたい場合は「保存済み一覧」から適用中のリビジョンを探し「削除」を行って下さい

ボタン設定の削除

ボタン設定の削除を使います。こちらは、リビジョンに複数ボタン設定がされていたうちの１つを削除したい場合の手順となります。

編集を押して、一覧を編集モードにすると、右に「ゴミ箱アイコン」が現れます。
削除したいボタン設定のゴミ箱アイコンを押して「はい」を選択すると設定が削除されます。

ボタンの各種設定

ここからは設定どのようにボタンの動作を変更できるかを解説いたします。

ボタンの種類の設定

ボタンの種類を選択します

管理コンソールから以下5タイプのボタンを設定する事ができます。

通常
画像
画像（CSSカスタマイズ用）
吹き出し（左向き）
吹き出し（右向き）

通常

装飾の無いデフォルトのボタンが表示されます。

画像

画像に設定した場合はデフォルトでは白い四角の中に指定した画像が表示され画面左側に表示されます。ボタンの中にテキストを入れたり、アイコンの位置、背景の白い四角などをCSSで調整できます。

※この機能を利用する場合は、画像URLの指定が必須となります。
※スマートフォンの操作を想定してデフォルトの表示位置を左側にしています。

吹き出し（左向き）

左に向いた吹き出しを表示します。テキストは管理画面からいつでも変更可能です。
アイコンの位置や吹き出し、背景の白い丸については、CSSで指定をする事でデザインを調整できます。

※この機能を利用する場合は、画像URLの指定が必須となります。

吹き出し（右向き）

右に向いた吹き出しを表示します。テキストは管理画面からいつでも変更可能です。
アイコンの位置や吹き出し、背景の白い丸については、CSSで指定をする事でデザインを調整できます。

※この機能を利用する場合は、画像URLの指定が必須となります。

表示優先度の設定

条件が重複した場合、「表示優先度」の数値が多い方の設定されます。

条件が重複するよくあるケースを例にすると「全ページに表示するアイコン」と「特定のページだけに表示するアイコン」がある場合です。

例えばこのような設定をすると、ページ３の条件が重複します。

この場合は以下のように設定します。

全ページに表示するアイコン → 「1」で設定する
特定のページだけ表示させたいアイコン→「1000」（多めに設定しておきます）

ボタンテキスト・画像URL・×ボタンの有効無効

ボタンの画像・テキスト・×ボタンをこちらで設定できます。

ボタンテキスト

ボタンに表示されるテキストをここで設定します

画像URL

アイコンの画像をここからURLで指定します。

×ボタンの有無

ボタンに「閉じるボタン」を表示するかを設定します。

ボタン要素idの設定

ボタンのCSSのid名を指定できます。例えばボタン要素idを「button6」と設定した場合、CSSで利用できるボタン要素のidが「button6」となります。

※ここで指定するのはボタンの要素idとなりますので、チャットウィンドウのCSSは従来のままです。

設定した要素id（例：button6）の子要素の部分を変更したい場合は、※CSSの指定例の方法を使うと指定できます。

※CSSの指定例「button6」という名前で要素idを設定している場合の例

/*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にご変更ください。

ボタンアニメーションの動作と設定

この設定をする事で、スライドインやフェードインでボタンに動きをつけて存在をアピールする事ができます。どのような動作をするかは動画をご用意いたしましたので、こちら参考にしてください。

スライドイン

アイコンがスライドして出てきます。

スライド方向

「下から上」「上から下」「左から右」「右から左」いずれかの設定が可能

スライドする時間

どれくらい時間をかけてアイコンを表示させるかをミリ秒単位で指定できます

※ミリ秒単位：1000ミリ/秒 = 1秒

下から上でスライドインを設定したイメージ

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

slidin1.mp4

フェードイン

徐々にアイコンを表示させます。表示される速度をミリ秒で指定します。
※ミリ秒単位：1000ミリ/秒 = 1秒

3000ミリ/秒 = 3秒で設定した例
※画面遷移を行った7秒あたりと、画面をリロードした14秒あたりの動作にご注目下さい。

fadein1.mp4

フェードアウト

条件でボタンが消える設定をしている場合（非表示設定）どれくらいの速度で消えていくかをミリ秒で指定します。※ミリ秒単位：1000ミリ/秒 = 1秒

5000ミリ秒（5秒）経過したらボタンが消える
フェードアウトの速さは3000ミリ秒（3秒）で設定した例
動画5秒あたりの動作にご注目下さい。

fadeout.mp4

ボタン有効化条件の設定

ここで設定された条件を満たすと、Webページにボタンが表示されます。

以下が指定可能な条件となります。

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.*と記載します。

設定例

Parameter（URLのパラメータ）

指定したパラメーターを含むWebページにボタンの設定を適用する事ができます。
https://ser-solairo.sakura.ne.jp/ec-solairo/?id=cv_start2
設定例

複数条件を設定している場合は、すべての条件が満たされた場合か、どれかが満たされた場合かを選択してください。

レビュー画面を利用するためこちらのドメインも追加してください。

レビュー画面でテストをするために、以下のドメイン名も条件に追加をしてください。
whatya.solairo-api.com

※レビュー画面とは空色が提供している、設定したチャットのプレビューが見れる画面です。

ボタン有効化条件（除外設定）

例えば、以下のように特定のページだけボタンを表示させたくない場合は除外設定をする事で管理画面から制御できます。

サイト全体にボタンを表示（表示設定）
サイトの○○のページだけはボタンを表示しない（除外設定）

除外設定の手順

例えばこのページにボタンを表示させたくない場合は以下の手順を行います。

https://ser-solairo.sakura.ne.jp/ec-solairo/contact

ボタン有効化条件 > 設定を追加する > この条件を除外にチェックを入れて、表示させたくないページのパスもしくはパラメーターを指定します。
この例の場合はパスで /ec-solairo/contact を指定します。
このように除外設定にチェックを入れてる場合は、指定されたパスのボタンが無効化されます。

除外設定を利用した応用方法

例えば除外設定を利用せずに、赤色のサイトに２つ表示条件設定がされていると以下のような動作となります。

この場合、「A_おすすめ紹介」を×ボタンで閉じると

２つ条件が入っているため、閉じた後、次に優先度が低いボタンが表示されます。

×ボタンで閉じた後に次のボタンを表示させないようにするには

以下のように除外設定を利用すると、ボタンを閉じた後に、次のボタンが表示されなくなります。

スケジュール

指定したスケジュールの日時にのみチャットボタンを表示させる事ができます。

この機能を使えば、指定したスケジュールになったら、吹き出しやボタンのメッセージを
変更する事ができます。

以下条件でスケジュール指定が可能

・開始日～終了日
・〇月〇日〇曜日
・時間
・オプションを利用して、指定した時間で表示・非表示を切り替える事ができます。

※スケジュールの時間はPCやスマートフォンの時間を参照しています。

※サンプルページ

https://ser-solairo.sakura.ne.jp/ec-solairo/?id=schedule

スケジュール（平日（月・火・水・木・金）13:00〜17:00）で設定しています。

ページ遷移元のURL

遷移元のURLが指定した条件と一致したときのみボタンを表示します。例えば、Youtubeのリンクからやってきた場合のみボタンを表示させたい場合は

domainに「www.youtube.com」と指定すると、Youtubeのリンクから来たユーザーにのみ
「設定したボタン・シナリオ」を表示させる事ができます。

例えば、この機能を使うと遷移元によって表示するボタンやシナリオを変える事が可能となります。

※サンプルページ

https://www.youtube.com/watch?v=xAu5Rc9ArvY

コメント欄のリンクをクリックして「空色商店」に遷移すると設定したボタンが表示されます。

訪問回数

指定した訪問回数に、該当するユーザーのみに設定したボタン・シナリオを表示させます。この機能を使う事で、リピーターに対してのみ、ボタンやシナリオでアピールができます。

上限と下限で訪問回数の条件をコントロールします。

（例）

【下限3】【上限0】で設定した場合は、訪問回数が3回以上ならボタン・シナリオを表示

【下限0】【上限3】で設定した場合は、訪問回数が3回以内ならボタン・シナリオを表示

【下限5】【上限10】で設定した場合は、訪問回数が5回以上～10回以内ならボタン・シナリオを表示

※サンプルページ

https://ser-solairo.sakura.ne.jp/ec-solairo/?id=visits

3回目以降は同じアイコンとなりますので、繰り返し動作を見たい場合はシークレッドモードを
ご利用下さい。

訪問期間

指定した期間に再来訪したユーザーにボタン・シナリオを表示します。

この機能を使う事で、リピーターに対してのみ、ボタンやシナリオでアピールができます。

こんな事が可能

・3日以内にまた来てくれた人に、吹き出しアイコンで来訪のお礼を出す
・30日後にまた来てくれた来訪者に「お久しぶりです」のような吹き出しやシナリオを出す

（例）

例えば訪問期間を3日で設定すると、以下の期間内にボタンが表示されます。

〇日経過後、また来てくれた人にボタンシナリオを表示したい場合以下部分にチェックを入れると、再来訪が〇〇日以内から、〇〇日以上経過後に動作が変わります。

（例）

例えばチェックを入れて「30日」で設定した場合、前回のアクセスから30日以上経過してる人にだけ、設定したボタンやシナリオを表示できます。

※表示は1度のみで、画面遷移や更新などを行うと通常にのボタンに戻ります

要素のID

Webサイトに含まれる要素を利用して、合致するものが存在するページにのみ表示をします。

例えば、この機能を使うと、URL以外の方法でボタンの表示条件を設定できます。

こんな利用方法が可能

値段が1000円～10000円以内の商品だけにボタンを表示する
同じ要素を持つ製品だけにボタンを表示する
同じ要素を持つページだけにボタンを表示する

サイト内で利用している要素の仕組みに依存しますので、上記の例は環境によっては
出来ない場合もありますのでご注意下さい。

要素のiDで条件を設定する場合は、サイト内のスクリプトはCSSを管理しているベンダーにご相談下さい。

以下の要素が対象です。

・要素のID
・クエリ

更に以下を条件とします。

・有無
・完全一致
・数値範囲

（例）

例えばこのWebページの場合、クエリを「ec-price__price」

数値範囲「1000以上～10000以内」で設定をすると、1000円～10000円の範囲の商品ページだけにボタンを表示する事ができます

このページは要素が「ec-price__price」値段の値が「3080」となってるので、ボタンの条件に合致するので表示されます。

※値は以下のように整数に自動変換されます。

1000 -> 1000

1,000 -> 1000

1,20,300,400 -> 120300400

1.000.000 -> 1

1.35 -> 1

50円20銭 -> 50

16,500円 -> 16500

合計 3点 -> 3

合計 3点 5000円 -> 3

A5 = 1000 -> 5

\1,000 -> 1000

¥1,000 -> 1,000

￥1,000 -> 1,000

※サンプルページ

https://ser-solairo.sakura.ne.jp/ec-solairo/products/detail/2?id=button_28

ランダム

設定した確率でボタンが表示されます。この機能を使う事で、当たりが出たときだけ出る、ボタンやシナリオなど、アクセスの度、ランダムに変更されるボタンやシナリオが実現可能となります。

※サンプルページ

https://ser-solairo.sakura.ne.jp/ec-solairo/?id=random

こちらは50%で設定しています。

ボタン表示条件の設定

「〇秒経過したらボタンが表示される」「スクロールバー〇％まで動いたらボタンが表示される」など、ボタンが表示される条件を設定する事で、ボタンに動きを付ける事ができます。

ボタン表示条件をクリックして展開します
設定を追加するボタンをクリックします
条件の種類を選びます（タイマー or スクロール）

表示条件の種類

タイマーを選択した場合

ページを開いてから一定時間経過したら、ボタンが表示されます。
設定はミリ秒単位で設定してください。
※ミリ秒単位：1000ミリ/秒 = 1秒

参考：タイマーを5000ミリ秒（5秒）で設定した動画

hyouji_timer.mp4

スクロールを選択した場合

スクロールの指定した範囲内に入るとアイコンが表示されます。
以下の条件を指定してください。

設定項目	解説
対象要素	ページ全体のスクロールバーであれば設定を入れずに空白のままにしてください。対象となるスクロールバーの要素を指定したい場合のみ「#ID名」という書き方で指定してください。
開始位置（必須）	「30」と入れた場合はスクロールバーが30% 移動した位置が開始位置となります。
終了位置（必須）	「70」と入れた場合はスクロールバーが70% 移動した位置が終了位置となります。
範囲の反転	ここにチェックを入れると条件が反転して「範囲外」に移動したときにチャットボタンが表示されます。

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

複数条件を設定している場合は、すべての条件が満たされた場合か、どれかが満たされた場合かを選択してください。

ボタン非表示条件の設定

「〇秒経過したらボタンが非表示になる」「スクロールバー〇％まで動いたらボタンが非表示になる」など、ボタンが非表示となる条件を設定する事で、ボタンに動きを付ける事ができます。

ボタン非表示条件をクリックして展開します
設定を追加するボタンをクリックします。
条件の種類を選びます（タイマー or スクロール）

非表示条件の種類

タイマーを選択した場合

ページを開いてから一定時間経過したら、ボタンが非表示になります。
設定はミリ秒単位で設定してください。※ミリ秒単位：1000ミリ/秒 = 1秒

参考：タイマーを5000ミリ秒（5秒）で設定した動画

fadeout.mp4

スクロールを選択した場合

スクロールの指定した範囲内に入るとアイコンが非表示になります。
以下の条件を指定してください

設定項目	解説
対象要素	ページ全体のスクロールバーであれば設定を入れずに空白のままにしてください。対象となるスクロールバーの要素を指定したい場合のみ「#ID名」という書き方で指定してください。
開始位置（必須）	「30」と入れた場合はスクロールバーが30% 移動した位置が開始位置となります。
終了位置（必須）	「70」と入れた場合はスクロールバーが70% 移動した位置が終了位置となります。
範囲の反転	ここにチェックを入れると条件が反転して「範囲外」に移動したときにチャットボタンが非表示になります。