こちらのページでカスタムCSSについて解説します。
| Aura panel |
|---|
| summary | WhatYaをご利用中のお客さまへの留意事項 |
|---|
| params | JTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjM5ZDlkOWQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMldoYXRZYSVFMyU4MiU5MiVFMyU4MSU5NCVFNSU4OCVBOSVFNyU5NCVBOCVFNCVCOCVBRCVFMyU4MSVBRSVFMyU4MSU4QSVFNSVBRSVBMiVFMyU4MSU5NSVFMyU4MSVCRSVFMyU4MSVCOCVFMyU4MSVBRSVFNyU5NSU5OSVFNiU4NCU4RiVFNCVCQSU4QiVFOSVBMCU4NSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMmQyZDJkJTIyJTJDJTIyZm9udFNpemUlMjIlM0EyNiUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJiYWNrZ3JvdW5kQ29sb3IlMjIlM0ElN0IlMjJjb2xvciUyMiUzQSUyMiUyM2ZmZmZmZiUyMiU3RCUyQyUyMmJvcmRlciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyd2lkdGglMjIlM0ExMCUyQyUyMnRvcCUyMiUzQWZhbHNlJTJDJTIycmlnaHQlMjIlM0FmYWxzZSUyQyUyMmJvdHRvbSUyMiUzQWZhbHNlJTJDJTIybGVmdCUyMiUzQXRydWUlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTdEJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTdCJTIycmFkaXVzJTIyJTNBNCU3RCUyQyUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCU3RCU3RAJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMldoYXRZYSVFMyU4MiU5MiVFMyU4MSU5NCVFNSU4OCVBOSVFNyU5NCVBOCVFNCVCOCVBRCVFMyU4MSVBRSVFMyU4MSU4QSVFNSVBRSVBMiVFMyU4MSU5NSVFMyU4MSVCRSVFMyU4MSVCOCVFMyU4MSVBRSVFNyU5NSU5OSVFNiU4NCU4RiVFNCVCQSU4QiVFOSVBMCU4NSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMmQyZDJkJTIyJTJDJTIyZm9udFNpemUlMjIlM0EyNiUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJiYWNrZ3JvdW5kQ29sb3IlMjIlM0ElN0IlMjJjb2xvciUyMiUzQSUyMiUyM2ZmZmZmZiUyMiU3RCUyQyUyMmJvcmRlciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyd2lkdGglMjIlM0ExMCUyQyUyMnRvcCUyMiUzQWZhbHNlJTJDJTIycmlnaHQlMjIlM0FmYWxzZSUyQyUyMmJvdHRvbSUyMiUzQWZhbHNlJTJDJTIybGVmdCUyMiUzQXRydWUlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTdEJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTdCJTIycmFkaXVzJTIyJTNBNCU3RCUyQyUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCU3RCU3RA== |
|---|
|
カスタムCSSをご利用の際に、チャット設定の「CSS分離」という項目にチェックを入れる必要があります。
こちらの項目にチェックを入れると、現在お客さま側で設定されているCSSが効かなくなります。
以下に記載の注意事項等をご確認の上、当機能のご利用を検討いただけますようお願いいたします。  Image Added |
WhatYa管理画面上でWhatYaのCSSを記述することができます。利用する際の前提や注意事項等、以下に記載いたします。
...
...
事前設定：チャット設定「CSS分離」にチェックを入れていること |
前提：チャット設定 事前設定：チャット設定 「CSS分離」にチェックを入れていること
カスタムCSSを利用する場合はチャット設定の「CSS分離」にチェックを入れてください。
...
| Aura panel |
|---|
| summary | WhatYaをご利用中のお客さまへの留意事項 |
|---|
| params | JTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMldoYXRZYSVFMyU4MiU5MiVFMyU4MSU5NCVFNSU4OCVBOSVFNyU5NCVBOCVFNCVCOCVBRCVFMyU4MSVBRSVFMyU4MSU4QSVFNSVBRSVBMiVFMyU4MSU5NSVFMyU4MSVCRSVFMyU4MSVCOCVFMyU4MSVBRSVFNyU5NSU5OSVFNiU4NCU4RiVFNCVCQSU4QiVFOSVBMCU4NSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMmQyZDJkJTIyJTJDJTIyZm9udFNpemUlMjIlM0EyNiUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJiYWNrZ3JvdW5kQ29sb3IlMjIlM0ElN0IlMjJjb2xvciUyMiUzQSUyMiUyM2ZmZmZmZiUyMiU3RCUyQyUyMmJvcmRlciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyd2lkdGglMjIlM0ExMCUyQyUyMnRvcCUyMiUzQWZhbHNlJTJDJTIycmlnaHQlMjIlM0FmYWxzZSUyQyUyMmJvdHRvbSUyMiUzQWZhbHNlJTJDJTIybGVmdCUyMiUzQXRydWUlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTdEJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTdCJTIycmFkaXVzJTIyJTNBNCU3RCUyQyUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCU3RCU3RA== |
|---|
|
現在WhatYaをご利用のお客さまの場合、チャット設定の「CSS分離」にチェックを入れると、
お客さま側で設定されているCSSが効かなくなります。 カスタムCSSをご利用する場合は、チャット設定の「CSS分離」にチェックを入れた後、
お客さま側で設定されているCSSをカスタムCSSのStyle Sheetに入力してください。
詳しい設定の流れはカスタムCSS利用の流れをご覧ください。 |
| 情報 |
|---|
「CSS分離」を利用するメリット・デメリット |
| 注意 |
|---|
| チャット設定「CSS分離」にチェックを入れた場合の注意点 |
⭕ メリット
お客さまがご利用のECパッケージのCSSの影響による、デザイン崩れを低減できること
※ただし、ECパッケージのCSSの単位がremで指定されている場合は影響を受けます。（フォントサイズ等）
WhatYa管理画面上でWhatYaのCSSを設定できること
❌ デメリット
現在WhatYaをご利用のお客さまの場合、お客さま側で設定されているCSSが効かなくなること
review画面でCSS適用ボタンが効かなくなること
Image Addedお客さま側で設定されているJavaScript から WhatYaのボタンを操作することが難しくなること
例）以下のコードのように特定の要素をクリック後、チャットウィンドウを起動させている場合
| コード ブロック |
|---|
|
onclick="document.querySelector('div#_ChatButton > button').click();return false;" |
※以下のような機能をご実装いただいていた場合、うまく動かなくなる可能性がございます。
Image Added
この場合、以下のページのサンプルコードを参考に設定ください。
https://solairo.atlassian.net/wiki/spaces/WHAT1/pages/1538523231/WhatYa#WhatYa%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0CSS%E3%82%92%E3%81%94%E5%88%A9%E7%94%A8%E3%81%AE%E3%81%8A%E5%AE%A2%E6%A7%98
利用の流れ
基本的な設定の流れは、以下の通りです。
...
| パネル |
|---|
| panelIconId | 31-20e3 |
|---|
| panelIcon | :one: |
|---|
| panelIconText | 1️⃣ |
|---|
| bgColor | #E6FCFF |
|---|
|
チャット設定 |
以下のご説明は、設定を行ったことのある方を対象に説明しております。
初めて、設定をさわる方や、設定の新規追加・編集方法がわからない方はこちらをご覧ください。
既に設定済みのリビジョンを編集する場合は、該当リビジョンを開いて「編集」ボタンをクリック
新しくリビジョンを追加の場合は「新しく設定を始める」ボタンをクリックして、
「編集ページ」にお進みください。
Image Added編集ページに遷移後、「CSS分離」の項目にチェックを入れ、保存ボタンをクリックします。
Image Added保存ボタンをクリック後、任意のコメントを入力し、確定をクリックします。
Image Added
右下に「保存しました」が表示されましたら、リビジョンの設定が完了となります。
Image Addedリビジョンの設定完了後、テスト環境・本番環境に反映します。
テスト環境・本番環境への反映方法は以下をご参照ください。
https://solairo.atlassian.net/wiki/spaces/WHAT1/pages/2341339164#%E3%83%86%E3%82%B9%E3%83%88%E7%92%B0%E5%A2%83%E3%83%BB%E6%9C%AC%E7%95%AA%E7%92%B0%E5%A2%83%E5%8F%8D%E6%98%A0
テスト環境・本番環境への反映後、チャット設定側の設定は完了となります。
| パネル |
|---|
| panelIconId | 32-20e3 |
|---|
| panelIcon | :two: |
|---|
| panelIconText | 2️⃣ |
|---|
| bgColor | #E6FCFF |
|---|
|
カスタムCSS |
カスタムCSS側の設定方法は、以下です。
左のメニューからカスタムCSSを選択し、新しく設定をはじめるをクリックします。
Image Added Style Sheet内に任意のCSSを入力し、保存ボタンをクリックします。
Image Added
保存ボタンをクリック後、任意のコメントを入力し、確定をクリックします。
Image Added
右下に「保存しました」が表示されましたら、リビジョンの設定が完了となります。
Image Added リビジョンの設定完了後、テスト環境・本番環境に反映します。
まず、テスト環境に反映したいリビジョンを選択します。
Image Added テスト環境に反映をクリックします。
Image Added
任意のコメントを入力し、確定をクリックします。
Image Added
右下に「環境への反映が完了しました」が表示されましたら、テスト環境への反映が完了となります。
Image Added
※御社環境でテスト環境に反映中の設定を確認する方法は以下をご参照ください。
【はじめに】WhatYaのテスト方法について
Image Added テスト環境での動作確認後、本番環境への反映を行います。
テスト環境を本番環境へ反映をクリックします。
Image Added
任意のコメントを入力し、確定をクリックします。
Image Added
右下に「環境への反映が完了しました」が表示されましたら、本番環境への反映が完了となります。
Image Added