ページの比較

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

...

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

...

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

...

WhatYaのタグが埋め込まれているページにおいては、
設定をテスティングに反映後、御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。

...

以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://ser-solairo.sakura.ne.jp/ec-solairo/?_whatya_testing

テスト環境に適用したものに更に「本番環境に適用」を行うと本番環境に反映されます。

...

現在ご利用中のWhatYaを維持する必要があります。ご利用中のWhatYaを表示させたい場合は以下ご留意ください。

...

Note

新規リビジョン作成時にデフォルトで入っているボタン設定を削除もしくは上書きした場合、現在ご利用中のWhatYaが表示されなくなるのでご注意ください。

...

ご利用中のWhatYaを表示させたい場合は、デフォルトで入っているボタン設定を削除もしくは上書きせずに、そのまま残した状態で新しくボタン設定を追加ください。

...

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

...

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

...

ポップアップ

こちらのボタンはポップアップとしてご利用いただけます。
表示させるポップアップの画像とポップアップを押下した先のページのURLを設定することができます。
また、ポップアップを表示させる位置と大きさを指定いただけるので、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");
}

...

指定したドメインを含むすべての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/?id=schedule

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

...

ページ遷移元のURL

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

...

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

...

※サンプルページ

...

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

 訪問回数

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

...

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

以下の要素が対象です。

・要素のID
・クエリ

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

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

（例）

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

...

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%で設定しています。

...

デバイスの種類

ユーザーの利用デバイスの種類（パソコンもしくはスマホ）によって、ボタンやシナリオの表示内容を変更することができます。

...

条件の種類を「デバイスの種類」を選択し、有効化するデバイスの種類「パソコン」もしくは「スマホ」を選んでください。

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

...