現在のプランを確認
Suite Growth、Professional、Enterprise、またはEnterprise Plus
Support Enterprise

この回避策は、特定のシナリオでのみ必要となります。たとえば、Web Widgetではフォームを使用したいが、ヘルプセンターでは使用したくない場合などです。ブランド別のチケットフォームを選択して表示する方法については、「ブランド設定されたチケットフォームの作成および適用」をご参照ください。

すべてのブランドについてヘルプセンターを作成し、各ブランド用のチケットフォームを展開する準備ができました。でもちょっと待ってください!メインのブランド用のフォームが、2番手のブランドのヘルプセンターに表示されないようにしたいのですが。これから紹介するテクニックで、この課題を解決したいと思います。

この記事には、次の2つのシナリオを想定しています。

  • 複数のフォームがあるブランドでチケットフォームを選択する
    • コード:オプション1
    • コード:オプション2
  • ブランドごとにチケットフォームを1つだけ表示する
    • コード
    • チケットフォームからフォーム選択用のドロップダウンリストを削除する
メモ: フォームの選択を始める前に、非表示にしたいフォームのIDを見つける必要があります。フォームIDの探し方については、以下の手順に従ってください。

フォームIDを探す

フォームを非表示にするにしても、単独で表示するにしても、個々のフォームを対象にするには、最初にフォームIDを見つける必要があります。ここでは、フォームの作成については説明しません。フォームの作成について詳しくは、「各種リクエストに応じたさまざまなチケットフォームの作成」を参照してください。

エージェントインターフェイスでチケットフォームIDをすばやく見つける手順は次のとおりです。

  1. 管理センターで、サイドバーにあるオブジェクトとルールアイコン()をクリックし、「チケット」>「フォーム」を選択します。
  2. ユーザーから隠すフォームまたはスタンドアロンフォームとして使用するフォームの名前をクリックします。
  3. アドレスバーのフォームIDをメモしておきます。アドレスバーの例は下図のとおりです。



  4. この手順を非表示にしたいフォームまたは単独で表示したいフォームごとに繰り返します。

ブランドごとに複数のフォームを表示する

多くの場合、各ヘルプセンターでは複数のタイプのリクエストを管理します。このセクションでは、特定のブランドのヘルプセンターに表示させたくないチケットフォームを選択的に隠し、それ以外のフォームをエンドユーザーが選択できるようにする方法を紹介します。

コード

前述のように、非表示にしたいチケットフォームを記録したので、次のコードを使用してそれらのフォームをターゲットにすることができます。

script.jsテンプレート内にある $(document).ready(function(){ 内に以下のバージョンのコードのいずれかを配置します。

メモ: コードをコピー&ペーストする際には、この例で指定されているフォームIDではなく、実際のフォームIDを入力してください。

オプション1

この1番目のオプションでは、フォームIDがある行を繰り返すだけです。ここでのフォームIDは、 12775 および 31495 です。

//remove the options from the dropdown selector
$('#request_issue_type_select option[value="12775"]').remove();
$('#request_issue_type_select option[value="31495"]').remove();
//remove the options from the nesty-input after it's been created. 

$('.nesty-panel').on('DOMNodeInserted', function(e){
    $(this).children('ul').children().remove('#12775');
    $(this).children('ul').children().remove('#31495');
});

オプション2

この2番目のオプションでは、代わりに配列を使用することにしたので、角括弧 [ 12775,31495 ] の中に非表示にしたいフォームのIDをすべて入力します。各IDはカンマで区切る必要があります。これにより、すべてのIDが削除されるまで関数がループします。

$.each([ 12775,31495 ], function( index , formValue ) {
  $('#request_issue_type_select option[value="' + formValue + '"]').remove();
  
 $('.nesty-panel').on('DOMNodeInserted', function(e){
    $(this).children('ul').children().remove('#' + formValue);
 });
});

各ブランドで1つのフォームだけを表示する

「各ブランドに1つのフォームがあればいい」という方もいらっしゃるかもしれません。 これも全く問題のないワークフローです。余分なブランドをすべて隠す代わりに、「リクエストの送信」リンクを変更してユーザーをフォームの1つに直接送り、そのフォーム内で「以下の中から該当する問題を選択してください」のドロップダウンリストを非表示にすることもできます。

コード

ユーザーを1つのフォームに送るためには、前述の手順で見つけたフォームIDが必要です。

ヘルプセンターのテンプレート言語であるCurlybarsを使用すると、「リクエストを送信」リンクを簡単に置き換えることができます。Curlybarsとテンプレートのドキュメントはこちらから参照できます。

このコードは、「リクエストを送信」リンクを表示するヘッダーテンプレートに配置します( ticket_form_id は必ず、実際のフォームIDに置き換えてください)。このコードはローカライズを考慮するため、ヘルプセンターで複数の言語を使用している場合、リンクは適切な言語で提供されます。

<a href="{{page_path 'new_request' ticket_form_id='17369'}}">{{t 'submit_a_request'}}</a>

チケットフォームからフォーム選択用のドロップダウンリストを削除する

次に、チケットフォームからフォーム選択のドロップダウンを削除して、ユーザーが現在のブランドで別のフォームを選択しないようにしたいと思います。以下のコードをヘルプセンターのstyle.cssテンプレートに記述してください。

.request_ticket_form_id{
     display:none;
}


このCSSをstyle.cssテンプレートに入力します。

動作のしくみ

新しいリクエストページが生成されると、エンドユーザー向けのすべてのチケットフォームがドロップダウンリストに表示されます。最初の例では、指定したブランドごとに表示する必要のないフォームオプションを削除し、2番目の例では、ブランド専用のフォームにユーザーを誘導しています。

Powered by Zendesk