Flujo de trabajo: Ocultar o mostrar HTML según el rol o el grupo del usuario

Modifique el tema del centro de ayuda para ocultar HTML a los usuarios según su rol y grupo. Si la información que desea ocultar es confidencial, es posible que esta no sea una solución viable para usted, ya que un usuario puede ver el código completo con la función Ver código fuente de la página en su navegador web.

Descargo de responsabilidad: Este artículo se ofrece con fines de instrucción únicamente. Zendesk no ofrece soporte para el código ni lo garantiza.

Este flujo de trabajo contiene las siguientes secciones:

• Opción 1: Ocultar o mostrar HTML según el rol del usuario
• Opción 2: Ocultar o mostrar HTML según el grupo del usuario

Importante: Para utilizar la funcionalidad del código como se espera, use Guide Templating V2 o superior. Para obtener más información, consulte: Actualizar desde la API de creación de plantillas v1.

Opción 1: Ocultar o mostrar HTML según el rol del usuario

Copie el fragmento de código a continuación y péguelo directamente debajo del primer elemento

en el archivo 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>

Inserte el código a continuación debajo de la plantilla de CSS.

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

Inserte el código a continuación debajo de la plantilla 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";
}

Opción 2: Ocultar o mostrar HTML según el grupo del usuario

Copie el fragmento de código a continuación y péguelo directamente debajo del primer elemento

en el archivo home_page.hbs.

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

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

Inserte el código a continuación debajo de la plantilla de CSS.

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

Inserte el código a continuación debajo de la plantilla JS. En este ejemplo, reemplace 'L2 Support' con su grupo de usuarios.

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

Nota: jQuery no se proporciona de manera predeterminada. Asegúrese de importar una biblioteca jQuery si desea usar declaraciones jQuery en un tema en lugar de JavaScript sin formato. Para obtener más información, consulte el artículo: Importar o actualizar jQuery.

Para obtener más información, consulte el artículo: Personalización del tema de su centro de ayuda.