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 기본서식에서 $(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();
}
0 댓글
댓글을 남기려면 로그인하세요.