Fluxo de trabalho: Ocultar ou exibir HTML com base na função ou grupo do usuário

Modifique o tema da central de ajuda para ocultar HTML dos usuários com base em sua função e grupo. Se as informações que você deseja ocultar forem confidenciais, essa pode não ser uma solução viável para você, pois um usuário pode visualizar o código completo com a função Visualizar código-fonte da página em seu navegador.

Isenção de responsabilidade: Este artigo destina-se apenas a fins informativos. A Zendesk não oferece suporte nem garantia ao código.

Esse fluxo de trabalho contém as seções a seguir:

• Opção 1: Ocultar ou exibir HTML com base na função do usuário
• Opção 2: Ocultar ou exibir HTML com base no grupo do usuário

Importante: Para utilizar a funcionalidade do código conforme o esperado, use o Guide Templating V2 ou superior. Para obter mais informações, consulte: Atualização do Templating API v1.

Opção 1: Ocultar ou exibir HTML com base na função do usuário

Copie o trecho de código abaixo e cole diretamente abaixo do primeiro

elemento no arquivo 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>

Insira o código abaixo sob o modelo CSS.

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

Insira o código abaixo sob o modelo 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";
}

Opção 2: Ocultar ou exibir HTML com base no grupo do usuário

Copie o trecho de código abaixo e cole diretamente abaixo do primeiro

elemento no arquivo home_page.hbs .

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

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

Insira o código abaixo sob o modelo CSS.

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

Insira o código abaixo sob o modelo JS. Neste exemplo, substitua 'L2 Support' com seu grupo de usuários.

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

Observação: O jQuery não é fornecido por padrão. Importe uma biblioteca jQuery se desejar usar instruções jQuery em um tema no lugar de Vanilla JavaScript. Para obter mais informações, consulte o artigo: Importação ou atualização do jQuery.

Para obter mais informações, consulte o artigo: Personalização do tema da Central de Ajuda.