この記事では、パーソナライズされた独自の機能をZendeskヘルプセンターに統合する方法について説明します。このガイドでは、Knowledge Enterpriseプランにカスタムページを追加する手順を説明し、React.jsやNode.jsなどのテクノロジーを使用してカスタムページを開発、バンドル、および埋め込む方法について説明します。
たとえば、既存のヘルプセンターのデザインにシームレスに適合するカスタムVIPサポート登録ページを作成し、一貫性のあるカスタマイズされたユーザーエクスペリエンスを提供することができます。
このシングルページアプリの例では、フロントエンドにReact with TypeScript、バックエンドにNode.jsを使用しています。アプリのスタイルをTailwind CSSで設定し、新規ユーザーの登録確認をNodemailerで管理します。
Reactアプリを使用するため、この例では、1つのファイルにコンパイルするWebpackの手順を説明します。ヘルプセンターのテーマにファイルを埋め込み、アップロードします。各手順について、以下のセクションを参照してください。
- ステップ1：React with TypeScriptとNode.jsを使用してカスタムページを開発する
- ステップ2：カスタムページをバンドルするようにWebpackを設定する
- ステップ3：プロジェクトをテーマに埋め込み、ヘルプセンターに公開する
バックエンドと統合したり、TypeScriptを使用したりしない場合は、ボイラープレートをチェックして、独自のシングルページアプリを起動してください。
ステップ1：React with TypeScriptとNode.jsを使用してカスタムページを開発する
カスタムページでは、任意のWeb技術スタックを使用して開発できます。多くの開発者は、バックエンドの開発にReact.jsとNode.jsの使用を好みます。それぞれのテクノロジーには、独自のニュアンスと仕様があります。次の技術的な点を考慮してください。
反応
このフレームワークはシングルページアプリケーションをサポートしているため、カスタムページにはCreate React Appを使用します。上記のVIPサポートのサインアップ ページでは、2つのリクエストを実行します。1つはバックエンド認証用のセキュア トークンを生成するリクエストで、もう1つは実際のデータを送信するリクエストです。
カスタムページの例では、Zendesk内のユーザープロフィールと組織を変更します。ページに同様のリクエストがある場合は、リクエストを送信する前にフロントエンドからのデータを検証します。バックエンドの検証は重要な役割を果たしますが、フロントエンドの検証では、特にユーザー入力からのクリーンなデータが確保されます。
カスタムページは、ヘルプセンターの1つの部分にすぎず、ヘルプセンター全体に機能、ブランド、スタイルが適合していることを確認します。
設計にあたっては、以下の点を考慮してください。
-
認証：このページにアクセスできるユーザー（エージェント、すべての認証済みユーザー、またはすべてのユーザー）を指定します。
-
ナビゲーション：
-
カスタムページのヘッダーやナビゲーションは作成しないでください。アカウントのナレッジベースチームがこれらの機能を設定します。カスタムページは、現在のテーマのヘッダーとナビゲーションを継承します。
-
ヘルプセンター内にこのページを適切に配置します。機能と同様に、カスタムページはデフォルトのヘルプセンタースキーマの外部に存在します。ユーザーは、任意のヘルプセンターのリンクまたはホームページなどの既定のページを経由して、これらのページにReachします。カスタムページのURLは次のようになります。
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
ページのスタイル：ヘルプセンターのテーマに合ったスタイルライブラリを選択します。フォントとカラーパレットが既存のテーマと一致することを確認してください。
-
画像処理：カスタムページを手動で設定してバンドルしているため、画像やアセットをローカルに保存することはできません。埋め込む前にヘルプセンターのテーマにアップロードしてください。詳しい手順については、次の記事を参照してください。ヘルプセンターのテーマに独自のアセットを使用する。
Node.js
カスタムページは、訪問者のためにパーソナライズされたエクスペリエンスを構築するための空白のキャンバスを提供します。Node.jsやExpressなどのツールを使用して、既存のシステムやデータベースに直接接続できます。また、任意のテクノロジースタックで新しいサービスを作成し、ヘルプセンターと統合してシームレスなユーザーエクスペリエンスを提供することもできます。
この例では、以下の関数を使用します。
-
開発者は、フロントエンドフォームから送信されたユーザーと組織の情報を受け取るExpress APIを作成しました。
-
このアプリは、ノードフェッチを使用して関連するユーザーと組織を作成および更新するためのAPIリクエストをZendesk Supportに送信します。
-
validator.jsを使用してフォーム送信データを検証します。
-
アプリは、Nodemailerを使用してフォームが正常に送信されたときに、ユーザーに確認メール通知を送信します。
サーバー側のカスタムページサービスを構築するときは、APIルートを慎重に保護してください。JWTなどのツールを使用して、リクエスト認証を作成することでアプリケーションを保護します。JWTの詳細については、JWTのWebサイトのこちらの記事を参照してください。JSON Webトークン概要。
この例では、後述の認証を使用します。
-
開発者は、フロントエンドがJWTトークンを要求し、フォーム送信APIへのリクエストを承認するために使用する認証エンドポイントを作成しました。
-
認証モジュールは、jsonwebtokenを使用してJWTトークンを生成および検証します。
構築するアプリケーションに応じて、CORS（Cross-Origin Resource Sharing）ポリシーを検討します。クライアント側からリクエストを受信するルートでCORSが有効になっていることを確認します。リクエストを送信するドメインがわかっている場合は、これらのドメインを明示的に指定します。それ以外の場合は、ワイルド*を設定します。CORSの詳細については、MozillaのWebサイトの次の記事を参照してください。Cross-Origin Resource Sharing（CORS）。
ステップ3：カスタムページをバンドルするようにWebpackを設定する
カスタムページの開発が完了したら、Webpackを使用してReactアプリをバンドルします。テーマにはすべてのカスタムページを埋め込む必要があるため、カスタムページを1つのHTMLファイルにコンパイルします。Create Reactアプリには、独自のバンドルと最適化が含まれています。ただし、1つのindex.htmlファイルを返すことを目的としているため、この例では独自のWebpack構成を使用してこのプロセスを簡素化しています。
ステップ4：プロジェクトをテーマに埋め込み、ヘルプセンターに公開する
アプリケーションを構築したら、ヘルプセンターに埋め込みます。新しく作成したビルドディレクトリに移動します。新しいカスタムページを作成するために必要なファイルがいくつかあります。
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
index.htmlファイルには、カスタムページに挿入したコードが含まれています。プロジェクト用に作成されたJavaScriptとCSSにアクセスします。まず、JavaScriptファイルとCSSファイルをアセットとしてヘルプセンターにアップロードします。次に、index.htmlファイルからカスタムページにコードをコピーし、アセットを参照するファイルパスを調整します。
コードエディターでの表示例を以下に示します。
完了したら、カスタムページを公開します。ヘルプセンターでのコンテンツの管理に関するその他のリソースについては、次の記事を参照してください。ナレッジリソース。
翻訳に関する免責事項：この記事は、お客様の利便性のために自動翻訳ソフ トウェアによって翻訳されたものです。Zendeskでは、翻訳の正確さを期すために相応の努力を払っておりますが、翻訳の正確性につ いては保証いたしません。
翻訳された記事の内容の正確性に関して疑問が生じた場合は、正式版である英語の記事 を参照してください。