Ändern Sie das Help Center-Design 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 für Sie, 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:

  • Option 1: HTML je nach Rolle des Benutzers aus- oder einblenden
  • Option 2: HTML je nach Gruppe des Benutzers aus- oder einblenden
Wichtig: Um die Funktionalität des Codes wie erwartet zu nutzen, verwenden Sie Guide Templating V2 oder höher. Weitere Informationen finden Sie unter Upgrade von Vorlagen-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

-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 CSS-Vorlage ein.

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

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

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

-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 CSS-Vorlage ein.

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

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";
  }
}
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 im Beitrag: Importieren oder Aktualisieren von jQuery.

Weitere Informationen finden Sie im folgenden Beitrag: Anpassen des Help-Center-Designs.

Powered by Zendesk