こちらではWhatYaのサンプルCSSをご紹介します。
チャットボタン
吹き出し（右向き）/（左向き）、画像＋テキストのサンプルCSSをご紹介します。
※各サンプルコード内の「#button_1」「#button_2」「#button_3」の部分は
チャットボタン設定のボタン要素IDで設定したIDに変更ください。
吹き出し（右向き・左向き共通）
アイコン画像を非表示
#button_1 ._ChatButton_BalloonAvatar {/* アイコン画像を非表示 */
display: none;
}
※サンプルコード内の「#button_1」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
吹き出し（右向き）
吹き出しの色変更
#button_1 ._ChatButton_BalloonText > div:nth-child(2) {/* 右向き 吹き出し部分 変更 */
background-color: #888888;
color: #ffffff;
}
#button_1 ._ChatButton_BalloonText > div:nth-child(3) {/* 右向き 吹き出し三角部分 変更 */
border-right: 8px solid #888888;
}
※サンプルコード内の「#button_1」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
吹き出し（左向き）
吹き出しの色変更
#button_2 ._ChatButton_BalloonText > div:nth-child(2) {/* 左向き 吹き出し部分 変更 */
background-color: #888888;
color: #ffffff;
}
#button_2 ._ChatButton_BalloonText > div:nth-child(3) {/* 左向き 吹き出し三角部分 変更 */
border-left: 8px solid #888888;
}
※サンプルコード内の「#button_2」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
画像＋テキスト
閉じるボタン ＜→×に変更
div#button_3 > 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");
}
※サンプルコード内の「#button_3」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
ボタンの位置変更（左側から右側）
※イメージ
div#button_3 {/* 画像＋テキスト 表示位置左→右変更 */
left: unset;
right: 30px;
bottom: 50px;
}
※サンプルコード内の「#button_3」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
ECサイト側の要素の裏にチャットボタンが隠れてしまう場合
チャットボタンの表示優先順位（z-index）を調整
div#_ChatButton {
z-index: 100;
}
※サンプルコード内の「#_ChatButton」は、通常ボタンのIDとなります。
チャットボタン設定で設定したボタンの場合は、ボタン要素IDで設定したIDに変更ください。
ECサイト側のページトップへ戻るボタンとチャットボタンの表示位置が被る場合
チャットボタンの表示位置を調整
div#_ChatButton {
bottom: 80px;
right: 30px;
}
※サンプルコード内の「#_ChatButton」は、通常ボタンのIDとなります。
チャットボタン設定で設定したボタンの場合は、ボタン要素IDで設定したIDに変更ください。
※bottomやrightの値は、ECサイト側のページトップへ戻るボタンの位置に合わせて適宜ご変更ください。
スペシャルタグ・アタッチメント
スナックバー
スペシャルタグ・アタッチメントのスナックバーの文字色と背景色を変更
._ChatWindowABar_Root > ._ChatWindowABar_Content { /* スナックバーの背景色と文字色変更 */
background-color: rgba(125,125,125,0.8);
color: #eae8e1;
}
._ChatWindowABar_Content > div:nth-child(2) > button { /* スナックバーの閉じるボタンの文字色変更 */
color: #eae8e1;
}
アイテム一覧
スペシャルタグ・アタッチメントの背景色を変更
#_ChatRoot ._ChatAtchBg { /* スペシャルタグ・アタッチメントの背景色変更 */
background-color: #515151;
}
ヘッダー戻るボタン
ヘッダー戻るボタンの文字色を変更（ヘッダー戻るボタンはアタッチメント・スペシャルタグ表示時のみ）
#_ChatHeader_BackIcon { /* ヘッダーの文字色変更 */
color: #FFFFFF;
}