ヘルプセンターのJavaScriptレシピ集

現在のプランを確認

JavaScriptやjQueryを使用すれば、ヘルプセンターの見た目と操作感を簡単にカスタマイズすることができます。このレシピ集は、ヘルプセンターのカスタマイズに役立ちます。

jQueryはデフォルトでが提供されません。標準的なJavaScriptの代わりにjQuery文をテーマで使用したい場合、jQueryライブラリをインポートする必要があります。詳細については、「jQueryのインポートとアップグレード」を参照してください。

メモ：トライアル版のユーザーには、コード編集オプションが含まれるProfessionalプランが適用されますが、その後購入時にTeamプランをお選びいただいた場合、コード編集オプションは利用できなくなります。

ヘルプセンター内のJavaScriptにアクセスして編集するには、「CSSまたはJavaScriptをカスタマイズする」を参照してください。

ヘルプセンターのテンプレート言語またはCSSを使用してヘルプセンターをカスタマイズすることもできます。

• ヘルプセンターテンプレートのリファレンス
• ヘルプセンターのテンプレート言語のレシピ集
• ヘルプセンターのCSSレシピ集

レシピリスト

今後、さらに多くのレシピを追加する予定ですが、このリストがすべてということではありません。JavaScriptを使用すれば、思いつく限りいくらでもレシピを作成できます。ご自分のレシピをコメントセクションに投稿し、このレシピ集に公開しませんか。

• 「マイアクティビティ」のリンクテキストを変更する
• 「マイアクティビティ」ページのチケットサイドバーでカスタムフィールドを非表示にする
• リクエストフォームで「問題」のラベルと「説明」のラベルの名前を変更する
• カスタムチケットフォームのフィールドに事前入力を行う
• リクエストフォームでカスタムフィールドの順序を変更する
• リクエストフォームにヘッダーを追加する
• 言語のドロップダウンで言語の1つを非表示にする
• 言語セレクタのテキスト文字列をフラグアイコンに変更する
• 選択した言語に応じてコミュニティを非表示にする
• 記事が検索エンジンにインデックス化されるのを防ぐ

メモ：標準テーマのページテンプレートやCSS、JavaScriptを編集した場合、または独自のテーマを開発した場合、それはカスタムテーマとして保存されます。カスタムテーマを必要とするレシピはZendeskではサポートされておらず、新しい機能やテーマがリリースされても自動的にはアップデートされません（「ヘルプセンターの標準のテーマとカスタムテーマ」を参照）。

「マイアクティビティ」のリンクテキストを変更する

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);
    }
  }
})();