Modifiez le thème de votre centre d’aide pour que les utilisateurs ne puissent pas voir le code HTML en fonction de leur rôle et de leur groupe. Si les informations que vous voulez masquer sont sensibles, cela n’est peut-être pas une bonne solution pour vous, car un utilisateur peut afficher la totalité du code avec la fonction Afficher le code source de la page dans son navigateur web.

Clause de non-responsabilité : Cet article est fourni à titre informatif uniquement. Zendesk ne fournit pas l’assistance pour le code et ne le garantit pas.

Ce workflow contient les sections suivantes :

  • Option 1 : Masquer ou afficher le code HTML en fonction du rôle de l’utilisateur
  • Option 2 : Masquer ou afficher le code HTML en fonction du groupe de l’utilisateur
Important : pour utiliser les fonctionnalités du code comme prévu, utilisez les modèles Guide V2 ou ultérieur. Pour en savoir plus, consultez : Mise à niveau à partir de l'API de création de modèles v1.

Option 1 : Masquer ou afficher le code HTML en fonction du rôle de l’utilisateur

Copiez le snippet de code suivant et collez-le directement sous le premier élément

dans le fichier 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>

Insérez le code ci-dessous sous le modèle CSS.

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

Insérez le code ci-dessous sous le modèle 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";
}

Option 2 : Masquer ou afficher le code HTML en fonction du groupe de l’utilisateur

Copiez le snippet de code suivant et collez-le directement sous le premier élément

dans le fichier home_page.hbs. 
const user_group = document.querySelector(".user_group")

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

Insérez le code ci-dessous sous le modèle CSS.

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

Insérez le code ci-dessous sous le modèle JS. Dans cet exemple, remplacez 'L2 Support' par votre groupe d’utilisateurs.

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";
  }
}
Remarque : jQuery n’est pas fourni par défaut. Veillez à importer une bibliothèque jQuery si vous voulez utiliser des instructions jQuery dans un thème à la place du code JavaScript vanille. Pour en savoir plus, consultez l’article : Importation ou mise à niveau de jQuery.

Pour en savoir plus, consultez l’article : Personnalisation du thème de votre centre d’aide.

Réalisé par Zendesk