| Suite | Growth、Professional、Enterprise、またはEnterprise Plus |
| Support | + Guide（すべてのプラン） |
JavaScriptやjQueryを使用すれば、ヘルプセンターの見た目と操作感を簡単にカスタマイズすることができます。このレシピ集は、ヘルプセンターのカスタマイズに役立ちます。
jQueryはデフォルトでが提供されません。標準的なJavaScriptの代わりにjQuery文をテーマで使用したい場合、jQueryライブラリをインポートする必要があります。詳細については、「jQueryのインポートとアップグレード」を参照してください。
ヘルプセンターのテンプレート言語またはCSSを使用してヘルプセンターをカスタマイズすることもできます。
レシピリスト
今後、さらに多くのレシピを追加する予定ですが、このリストがすべてということではありません。JavaScriptを使用すれば、思いつく限りいくらでもレシピを作成できます。ご自分のレシピをコメントセクションに投稿し、このレシピ集に公開しませんか。
「マイアクティビティ」のリンクテキストを変更する
my activitiesクラスをheader.hbsテンプレートに追加します。
{{link "my_activities" role="menuitem" class='my-activities'}}次のjQuery文をJavaScriptテンプレートの$(document).ready(function()関数に追加します。
$(' .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
}});リクエストフォームで「問題」のラベルと「説明」のラベルの名前を変更する
次のjQuery文をJavaScriptテンプレートの$(document).ready(function()関数に追加します。
$('label[for=request_subject]').html("Custom Subject");
$('label[for=request_description]').html("Custom Description");カスタムチケットフォームのフィールドに事前入力を行う
ヘルプセンターでカスタムチケットフォームを使用して、ユーザーに製品を登録させることができます。ヘルプセンターでユーザーがフォームを表示したときにフォームを検出し、その各フィールドに情報を表示させることができます。
チケットフォームIDが必要になりますが、これは、ヘルプセンターのフォームのURLで確認できます。こちらの例をご覧ください。
以下のjQueryの例では、件名フィールドに「Product Registration（製品登録）」が、説明フィールドに「This is a new product registration（これは新規の製品登録です）」が表示されます。この文が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インターフェイスで確認できます。こちらの例をご覧ください。
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());リクエストフォームにヘッダーを追加する
次のjQuery文をJavaScriptテンプレートの$(document).ready(function()関数に追加します。
$('.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>');言語のドロップダウンで言語の1つを非表示にする
特定の言語だけを言語セレクタで非表示にする機能は、その言語のコンテンツがリリースに間に合わない場合に便利です。次のjQuery文をJavaScriptテンプレートの$(document).ready(function()関数に追加します。
$("ul.dropdown-panel li a:contains('Français')").hide();言語セレクタのテキスト文字列をフラグアイコンに変更する
たとえば、ヘルプセンターで米語とドイツ語のコンテンツを提供している場合、言語セレクタの表示を「U.S. English」や「Deutsch」とせず、国旗のアイコンにすることができます。次のjQuery文をJavaScriptテンプレートの$(document).ready(function()関数に追加します。
$(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">');
});選択した言語に応じてコミュニティを非表示にする
次のjQuery文をJavaScriptテンプレートの$(document).ready(function()関数に追加します。
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);
}
}
})();
41件のコメント
サインインしてコメントを残します。