チャットボタン設定の作成方法・ボタン作成の概念をこのページで解説しています。
...
まずチャットボタン設定を開いたときに、一覧に表示されている設定を「リビジョン」と呼びます。
...
任意のリビジョンをクリックして展開すると、一覧表示される設定を「ボタン設定」と呼びます。
...
ツリーで考えるとこのようなイメージになっています。
...
| 情報 |
|---|
リビジョン単位でテスト環境・本番環境に適用 |
反映したいリビジョンの設定を選んで「テスト環境に適用」を行うとテスト環境に反映されます。
...
※テスト環境とは、弊社が用意したレビュー用の画面で、この画面からボタンの状態をプレビューする事ができます。
...
| ヒント |
|---|
WhatYaのタグが埋め込まれたページでテストをするには？ |
WhatYaのタグが埋め込まれているページにおいては、
設定をテスティングに反映後、御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。
...
以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://ser-solairo.sakura.ne.jp/ec-solairo/?_whatya_testing
テスト環境に適用したものに更に「本番環境に適用」を行うと本番環境に反映されます。
...
下記、サンプル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
設定例
...
複数条件を設定している場合は、すべての条件が満たされた場合か、どれかが満たされた場合かを選択してください。
...
レビュー画面でテストをするために、以下のドメイン名も条件に追加をしてください。
whatya.solairo-api.com
...
※レビュー画面とは空色が提供している、設定したチャットのプレビューが見れる画面です。
...
要素のiDで条件を設定する場合は、サイト内のスクリプトはCSSを管理しているベンダーにご相談下さい。
以下の要素が対象です。
・要素のID
・クエリ
更に以下を条件とします。
・有無
・完全一致
・数値範囲
（例）
例えばこのWebページの場合、クエリを「ec-price__price」
...