現在のプランを確認
Suite Growth、Professional、Enterprise、またはEnterprise Plus
Support + Guide（すべてのプラン）

このサポートのヒントでは、リクエスト専用のヘルプセンターの設定方法について紹介します。このヘルプセンターでは、エンドユーザーは、リクエスト（チケット）の送信と、既存のリクエストの閲覧のみが可能です。セルフサービスのコンテンツはありません。

設定の方法はいくつかありますが、このヒントで紹介する方法では、ヘルプセンターのホームページを編集することで、エンドユーザーが新規にリクエストを送信したり既存のリクエストを参照したりできるようにします。ホームページには、それ以外の機能は含めません。以下はその例です。

JavaScriptのリダイレクトを使用しなくても、リクエスト専用のヘルプセンターを作れるのが利点です。 JavaScriptを使用しても同じことができます。ただし、この方法では通常、ヘルプセンターでエージェントが新規リクエストページやマイアクティビティを表示する場合に制限が生じ、アクセスが困難となり、エージェントのエクスペリエンスが低下します（デフォルトでは、Zendesk Supportのエージェントインターフェイスにリダイレクトされます）。

また、JavaScriptを使用する方法では、ユーザーのサインインの把握や、ヘルプセンターのオープンとクローズ、複数のロケールの有効化も難しくなりますが、このヒントの方法を使えば、それも解消されます。このヒントでは、必要とするさまざまなワークフローを追加のカスタマイズなしで可能にする方法を説明します。 

この記事では、次のトピックについて説明します。
  • リクエスト専用のホームページを更新する
  • ヘルプセンターの不要なエレメントを非表示にする
  • （オプション）ホームページのボタンをローカライズする
  • （オプション）デフォルトのボタンのスタイルを変更する

リクエスト専用のホームページを更新する

まず、エンドユーザーが新しいリクエストの送信と既存のリクエストの確認をできるようにします。それには、ヘルプセンターのホームページを編集して、それぞれの操作に対応するボタンをひとつずつ用意します。リクエスト専用のヘルプセンターにはCopenhagenテーマを使用するようお勧めします。これは、Copenhagenテーマがモバイル環境に対応しているためです。

ホームページを編集して、新規リクエストの送信ボタンと既存リクエストの確認ボタンを追加するには

  1. Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
  2. テーマをクリックして開き、「コードを編集」をクリックします。
  3. ホームページテンプレートを開きます。
  4. 既存のコードを{{!-- ... --}}でラッピングしてコメントアウトします。    

    これを適切に行えば、すべてのコードテキストがグレーに変更されます。

  5. コメントアウトしたホームページのコードの上に以下のコードを追加します。
    <div id="divhomecontainer">
<h1>Welcome to Rebecca's Support Portal</h1> 
  <h2> Select below to Submit a New Request or Check your Existing Requests<h2>

<form style="display: block; text-align: center; margin: 20px;" class="submitbutton"
action="{{page_path 'new_request'}}">    
  <input type="submit" value="Submit a Request">
</form>

<form  style="display: block; text-align: center; margin: 20px;"class="requestbutton" 
action="{{page_path 'my_activities'}}"> 
   <input type="submit" value="Check your Existing Requests">
  </form>
</div>
    このコードでは、次のことを行います。

    • ウェルカムメッセージを追加します。プレースホルダのテキストは必ずご自身のウェルカムメッセージに変更してください。

    • 新規リクエストフォームのボタンと、既存のリクエストを確認するためのボタンを作成します。また、必要に応じてCSSをカスタマイズできるよう、各ボタンに固有のクラスを追加します。

    • ボタンのインラインにCSSスタイルを追加して見栄えをよくします（CSSによるカスタマイズで問題が生じるのを避け、コピー＆ペースト操作のような簡便なソリューションを提供します）。

    • サインインせずに「既存のリクエストを確認」ボタンをクリックした場合は、サインインするよう要求されます。

  6. 「保存」をクリックします。

    次のセクションでヘルプセンターの不要なエレメントを非表示にするまでは、変更の公開を待機できます。

ヘルプセンターの不要なエレメントを非表示にする

ホームページを編集し、リクエスト専用のボタンを追加したら、エンドユーザーが誤ってコンテンツセクションに移動しないようにする必要があります。それには、以下のような機能の各種テンプレートについて、さらに数行のコードをコメントアウトします。

  • コミュニティ
  • 「リクエストを送信」ボタン
  • ナビゲーションリンク
  • 検索内容

さらに、カテゴリ内の既存のコンテンツの全削除や、下書きモードへのカテゴリの設定を行い、エンドユーザーが間違ってコンテンツにアクセスするのを防ぐ必要があります。この内容を以下に示します。

ヘルプセンターの不要なエレメントを非表示にするには

  1. ヘッダーテンプレートを開き、{{!-- ... --}}でラッピングして、「コミュニティ」ボタンと「リクエストを送信」ボタンをコメントアウトします。

    これを適切に行えば、すべてのコードテキストがグレーに変更されます。

  2. request_pageテンプレートを開き、一番上にある
    コードをコメントアウトします。
  3. requests_pageテンプレートを開き、一番上にある
    コードをコメントアウトします。
  4. new_request_pageテンプレートを開き、{{search}}をコメントアウトします。
  5. 「保存」をクリックします。

ヘルプセンターの既存のコンテンツを削除するには

  1. カテゴリに移動し、一番上のメニューバーで「カテゴリを編集」をクリックします。
  2. 「下書きとして登録」チェックボックスをクリックしてカテゴリとそのコンテンツを非表示にするか、一番下にある「カテゴリを削除」クリックしてカテゴリとそのコンテンツを完全に削除します。
  3. 「下書き」を選択した場合は、「更新」をクリックします。また、「削除」を選択した場合は、「確認」をクリックして、カテゴリの削除を確定します。

（オプション）デフォルトのボタンのスタイルと色を変更する方法

ヘルプセンターでは既定のテンプレートが用意されており、さまざまなボタンをCSSスタイルで作成できるようになっています。既存のCSSの上書きに問題が生じた場合は、デフォルトのスタイルの編集が必要になることがあります。ボタンの色はCSSを編集せずに変更できます。

デフォルトの「CSS」ボタンのスタイルを探すには
  1. Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
  2. テーマをクリックして開き、「コードを編集」をクリックします。
  3. style.cssファイルを開きます。
  4. Ctrl + Fキーを押して、「Buttons」を検索します。
  5. 必要な更新を行い、「保存」をクリックします。
ボタンの色を編集するには
  1. Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
  2. お使いのテーマをクリックして、テーマを開きます。
  3. 「色」をクリックし、必要に応じて色を変更します。

    以下に色のマッピングの例を示します。

  4. 「保存」をクリックします。

（オプション）ホームページのボタンをローカライズする

メモ：Suiteプランをお持ちでないGuideのお客様がこの機能を使用するには、任意のGuideプランとSupport ProfessionalまたはSupport Enterpriseが必要です。
動的コンテンツを使用してヘルプセンターのコンテンツをローカライズすることができます。特に、ページにアクセスするユーザーの言語に合わせて、ページのボタンラベルの表示言語を変えることができます。
ホームページのボタンをローカライズするには
  • 管理センターで動的コンテンツを作成してヘルプセンターのDCプレースホルダに挿入します。これにより、ユーザーがホームページへのアクセスに使用した言語に合わせてボタンラベルの言語を動的に切り替えることができます。

    手順については、「エンドユーザーの言語に基づくヘルプセンターデザインの変更」を参照してください。

以下はその例です。
<div id="divhomecontainer">
<h1 style="text-align: center;">{{dc ‘ADD_YOUR_DC'}} </h1>  
  <h2 style="text-align: center;"> {{dc 'ADD_YOUR_DC'}}</h2>

<form style="display: block; text-align: center; margin: 20px;" class="submitbutton"
action="{{page_path 'new_request'}}">    
  <input type="submit" value="Submit a Request">
</form>

<form  style="display: block; text-align: center; margin: 20px;" class="requestbutton" action="{{page_path 'my_activities'}}">  
   <input type="submit" value="Check your Existing Requests">
  </form>
</div>
Powered by Zendesk