JavaScript와 jQuery를 사용해서 헬프 센터의 디자인을 쉽게 사용자 지정할 수 있습니다. 이 쿡북은 원하는 대로 헬프 센터를 디자인할 수 있도록 도와드리기 위해 마련되었습니다.
jQuery는 기본적으로 제공되지 않습니다. 테마에서 바닐라 JavaScript 대신 jQuery 문을 사용하려는 경우에는 jQuery 라이브러리를 가져오도록 하세요. 자세한 내용은 jQuery 가져오기 또는 업그레이드하기를 참조하세요.
헬프 센터 기본서식 작성 언어 또는 CSS를 사용해서 헬프 센터를 사용자 지정할 수도 있습니다.
사용법 목록
Zendesk는 앞으로도 더 많은 사용법을 추가할 예정이지만 모든 사용법을 제공해 드릴 수는 없을 것입니다. 왜냐하면 JavaScript로 수행할 수 없는 작업은 거의 없기 때문입니다. 댓글 섹션에 사용법을 게시해 주시면 이 쿡북에 추가하겠습니다.
내 활동 링크 텍스트 변경
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);
}
}
})();