워크플로우: 사용자의 역할이나 그룹에 따라 HTML 숨기기 또는 표시

역할 및 그룹에 따라 사용자에게 HTML을 숨기도록 헬프 센터 테마를 수정합니다. 숨기려는 정보가 민감한 경우에는 사용자가 웹 브라우저에서 페이지 소스 보기 기능으로 전체 코드를 볼 수 있으므로 이 방법이 적합하지 않을 수 있습니다.

고지 사항: 이 문서는 안내 목적으로만 제공되고 있습니다. Zendesk는 코드를 지원하거나 보장하지 않습니다.

이 워크플로우는 다음 섹션으로 구성되어 있습니다.

• 옵션 1: 사용자의 역할에 따라 HTML 숨기기 또는 표시
• 옵션 2: 사용자의 그룹에 따라 HTML 숨기기 또는 표시

중요: 예상대로 코드의 기능을 활용하려면 Guide Templating V2 이상을 사용하세요. 자세한 내용은 기본서식 작성 API v1에서 업그레이드하기를 참조하세요.

옵션 1: 사용자의 역할에 따라 HTML 숨기기 또는 표시

아래의 코드 스니펫을 복사하여 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>

CSS 기본서식 아래에 다음 코드를 삽입합니다.

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

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

옵션 2: 사용자의 그룹에 따라 HTML 숨기기 또는 표시

아래의 코드 스니펫을 복사하여 home_page.hbs 파일의 첫 번째

요소 바로 아래에 붙여넣으세요.

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

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

CSS 기본서식 아래에 다음 코드를 삽입합니다.

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

JS 기본서식 아래에 다음 코드를 삽입합니다. 이 예에서는 'L2 Support'를 사용자 그룹으로 바꿉니다.

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

참고: jQuery는 기본적으로 제공되지 않습니다. 바닐라 JavaScript 대신 테마에서 jQuery 문을 사용하려면 jQuery 라이브러리를 가져와야 합니다. 자세한 내용은 jQuery 가져오기 또는 업그레이드하기 문서를 참조하세요.

자세한 내용은 헬프 센터 테마 사용자 지정하기 문서를 참조하세요.