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