【カスタムCSS】画面の解説

こちらのページでカスタムCSSについて解説します。

カスタムCSSをご利用の際に、チャット設定の「CSS分離」という項目にチェックを入れる必要があります。
こちらの項目にチェックを入れると、現在お客さま側で設定されているCSSが効かなくなります。
以下に記載の注意事項等をご確認の上、当機能のご利用を検討いただけますようお願いいたします。

カスタムCSSについて

WhatYa管理画面上でWhatYaのCSSを記述することができます。

事前設定：チャット設定「CSS分離」にチェックを入れていること
カスタムCSSを利用する場合はチャット設定の「CSS分離」にチェックを入れてください。

現在WhatYaをご利用のお客さまの場合、チャット設定の「CSS分離」にチェックを入れると、
お客さま側で設定されているCSSが効かなくなります。

カスタムCSSをご利用する場合は、チャット設定の「CSS分離」にチェックを入れた後、
お客さま側で設定されているCSSをカスタムCSSのStyle Sheetに入力してください。
詳しい設定の流れはカスタムCSS利用の流れをご覧ください。

お客さまがご利用のECパッケージのCSSの影響による、デザイン崩れを低減できること
※ただし、ECパッケージのCSSの単位がremで指定されている場合は影響を受けます。（フォントサイズ等）
WhatYa管理画面上でWhatYaのCSSを設定できること

現在WhatYaをご利用のお客さまの場合、お客さま側で設定されているCSSが効かなくなること
review画面でCSS適用ボタンが効かなくなること
お客さま側で設定されているJavaScript から WhatYaのボタンを操作することが難しくなること
例）以下のコードのように特定の要素をクリック後、チャットウィンドウを起動させている場合
onclick="document.querySelector('div#_ChatButton > button').click();return false;"

※以下のような機能をご実装いただいていた場合、うまく動かなくなる可能性がございます。

基本的な設定の流れは、以下の通りです。

以下のご説明は、設定を行ったことのある方を対象に説明しております。
初めて、設定をさわる方や、設定の新規追加・編集方法がわからない方はこちらをご覧ください。

既に設定済みのリビジョンを編集する場合は、該当リビジョンを開いて「編集」ボタンをクリック
新しくリビジョンを追加の場合は「新しく設定を始める」ボタンをクリックして、
「編集ページ」にお進みください。
編集ページに遷移後、「CSS分離」の項目にチェックを入れ、保存ボタンをクリックします。
保存ボタンをクリック後、任意のコメントを入力し、確定をクリックします。

右下に「保存しました」が表示されましたら、リビジョンの設定が完了となります。
リビジョンの設定完了後、テスト環境・本番環境に反映します。
テスト環境・本番環境への反映方法は以下をご参照ください。
【チャット設定】画面の解説 | テスト環境・本番環境反映

テスト環境・本番環境への反映後、チャット設定側の設定は完了となります。

カスタムCSS側の設定方法は、以下です。

左のメニューからカスタムCSSを選択し、新しく設定をはじめるをクリックします。
Style Sheet内に任意のCSSを入力し、保存ボタンをクリックします。

保存ボタンをクリック後、任意のコメントを入力し、確定をクリックします。

右下に「保存しました」が表示されましたら、リビジョンの設定が完了となります。
リビジョンの設定完了後、テスト環境・本番環境に反映します。
まず、テスト環境に反映したいリビジョンを選択します。
テスト環境に反映をクリックします。

任意のコメントを入力し、確定をクリックします。

右下に「環境への反映が完了しました」が表示されましたら、テスト環境への反映が完了となります。

※御社環境でテスト環境に反映中の設定を確認する方法は以下をご参照ください。
【はじめに】WhatYaのテスト方法について
テスト環境での動作確認後、本番環境への反映を行います。
テスト環境を本番環境へ反映をクリックします。

任意のコメントを入力し、確定をクリックします。

右下に「環境への反映が完了しました」が表示されましたら、本番環境への反映が完了となります。