Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

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

...

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

...

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

...

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

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

...

下記、サンプルCSSです。
こちらのCSSをベンダーさまにお渡しし、デザイン変更をご依頼ください。

Note

下記はあくまでもサンプルとなりますので、各企業さま毎の環境での動作の保証はできかねますことご了承ください。

Code Block
languagecss
/* <ボタン → ×ボタン */
#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
※「=」がついていないパラメーターの場合
設定例image-20241009-062311.pngImage Removed

...

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

...

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

...

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

...

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

以下の要素が対象です。

・要素のID
・クエリ

 

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

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

(例)

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

...