チャットボタン設定の作成方法・ボタン作成の概念をこのページで解説しています。
...
まずチャットボタン設定を開いたときに、一覧に表示されている設定を「リビジョン」と呼びます。
...
任意のリビジョンをクリックして展開すると、一覧表示される設定を「ボタン設定」と呼びます。
...
WhatYaのタグが埋め込まれているページにおいては、
設定をテスティングに反映後、御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。
...
以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://ser-solairo.sakura.ne.jp/ec-solairo/?_whatya_testing
テスト環境に適用したものに更に「本番環境に適用」を行うと本番環境に反映されます。
...
| コード ブロック |
|---|
/*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にご変更ください。
| 情報 |
|---|
ボタンアニメーションの動作と設定 |
この設定をする事で、スライドインやフェードインでボタンに動きをつけて存在をアピールする事ができます。どのような動作をするかは動画をご用意いたしましたので、こちら参考にしてください。
...
指定したドメインを含むすべての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」
...