사용 중인 플랜

Suite Growth 플랜 이상에서 사용 가능모든 Guide 플랜에서 사용 가능

기본 Copenhagen 테마를 사용하면 최종 사용자가 헬프 센터 문서에 대해 투표할 수 있습니다. 이 사용법에서는 사용자가 문서에 반대 표를 던질 때 후속 메시지를 표시하도록 테마 코드를 편집합니다.

반대 표 메시지에는 티켓 양식이 들어 있는 새 요청 페이지의 링크가 포함되어 있습니다. 사용자는 티켓 양식을 작성하여 문서에 대한 피드백을 남길 수 있습니다. 양식은 사용자 지정 티켓 필드를 사용하여 문서의 URL을 캡처합니다. 양식을 제출하면 Zendesk Support에 티켓이 만들어집니다.

이 사용법에 대한 정보

이 사용법을 완료하려면 Zendesk Support 관리자여야 합니다. 이 사용법에는 다음과 같은 작업이 포함됩니다.
  • 작업 1: 익명 투표 사용 설정하기
  • 작업 2: 문서 URL에 대한 사용자 지정 티켓 필드 만들기
  • 작업 3: 사용자 지정 CSS 추가하기
  • 작업 4: 문서 페이지 기본서식 업데이트하기
  • 작업 5: 사용자 지정 JavaScript 추가하기
  • 작업 6: 변경 내용 테스트하기

이 사용법에서는 기본 Copenhagen 테마를 편집한다고 가정합니다. 다른 테마를 편집하거나 사용자 지정된 Copenhagen 테마에 비슷한 변경 작업을 하려면 코드 예를 변경해야 할 수 있습니다.

또한 이 사용법에서는 미리 채워진 티켓 양식을 사용합니다. 미리 채워진 티켓 양식을 사용하려면 기본서식 작성 API 버전 2를 사용하는 테마여야 합니다. 테마의 버전을 확인하려면 Guide 기본서식 작성 버전에 대한 정보를 참조하세요.

참고: 이 사용법에서는 CSS, 페이지 기본서식 및 JavaScript를 편집해야 합니다. 기본 테마를 편집하면 사용자 지정 테마로 저장됩니다. 사용자 지정 테마는 Zendesk에서 지원되지 않으며 새 기능이 출시될 때 자동으로 업데이트되지 않습니다. 헬프 센터의 기본 테마 및 사용자 지정 테마에 대한 정보를 참조하세요.

작업 1: 익명 투표 사용 설정하기

헬프 센터가 익명 방문자에게 보인다면 선택 단계로 익명 투표를 사용 설정할 수 있습니다. 익명 투표를 사용하면 최종 사용자가 로그인하지 않고서도 헬프 센터 문서에 투표할 수 있습니다.

익명 투표를 사용 설정하려면 로그인하지 않고도 사용자가 지식창고 문서에 투표할 수 있도록 설정하기의 안내를 따르세요. 그런 다음 이 문서로 되돌아가세요.

작업 2: 문서 URL에 대한 사용자 지정 티켓 필드 만들기

먼저 헬프 센터 문서 URL을 캡처하도록 사용자 지정 티켓 필드를 만듭니다.

문서 URL에 대한 사용자 지정 티켓 필드를 만들려면 다음과 같이 하세요.
  1. 관리 센터의 사이드바에서 개체 및 규칙을 클릭한 다음 티켓 > 필드를 선택합니다.
  2. 필드 추가를 클릭합니다.
  3. 텍스트 필드 유형을 선택합니다.

  4. 표시 이름으로 도움말 문서 URL을 입력합니다.
  5. 권한 아래에서 고객이 편집할 수 있음을 선택합니다.
  6. 고객 아래에서 도움말 문서 URL을 고객에게 표시되는 제목으로 입력합니다.

  7. 저장을 클릭합니다.

    계정에서 단일 티켓 양식을 사용하는 경우에는 티켓 양식에 자동으로 새 필드가 나타납니다. 여러 티켓 양식을 사용하는 경우에는 포함하려는 티켓 양식에 수동으로 필드를 추가해야 합니다.

  8. 필드 페이지에서 도움말 문서 URL 필드의 필드 ID를 복사합니다. 이 사용법의 뒷부분에서 이 ID를 사용하게 됩니다.

작업 3: 사용자 지정 CSS 추가하기

이제 반대표 메시지에 대한 사용자 지정 CSS를 테마에 추가합니다.

사용자 지정 CSS를 테마에 추가하려면 다음과 같이 하세요.
  1. Guide에서 테마에 대한 코드 편집기를 엽니다. 안내는 헬프 센터 테마 편집하기를 참조하세요.
  2. style.css를 클릭합니다.
  3. 파일 맨 아래에 다음 코드를 붙여 넣습니다. 
    /* ---- Downvote message ----------- */
.downvote-message {
  display: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

    이 코드는 .downvote-message 클래스에 대한 CSS 규칙을 추가합니다. 이 클래스를 사용하여 사용자가 문서에 반대 표를 던질 때까지 반대 표 메시지를 숨깁니다. 이 클래스는 메시지가 표시될 때 스타일도 적용합니다.

  4. 헬프 센터의 라이브 테마를 업데이트하는 경우에는 게시를 클릭합니다. 그렇지 않으면 저장을 클릭합니다.

작업 4: 문서 페이지 기본서식 업데이트하기

이제 반대 표 메시지에 대한 HTML을 테마의 문서 페이지 기본서식에 추가합니다.

문서 페이지 기본서식을 업데이트하려면 다음과 같이 하세요.
  1. Guide에서 테마에 대한 코드 편집기를 엽니다.
  2. article_page.hbs를 클릭합니다.
  3. <div class="article-votes"> 의 닫는 태그 앞에 다음 HTML 스니펫을 추가합니다. 
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_CUSTOM_FIELD_ID=HTTPS://SUBDOMAIN.ZENDESK.COM{{url}}">Please tell us
      why.</a></p>
</div>
    스니펫에서 다음과 같이 바꿉니다.
    • CUSTOM_FIELD_ID를 문서 URL에 대한 사용자 지정 티켓 필드 만들기에서 만든 도움말 문서 URL 필드의 필드 ID로 바꿉니다.
    • HTTPS://SUBDOMAIN.ZENDESK.COM을 헬프 센터의 기준 URL로 바꿉니다.
    HTML이 각 문서의 투표 버튼 아래에 반대 표 메시지를 추가합니다. 메시지의 상위 div는 문서 URL에 대한 사용자 지정 티켓 필드 만들기에서 추가한 downvote-message 클래스를 사용합니다. 이 클래스의 CSS는 모든 사용자로부터 메시지를 숨깁니다. 이 사용법의 뒷부분에서 사용자가 부정적인 투표를 남길 때 메시지를 표시하도록 사용자 지정 JavaScript를 추가합니다.

    메시지에는 티켓 양식이 들어 있는 새 요청 페이지의 링크가 포함되어 있습니다. 이 링크는 URL 매개변수를 사용하여 양식의 도움말 문서 URL 필드를 현재 문서 URL로 미리 채웁니다. 티켓 양식 미리 채우기에 대해 자세히 알아보려면 미리 채워진 티켓 양식 만들기를 참조하세요.

  • 계정에서 단일 티켓 양식을 사용하는 경우에는 다음 단계로 건너뜁니다. 계정에서 여러 티켓 양식을 사용하는 경우에는 &ticket_form_id=FORM_ID URL 매개변수를 HTML 스니펫의 href 값 끝에 추가합니다. 매개변수에서 FORM_ID를 티켓 양식의 ID로 바꿉니다. 예: 
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_12345=https://example.zendesk.com{{url}}&ticket_form_id=67890">Please tell us
      why.</a></p>
</div>

    티켓 양식을 최종 사용자가 볼 수 있어야 합니다. 티켓 양식의 표시 대상을 확인하거나 변경하려면 다양한 요청 유형을 지원하기 위한 여러 티켓 양식 만들기를 참조하세요.

  • 기본서식의 <div class="article-votes"> 요소를 검토합니다. 다음과 비슷할 것입니다. 
    <div class="article-votes">
  <span class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</span>
  <div class="article-votes-controls" role="group" aria-labelledby="article-votes-label">
    {{vote 'up' role='radio' class='button article-vote article-vote-up' selected_class="button-primary"}}
    {{vote 'down' role='radio' class='button article-vote article-vote-down' selected_class="button-primary"}}
  </div>
  <small class="article-votes-count">
    {{vote 'label' class='article-vote-label'}}
  </small>
  <div class="downvote-message">
    <p>We're sorry to hear that.</p>
    <p><a href="{{page_path 'new_request'}}?tf_67890=https://example.zendesk.com{{url}}">Please tell us
        why.</a></p>
  </div>
</div>
  • 헬프 센터의 라이브 테마를 업데이트하는 경우에는 게시를 클릭합니다. 그렇지 않으면 저장을 클릭합니다.

작업 5: 사용자 지정 JavaScript 추가하기

사용자가 문서에 반대 표를 던질 때 반대 표 메시지를 표시하도록 일부 JavaScript를 추가하세요.

JavaScript를 테마에 추가하려면 다음과 같이 하세요.
  1. Guide에서 테마에 대한 코드 편집기를 엽니다.
  2. script.js를 클릭합니다.
  3. 파일 맨 아래에 다음 코드를 붙여 넣습니다. 
    // Display message for article downvotes
document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector(".article-votes-controls")) {
    const voteButtons = document.querySelectorAll(".article-vote");
    const voteMessage = document.querySelector(".downvote-message");

    voteButtons.forEach((button) => {
      button.addEventListener("click", () => {
        let isDownButton = button.matches(".article-vote-down");
        let isPressed = button.matches(".button-primary");

        if (isDownButton && !isPressed) {
          voteMessage.style.display = "block";
        } else {
          voteMessage.style.display = "none";
        }
      });
    });
  }
});

    사용자가 아니요 투표 버튼을 클릭하면 JavaScript가 문서 페이지 기본서식 업데이트하기에서 추가한 반대 표 메시지를 표시합니다. 사용자가 투표를 재설정하거나 예로 변경하면 JavaScript가 다시 메시지를 숨깁니다.

  4. 헬프 센터의 라이브 테마를 업데이트하는 경우에는 게시를 클릭합니다. 그렇지 않으면 저장을 클릭합니다.

작업 6: 변경 내용 테스트하기

새 투표 기능을 테스트하여 예상대로 작동하는지 확인하세요.

변경 작업을 테스트하려면 다음과 같이 하세요.
  1. Guide에서 테마에 대한 코드 편집기를 엽니다.
  2. 미리 보기를 클릭합니다.
  3. 미리 보기 창에서 최종 사용자의 미리 보기 역할을 선택합니다.
  4. 헬프 센터에서 문서로 이동합니다. 문서 맨 아래에 있는 도움이 되었습니까? 질문에 아니요 투표 버튼을 클릭합니다.

    이유를 알려 주세요 링크가 포함된 짧은 메시지가 나타나야 합니다.

  5. 이유를 알려 주세요 링크를 클릭합니다.

    링크는 티켓 양식이 들어 있는 새 요청 페이지를 열어야 합니다. 티켓 양식의 도움말 문서 URL 필드에는 관련 헬프 센터 문서의 URL이 포함되어야 합니다.

    원한다면 양식을 제출하여 테스트 티켓을 만들 수 있습니다.

  6. 헬프 센터의 다른 문서로 이동하여 아니요 투표 버튼을 클릭합니다.
  7. 반대 표 메시지가 나타난 후 예 투표 버튼을 클릭합니다. 반대 표 메시지가 사라져야 합니다.
  8. 헬프 센터의 라이브 테마를 변경하지 않았고 시작할 준비가 되었으면 사용자 지정 테마를 라이브 테마로 설정할 수 있습니다. 헬프 센터의 라이브 테마 변경하기를 참조하세요.
Zendesk 제공