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.
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
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.
0 commentaire