헬프 센터 JavaScript 쿡북

Suite

Growth, Professional, Enterprise 또는 Enterprise Plus

Support(다음 포함)

Guide 모든 플랜

JavaScript와 jQuery를 사용해서 헬프 센터의 디자인을 쉽게 사용자 지정할 수 있습니다. 이 쿡북은 원하는 대로 헬프 센터를 디자인할 수 있도록 도와드리기 위해 마련되었습니다.

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

참고: 평가판 사용자에게는 Professional 플랜이 제공되며, 이 플랜에는 코드 편집 옵션이 포함되어 있지만 Team 플랜을 구매하는 경우에는 더 이상 이 기능을 사용할 수 없습니다.

헬프 센터에서 JavaScript에 액세스하고 편집하려면 CSS 또는 JavaScript 사용자 지정하기를 참조하세요.

헬프 센터 기본서식 작성 언어 또는 CSS를 사용해서 헬프 센터를 사용자 지정할 수도 있습니다.

• 헬프 센터 기본서식 참고자료
• 헬프 센터 기본서식 작성 쿡북
• 헬프 센터 CSS 쿡북

사용법 목록

Zendesk는 앞으로도 더 많은 사용법을 추가할 예정이지만 모든 사용법을 제공해 드릴 수는 없을 것입니다. 왜냐하면 JavaScript로 수행할 수 없는 작업은 거의 없기 때문입니다. 댓글 섹션에 사용법을 게시해 주시면 이 쿡북에 추가하겠습니다.

• 내 활동 링크 텍스트 변경
• 내 활동의 티켓 사이드바에서 사용자 지정 필드 숨기기
• 요청 양식의 "제목" 및 "설명" 레이블 이름 변경
• 사용자 지정 티켓 양식의 필드 채우기
• 요청 양식의 사용자 지정 필드 순서 변경
• 요청 양식에 헤더 추가
• 언어 드롭다운에서 언어 숨기기
• 언어 선택기에서 텍스트 문자열을 국기 아이콘으로 바꾸기
• 선택한 언어를 기준으로 커뮤니티 숨기기
• 검색 엔진에서 문서 색인화 방지

참고: 표준 테마의 페이지 기본서식, CSS 또는 JavaScript를 편집하거나, 자체 테마를 개발하면 사용자 지정 테마로 저장됩니다. 사용자 지정 테마를 필요로 하는 사용법은 Zendesk에서 지원되지 않으며 새 기능이나 테마가 출시될 때 자동으로 업데이트되지 않습니다(헬프 센터의 표준 테마 및 사용자 지정 테마에 대한 정보 참조).

내 활동 링크 텍스트 변경

header.hbs 기본서식에 내 활동 클래스를 추가합니다.

{{link "my_activities" role="menuitem" class='my-activities'}}

JavaScript 기본서식에서 $(document).ready(function() 함수에 다음 jQuery 문을 추가합니다.

$(' .my-activities').html(' See my requests');

내 활동의 티켓 사이드바에서 사용자 지정 필드 숨기기

JavaScript를 사용하여 내 활동 페이지의 티켓 사이드바에서 사용자 지정 필드를 숨길 수 있습니다. 레이블을 기준으로 사용자 지정 필드를 선택합니다. 예를 들어 사용자 지정 필드의 레이블이 "Member rewards"이면 레이블에 "Member" 또는 "rewards" 또는 "Member rewards"가 포함되어 있는 경우 필드를 숨길 수 있습니다.

script.js 파일에 다음 jQuery 함수를 추가하세요.

$(document).ready(function() {
  if (window.location.href.indexOf('/requests') > -1) {
    setTimeout(function() {
      $('dt:contains("Member rewards")').hide().next('dd').hide(); 
      // add more selectors as necessary
    }, 1000); // adjust the timeout duration as needed
}});

요청 양식의 "제목" 및 "설명" 레이블 이름 변경

JavaScript 기본서식에서 $(document).ready(function() 함수에 다음 jQuery 문을 추가합니다.

$('label[for=request_subject]').html("Custom Subject");
$('label[for=request_description]').html("Custom Description");

사용자 지정 티켓 양식의 필드 채우기

참고: 특정 플랜에서만 여러 티켓 양식을 지원합니다. 목록 및 티켓 양식 작동 방법에 대한 일반적인 정보는 다양한 요청 유형을 지원하기 위한 티켓 양식 만들기를 참조하세요.

사용자들이 제품을 등록할 수 있도록 헬프 센터에서 사용자 지정 티켓 양식을 사용한다고 가정해 보세요. 사용자가 헬프 센터에서 양식을 열면 해당 양식을 찾아 필드를 채울 수 있습니다.

티켓 양식 ID가 필요하며, 헬프 센터에서 양식의 URL에서 이 ID를 찾을 수 있습니다. 이 예를 참조하세요.

다음 jQuery 예에서는 제목 필드에 "제품 등록", 설명 필드에 "새 제품 등록입니다."가 미리 채워집니다. JavaScript 기본서식에서 $(document).ready(function() 함수에 해당 문을 추가하세요.

var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 18570) {
  $('section.main-column h1').html('Product Registration');
  $('#request_subject').val('Product Registration');
  $('#request_description').val('There is a new product registration.');
  $('#request_subject').parent('.request_subject').hide(); // Hide subject
  $('#request_description').parent('.request_description').hide(); 
  $("<p>Please upload your product receipt here.<p>").insertAfter('label:contains("Attachments")'); // Adds text below "Attachments"
}

요청 양식의 사용자 지정 필드 순서 변경

사용자 지정 필드의 ID가 필요하며, Zendesk Support 인터페이스에서 이 ID를 찾을 수 있습니다. 이 예를 참조하세요.

var firstName = $('input#request_custom_fields_22231170').parent();
var lastName = $('input#request_custom_fields_22231180').parent();
firstName.insertBefore($('input#request_subject').parent());
lastName.insertBefore($('input#request_subject').parent());

요청 양식에 헤더 추가

JavaScript 기본서식에서 $(document).ready(function() 함수에 다음 jQuery 문을 추가합니다.

 $('.form-field.request_anonymous_requester_email').prepend('<h2>Your personal information</h2>')
 $('.form-field.request_subject').prepend('<h2>Your issue</h2>');
 $('.form-field.request_custom_fields_21875914').prepend('<h2>Your device information</h2>');
 $('.form-field.request_custom_fields_22033620').prepend('<h2>Your purchase information</h2>');
 $('.form-field > label:contains("Attachments")').prepend('<h2>Support attachments</h2>');

언어 드롭다운에서 언어 숨기기

언어 선택기에서 언어 숨기기 기능은 해당 언어로 된 콘텐츠를 아직 출시할 준비가 되지 않은 경우에 도움이 될 수 있습니다. JavaScript 기본서식에서 $(document).ready(function() 함수에 다음 jQuery 문을 추가합니다.

$("ul.dropdown-panel li a:contains('Français')").hide();

언어 선택기에서 텍스트 문자열을 국기 아이콘으로 바꾸기

예를 들어 헬프 센터에서 미국 영어와 독일어로 콘텐츠를 제공하는 경우 언어 선택기에서 "미국 영어"와 "독일어" 대신 해당 국기를 표시할 수 있습니다. JavaScript 기본서식에서 $(document).ready(function() 함수에 다음 jQuery 문을 추가합니다.

$(function(){
$('a.dropdown-toggle:contains("English (US)")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48">');
$('a.dropdown-toggle:contains("Deutsch")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48">');
$('a:contains("English (US)")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48">');
$('a:contains("Deutsch")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48">');
});

선택한 언어를 기준으로 커뮤니티 숨기기

JavaScript 기본서식에서 $(document).ready(function() 함수에 다음 jQuery 문을 추가합니다.

if (document.location.pathname.match( (/hc\/de/) || (/hc\/es/) )) {
  $('.community').hide();
}

검색 엔진에서 문서 색인화 방지

noindex 메타 태그는 검색 엔진에 특정 페이지를 색인에 포함하지 말라고 알려줍니다. 특정 문서에 동적으로 noindex 메타 태그를 추가하려면 script.js 파일에 다음 함수를 추가합니다.

(function () {
  // Get the current page URL  
  const url = window.location.href;

  // Check if the URL is an article page
  if (url.indexOf("/articles/") == -1) {
    return;
  }

  //List the ids of articles to be excluded from indexing
  const articles = [5555300573850, 5500012959342]; //Example article ids
  for (let i = 0; i < articles.length; i++) {
    if (url.indexOf(articles[i]) !== -1) {
      //Create a new meta tag element
      var meta_tag = document.createElement("meta");
      meta_tag.setAttribute("name", "robots");
      meta_tag.setAttribute("content", "noindex");

      //Append the meta tag to the head of the document
      document.head.appendChild(meta_tag);
    }
  }
})();