Ändern Sie das Help Center so, dass HTML für Benutzer anhand ihrer Rolle und Gruppe nicht angezeigt wird. Wenn die Informationen, die Sie ausblenden möchten, sensibel sind, ist dies möglicherweise keine praktikable Lösung, da die Benutzer den vollständigen Code mit der Funktion Seitenquelle anzeigen in ihrem Webbrowser anzeigen können.

Haftungsausschluss: Dieser Beitrag dient lediglich zu Demonstrationszwecken. Zendesk bietet keine Unterstützung oder Garantie für den Code.

Dieser Workflow enthält die folgenden Abschnitte:

Wichtig: Um die Funktionalität des Codes wie erwartet zu nutzen, verwenden Sie Guide Templating V2 oder höher. Weitere Informationen finden Sie unter Upgraden von Templating API v1.

Option 1: HTML je nach Rolle des Benutzers aus- oder einblenden

Kopieren Sie das folgende Code-Snippet und fügen Sie es direkt unter dem ersten <div class="container">-Element in der Datei home_page.hbs ein.

<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>

Fügen Sie den folgenden Code unter der JS-Vorlage ein.

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";
}

Fügen Sie den folgenden Code unter der CSS-Vorlage ein.

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

Option 2: HTML je nach Gruppe des Benutzers aus- oder einblenden

Kopieren Sie das folgende Code-Snippet und fügen Sie es direkt unter dem ersten <div class="container">-Element in der Datei home_page.hbs ein.

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

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

Fügen Sie den folgenden Code unter der JS-Vorlage ein. In diesem Beispiel ersetzen Sie 'L2 Support' durch Ihre Benutzergruppe.

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";
  }
}

Fügen Sie den folgenden Code unter der CSS-Vorlage ein.

div.user_group {
  width: 100%;
  text-align: center;
  display: none;
}
Hinweis:jQuery ist standardmäßig nicht verfügbar. Wenn Sie in einem Design anstelle von herkömmlichem JavaScript jQuery-Anweisungen verwenden möchten, müssen Sie eine jQuery-Bibliothek importieren. Weitere Informationen finden Sie unter Importieren oder Upgraden von jQuery.

Weitere Informationen finden Sie unter Anpassen des Help-Center-Designs.

Hinweis zur Übersetzung: Dieser Beitrag wurde mit automatischer Übersetzungssoftware übersetzt, um dem Leser ein grundlegendes Verständnis des Inhalts zu vermitteln. Trotz angemessener Bemühungen, eine akkurate Übersetzung bereitzustellen, kann Zendesk keine Garantie für die Genauigkeit übernehmen.

Sollten in Bezug auf die Genauigkeit der Informationen im übersetzten Beitrag Fragen auftreten, beziehen Sie sich bitte auf die englische Version des Beitrags, die als offizielle Version gilt.

Powered by Zendesk