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

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

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

Open

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

Open

メリット

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

• WhatYa管理画面上でWhatYaのCSSを設定できること

デメリット

• 現在WhatYaをご利用のお客さまの場合、お客さま側で設定されているCSSが効かなくなること

• review画面でCSS適用ボタンが効かなくなること

   

• お客さま側で設定されているJavaScript から WhatYaのボタンを操作することが難しくなること
  例）以下のコードのように特定の要素をクリック後、チャットウィンドウを起動させている場合

  onclick="document.querySelector('div#_ChatButton > button').click();return false;"

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

　この場合、以下のページのサンプルコードを参考に設定ください。
　【WhatYa】チャットウィンドウをリンクをクリックして起動できるようにするには？ | WhatYa管理画面のカスタムCSSをご利用のお客様

利用の流れ

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

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

1. 既に設定済みのリビジョンを編集する場合は、該当リビジョンを開いて「編集」ボタンをクリック
   新しくリビジョンを追加の場合は「新しく設定を始める」ボタンをクリックして、
   「編集ページ」にお進みください。

    

2. 編集ページに遷移後、「CSS分離」の項目にチェックを入れ、保存ボタンをクリックします。

    

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

   
   右下に「保存しました」が表示されましたら、リビジョンの設定が完了となります。

    

4. リビジョンの設定完了後、テスト環境・本番環境に反映します。
   テスト環境・本番環境への反映方法は以下をご参照ください。
   【チャット設定】画面の解説 | テスト環境・本番環境反映
   
   テスト環境・本番環境への反映後、チャット設定側の設定は完了となります。
   
   

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

1. 左のメニューからカスタムCSSを選択し、新しく設定をはじめるをクリックします。

    

2. Style Sheet内に任意のCSSを入力し、保存ボタンをクリックします。

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

   
   右下に「保存しました」が表示されましたら、リビジョンの設定が完了となります。

    

3. リビジョンの設定完了後、テスト環境・本番環境に反映します。
   まず、テスト環境に反映したいリビジョンを選択します。

    

4. テスト環境に反映をクリックします。

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

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

   
   ※御社環境でテスト環境に反映中の設定を確認する方法は以下をご参照ください。
   【はじめに】WhatYaのテスト方法について

    

5. テスト環境での動作確認後、本番環境への反映を行います。
   テスト環境を本番環境へ反映をクリックします。

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

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