現在のプランを確認

Suite Growth以上のプランで利用可能すべてのGuideプランで利用可能

標準のCopenhagenテーマでは、ヘルプセンターの記事に対する評価をエンドユーザーが投票することができます。このレシピでは、記事に反対票を投じたユーザーに対して補足メッセージを表示するように、テーマのコードを編集します。

反対票に対する補足メッセージには、チケットフォームを含む「新規リクエスト」ページへのリンクが含まれます。ユーザーは記事に対するフィードバックをチケットフォームに記入することができます。このフォームでは、カスタムチケットフィールドを使用して記事のURLを取得します。フィードバックを送信するとZendesk Supportにチケットが作成されます。

このレシピについて

このレシピを完了するには、Zendesk Supportの管理者である必要があります。このレシピには以下のタスクが含まれます。
  • タスク1：匿名投票を有効にする
  • タスク2：記事URLのカスタムチケットフィールドを作成する
  • タスク3：カスタムCSSを追加する
  • タスク4：記事ページテンプレートを更新する
  • タスク5：カスタムJavaScriptを追加する
  • タスク6：変更をテストする

このレシピは、標準のCopenhagenテーマを編集することを想定しています。他のテーマを編集する場合や、カスタマイズされたCopenhagenテーマに同様の変更を加える場合は、コード例の変更が必要になることがあります。

また、このレシピでは、事前入力済みチケットフォームを使用しています。事前入力済みチケットフォームは、Templating APIバージョン2を使用したテーマを必要とします。テーマのバージョンを確認する方法については、「Guideのテンプレートのバージョンについて」を参照してください。

メモ：このレシピでは、CSS、ページテンプレート、JavaScriptの編集が必要になります。標準テーマを編集すると、カスタムテーマとして保存されます。カスタムテーマはZendeskによってサポートされないため、新機能がリリースされても、自動更新されません。詳しくは「ヘルプセンターの標準のテーマとカスタムテーマについて」を参照してください。

タスク1：匿名投票を有効にする

ヘルプセンターが匿名の訪問者に公開されている場合、オプションとして匿名投票を有効にすることができます。匿名投票では、エンドユーザーがサインインせずにヘルプセンターの記事に投票することができます。

匿名投票を有効にするには、「サインインしないユーザーに記事への投票を許可する方法」の説明に従ってください。操作を完了したら、この記事に戻ります。

タスク2：記事URLのカスタムチケットフィールドを作成する

まず最初に、ヘルプセンターの記事URLを取得するためのカスタムチケットフィールドを作成します。

記事URLのカスタムチケットフィールドを作成するには
  1. 管理センターで、サイドバーの「 オブジェクトとルール」をクリックし、「チケット」>「フィールド」を選択します。
  2. 「フィールドを追加」をクリックします。
  3. フィールドタイプに「文字列」を選択します。

  4. 「表示名」に「Help Article URL」と入力します。
  5. 「権限」で、「顧客は編集可能」を選択します。
  6. 「カスタマー」で、「顧客に表示されるタイトル」フィールドに「Help Article URLL」と入力します。

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

    アカウントで1つのチケットフォームを使用している場合は、チケットフォームに自動的に新しいチケットフィールドが表示されます。アカウントで複数のチケットフォームを使用している場合は、フィールドを追加するすべてのチケットフォームに手動でフィールドを追加する必要があります。

  8. 「フィールド」ページで、「Help Article URL」フィールドのフィールドIDをコピーします。このIDはこのレシピの後半で使用します。

タスク3：カスタムCSSを追加する

次に、反対票メッセージ用のカスタムCSSをテーマに追加します。

カスタムCSSをテーマに追加するには
  1. Guideで、テーマのコードエディタを開きます。手順については、「ヘルプセンターのテーマの編集」を参照してください。
  2. style.css をクリックします。
  3. ファイルの最後に以下のコードを貼り付けます。 
    /* ---- Downvote message ----------- */
.downvote-message {
  display: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

    このコードは、.downvote-message クラスのCSSルールを追加します。このクラスは、ユーザーが記事に反対票を投じるまで、反対票メッセージを隠すために使用します。また、メッセージが表示されるときのスタイルもこのクラスで指定します。

  4. ヘルプセンターのライブテーマを更新する場合は、「公開」をクリックします。更新しない場合は、「保存」をクリックします。

タスク4：記事ページのテンプレートを更新する

次に、テーマの記事ページテンプレートに、反対票メッセージ用のHTMLを追加します。

記事ページのテンプレートを更新するには
  1. Guideで、テーマのコードエディタを開きます。
  2. article_page.hbs をクリックします。
  3. <div class="article-votes"> の閉じタグの前に、以下のHTMLスニペットを追加します。 
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_CUSTOM_FIELD_ID=HTTPS://SUBDOMAIN.ZENDESK.COM{{url}}">Please tell us
      why.</a></p>
</div>
    スニペット内で、以下の置き換えを行います。
    • CUSTOM_FIELD_ID を、「記事URLのカスタムチケットフィールドを作成する」で作成した「Help Article URL」フィールドのフィールドIDに置き換えます。
    • HTTPS://SUBDOMAIN.ZENDESK.COM をヘルプセンターのベースURLに置き換えます。
    HTMLでは、各記事の投票ボタンの下に反対票メッセージを追加しています。メッセージの親 div は、「記事URLのカスタムチケットフィールドを作成する」で追加したdownvote-message クラスを使用します。このクラスのCSSはすべてのユーザーからメッセージを隠します。レシピの後半では、カスタムJavaScriptを追加して、ユーザーが反対票を投じたときにメッセージが表示されるようにします。

    このメッセージには、チケットフォームを含む「新規リクエストページ」へのリンクが含まれます。このリンクは、URLパラメータを使用して、フォームの「Help Article URL」フィールドに現在の記事のURLを事前入力します。チケットフォームの事前入力について詳しくは、「事前入力済みチケットフォームの作成」を参照してください。

  • アカウントで使用しているチケットフォームが1つの場合は、次のステップに進みます。複数のチケットフォームを使用する場合は、HTMLスニペットの href 値の末尾に &ticket_form_id=FORM_ID というURLパラメータを追加します。このパラメータの FORM_ID をチケットフォームのIDに置き換えます。例： 
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_12345=https://example.zendesk.com{{url}}&ticket_form_id=67890">Please tell us
      why.</a></p>
</div>

    チケットフォームは、エンドユーザーに見えるようにする必要があります。チケットフォームの表示を確認または変更するには、「リクエストタイプに応じた各種チケットフォームの作成」を参照してください。

  • テンプレートの <div class="article-votes"> 要素を確認します。次のようになります。 
    <div class="article-votes">
  <span class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</span>
  <div class="article-votes-controls" role="group" aria-labelledby="article-votes-label">
    {{vote 'up' role='radio' class='button article-vote article-vote-up' selected_class="button-primary"}}
    {{vote 'down' role='radio' class='button article-vote article-vote-down' selected_class="button-primary"}}
  </div>
  <small class="article-votes-count">
    {{vote 'label' class='article-vote-label'}}
  </small>
  <div class="downvote-message">
    <p>We're sorry to hear that.</p>
    <p><a href="{{page_path 'new_request'}}?tf_67890=https://example.zendesk.com{{url}}">Please tell us
        why.</a></p>
  </div>
</div>
  • ヘルプセンターのライブテーマを更新する場合は、「公開」をクリックします。更新しない場合は、「保存」をクリックします。

タスク5：カスタムJavaScriptを追加する

いくつかのJavaScriptを追加して、ユーザーが記事に反対票を投じたときに反対票メッセージが表示されるようにします。

カスタムJavaScriptをテーマに追加するには
  1. Guideで、テーマのコードエディタを開きます。
  2. script.jsをクリックします。
  3. ファイルの最後に以下のコードを貼り付けます。 
    // Display message for article downvotes
document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector(".article-votes-controls")) {
    const voteButtons = document.querySelectorAll(".article-vote");
    const voteMessage = document.querySelector(".downvote-message");

    voteButtons.forEach((button) => {
      button.addEventListener("click", () => {
        let isDownButton = button.matches(".article-vote-down");
        let isPressed = button.matches(".button-primary");

        if (isDownButton && !isPressed) {
          voteMessage.style.display = "block";
        } else {
          voteMessage.style.display = "none";
        }
      });
    });
  }
});

    ユーザーが「いいえ」ボタンをクリックすると、JavaScriptは「記事ページテンプレートを更新する」で追加した反対票メッセージを表示します。ユーザーが投票をリセットしたり、賛成票に変更したりすると、JavaScriptは再びメッセージを非表示にします。

  4. ヘルプセンターのライブテーマを更新する場合は、「公開」をクリックします。更新しない場合は、「保存」をクリックします。

タスク6：変更点をテストする

新しい投票の機能が意図したとおりに動作することを確認するために、テストします。

変更をテストするには
  1. Guideで、テーマのコードエディタを開きます。
  2. 「プレビュー」をクリックします。
  3. 「プレビュー」ウィンドウで、「エンドユーザー」の「プレビューロール」を選択します。
  4. ヘルプセンターの記事に移動します。記事の下にある、「この記事は役に立ちましたか？」の下にある「いいえ」ボタンをクリックします。

    「よろしければ理由を教えてください。」リンクを含む短いメッセージが表示されます。

  5. 「よろしければ理由を教えてください。」リンクをクリックします。

    このリンクから、チケットフォームを含む新規リクエストページが表示されます。チケットフォームのHelp Article URLフィールドには、関連するヘルプセンターの記事のURLが含まれています。

    必要であれば、このフォームを送信して、テストチケットを作成することができます。

  6. ヘルプセンターの他の記事に移動して、「いいえ」ボタンをクリックします。
  7. 反対票メッセージが表示されたら、「はい」ボタンをクリックします。これで反対票メッセージは消えます。
  8. ヘルプセンターのライブテーマに変更を加えておらず、ヘルプセンターを起動する準備ができている場合は、カスタマイズしたテーマをライブテーマとして設定することができます。詳しくは「ヘルプセンターのライブテーマの変更」を参照してください。
Powered by Zendesk