ワークフロー：ユーザーのロールまたはグループに基づいてHTMLを表示または非表示にする

ヘルプセンターのテーマを変更し、ユーザーのロールとグループに基づいてHTMLを非表示にします。非表示にしたい情報が機密扱いの場合は、ユーザーはWebブラウザでソースの表示機能を選択することで全コードを表示できるため、これは有効な解決策ではない可能性があります。

免責事項：この記事は説明のみを目的として提供されています。記事内で例示したコードについて、Zendeskはサポートも保証もいたしません。

このワークフローは、次のセクションに分かれています。

• オプション1：ユーザーのロールに基づいてHTMLを非表示または表示にする
• オプション2：ユーザーのグループに基づいてHTMLを非表示または表示にする

重要：コードの機能を期待どおりに利用するには、GuideテンプレートV2以上を使用してください。詳細については、以下のトピックを参照してください：「テンプレートAPI v1からのアップグレード」

オプション1：ユーザーのロールに基づいてHTMLを非表示または表示にする

以下のコードスニペットをコピーして、home_page.hbsファイルの最初の

要素の直下に貼り付けます。

<div class="anonymous">
<h1>Welcome Anonymous User!</h1>
</div>
<div class="end_user">
<h1>Welcome End-User!</h1>
</div>
<div class="agent">
<h1>Welcome Agent!</h1>
</div>
<div class="manager">
<h1>Welcome Manager!</h1>
</div>

次のコードをCSSテンプレートの下に挿入します。

div.anonymous, div.end_user, div.agent, div.manager {
width: 100%;
text-align: center;
display: none;
}

次のコードをJSテンプレートの下に挿入します。

const anonymous = document.querySelector(".anonymous")
const end_user = document.querySelector(".end_user")
const agent = document.querySelector(".agent")
const manager = document.querySelector(".manager")

// Show div html based on role
if (HelpCenter.user.role=="anonymous"){
 anonymous.style.display = "block";
}

if (HelpCenter.user.role=="end_user"){
 end_user.style.display = "block";
}

if (HelpCenter.user.role=="agent"){
 agent.style.display = "block";
}

if (HelpCenter.user.role=="manager"){
 manager.style.display = "block";
}

オプション2：ユーザーのグループに基づいてHTMLを非表示または表示にする

以下のコードスニペットをコピーして、home_page.hbsファイルの最初の

要素の直下に貼り付けます。

const user_group = document.querySelector(".user_group")

<div class="user_group">
  <h1>Welcome to L2 Support!</h1>
</div>

次のコードをCSSテンプレートの下に挿入します。

div.user_group {
  width: 100%;
  text-align: center;
  display: none;
}

次のコードをJSテンプレートの下に挿入します。この例では、'L2 Support'をユーザーグループに置き換えます。

const groups = HelpCenter.user.groups;

for (let i = 0; i < groups.length; i++) {
    if (groups[i].name == 'L2 Support' && groups[i].isActive == true) {
    user_group.style.display = "block";
  }
}

メモ：jQueryはデフォルトでは提供されません。jQueryステートメントをバニラのJavaScriptのかわりにテーマ内で使用したい場合は、必ずjQueryライブラリをインポートしてください。詳細については、次の記事を参照してください：「jQueryのインポートまたはアップグレード」

詳細については、次の記事を参照してください：「ヘルプセンターのテーマのカスタマイズ」