Zoho Deskヘルプセンターのコンテンツ内容を、ログインユーザーと未ログインユーザーで切り分ける方法

Zoho Deskヘルプセンターのコンテンツ内容を、ログインユーザーと未ログインユーザーで切り分ける方法

Info
このナレッジは次のリクエストに応じ投稿されました
Zoho Deskヘルプセンターで、ログイン状態で表示内容を変えたい
ログインしているユーザーには説明を表示し、ログインしているユーザーにはそれを非表示としたいのですができますか？
Issue
  1. Zoho Deskヘルプセンターで、未ログインユーザー向けにメッセージを表示したい
  2. ログインしているユーザーには関係ないので隠したい
Solution

不完全な方法ですがCSSで実現可能です

PHPやJavaScriptは使用できない

Zoho Deskヘルプセンターでは、カスタムウィジェットにコンテンツ内容を入れ、それをページの必要箇所に配置する形をとるのですが、カスタムウィジェットではPHPやJavaScriptの使用は許可されていません。入力して保存するとJavaScriptは消されてしまいます。また、HTMLもheader部の編集は許可されておらず、またfooterにJavaScriptを配置しても同様に消されてしまいます。

不完全な方法ですがCSSしか手段がない

CSSは許可されていますので、これで表示を切り分けることができます。
Warning
何が不完全なのか
今からお伝えする方法では、隠したい部分の情報はユーザーのパソコンに渡されます。CSSにより、表面上隠すだけですので、コードが解る方が開発者ツールなどを使用し解除を試みれば、隠していた情報は簡単に見られてしまいます。それでも構わないような使い方にしてください。個人情報や絶対に見られたくない内容をこの方法で隠さないようお願いいたします。


CSSでコンテンツを隠す手順

1 次のCSSをヘルプセンターのカスタマイズでCSSに入れます

  1. /* ログインユーザーには「only_not_login」を非表示 */
  2. portal.signedIn .only_not_login {
  3.     display: none !important;
  4. }
  5. /* 未ログインユーザーには「only_login」を非表示 */
  6. portal:not(.signedIn) .only_login {
  7.     display: none !important;
  8. }
Info
場所
設定＞ヘルプセンター＞目的のヘルプセンター（複数ある場合）＞ヘルプセンターのカスタマイズ＞使用中のテーマのカスタマイズ＞CSS（タブ）

2 次のHTMLをカスタムウィジェットに入れ配置します

  1. <div>
  2.     <div id="custom-widget">
  3.         <p><br></p>
  4.         <div>
  5.             <div class="only_not_login">こちらのコンテンツは未ログインユーザーのみ表示されます。</div>
  6.             <div class="only_login">こちらのコンテンツはログインユーザーのみ表示されます。<br></div><br>
  7.         </div>
  8.     </div><br>
  9. </div>
  10. <div><br></div>
Info
場所
設定＞ヘルプセンター＞目的のヘルプセンター（複数ある場合）＞ヘルプセンターのカスタマイズ＞使用中のテーマのカスタマイズ＞ウィジェット（タブ）＞カスタムウィジェット



Alert
HTMLコードは、エディタにそのまま貼り付けても機能しません。ツール右端にある『Insert』をクリックし、『Insert HTML』をクリックしてコードを貼り付けます。編集は『Edit HTML』をクリックしてから行います。

3 ウィジェットを配置

左メニューのページをクリックします。編集できるページが展開されますので、その中からウィジェットを配置したいページを選択し、作成したカスタムウィジェットを配置します。

4 フロントエンドで確認

ログイン・ログアウトを繰り返し、コンテンツが正しく切り替えられるか確認してください。