JavaScript와 jQuery를 사용해서 헬프 센터의 디자인을 쉽게 사용자 지정할 수 있습니다. 이 쿡북은 원하는 대로 헬프 센터를 디자인할 수 있도록 도와드리기 위해 마련되었습니다. Guide Professional 및 Enterpise 플랜에서 해당 페이지 코드에 액세스할 수 있습니다.
헬프 센터 기본서식 작성 언어 또는 CSS를 사용해서 헬프 센터를 사용자 지정할 수도 있습니다.
사용법 목록
Zendesk는 앞으로도 더 많은 사용법을 추가할 예정이지만 모든 사용법을 제공해 드릴 수는 없을 것입니다. 왜냐하면 JavaScript로 수행할 수 없는 작업은 거의 없기 때문입니다. 댓글 섹션에 사용법을 게시해 주시면 이 쿡북에 추가하겠습니다.
내 활동 링크 텍스트 변경
JavaScript 기본서식에서 $(document).ready(function() 함수에 다음 jQuery 문을 추가합니다.
$('#user-menu .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");사용자 지정 티켓 양식의 필드 채우기
참고: 사용자 지정 티켓 양식은 Enterprise 플랜에만 제공되거나 Professional 플랜의 경우 추가 기능으로만 제공됩니다.
사용자들이 제품을 등록할 수 있도록 헬프 센터에서 사용자 지정 티켓 양식을 사용한다고 가정해 보세요. 사용자가 헬프 센터에서 양식을 열면 해당 양식을 찾아 필드를 채울 수 있습니다.
티켓 양식 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 댓글
댓글을 남기려면 로그인하세요.