カスタムページは、Guide Enterpriseプランの機能追加です。この機能は、独自の機能とパーソナライズされた Web ページをヘルプ センターに追加できるようにするもので、カスタム テーマの拡張機能です。
この機能のデモンストレーションでは、エンド ユーザーがサインアップして VIP メンバーになり、組織に合わせて調整されたサポートを受けるために使用できる、開発された単一ページ アプリを見つけてください。
この単一ページ アプリの例は、フロントエンドに Typescript、バックエンドにNode.jsを使用してReactを使用して開発されました。Tailwind CSSは、 Nodemailerとともにスタイル設定にも使用され、正常にサインアップしたユーザーに確認メールを送信するプロセスを構成しました。
これは React アプリケーションであるため、この例では、単一のファイルにコンパイルするために必要な Webpack の手順を実行します。次に、ファイルをヘルプセンターのテーマに埋め込んでアップロードします。各手順セットについては、以下のセクションを参照してください。
- 開発- React と Typescript および Node.js を使用してカスタム ページを開発する方法
- バンドル- カスタム ページをバンドルするように Webpack を構成する方法
- 埋め込み- プロジェクトをテーマに埋め込み、ヘルプセンターに公開する方法
発展させる
カスタム ページを使用すると、好みの Web 技術スタックを使用してページを開発できます。人気のある技術スタックの好みは、バックエンド開発用の Node.js で React.js を使用することです。選択したテクノロジと同様に、各コードには実装する独自のニュアンスと仕様があります。これらの技術的な考慮事項の概要については、以下を参照してください。
反応する
カスタム ページは独自の機能で構築されるため、 Create React アプリは、単一ページ アプリケーション フレームワークを使用する優れた開発選択肢です。
上記の VIP サポート サインアップ ページのデモンストレーションでは、2 つの要求が行われます。1 つのリクエストで、バックエンドへの認証用の安全なトークンが生成されます。もう 1 つの要求は、実際の提出データ要求を行うことです。
カスタム ページの例では、Zendesk 内のユーザー プロファイルと組織に変更を加えます。カスタム ページでもこの種のリクエストが行われる場合は、リクエストの前にフロントエンドからそのデータを検証する方法を実装してください。バックエンド内でリクエストを処理するデータ検証が必要ですが、特にこのデータがフォームなどのユーザー入力から来る場合は、フロントエンドから検証を実行することで、クリーンで消費可能なデータのみが Zendesk インスタンスに到達するようにすることができます。 .
カスタム ページはヘルプ センターの一部にすぎないことを認識することも重要です。カスタム ページに使用される機能、ブランディング、またはスタイル設定は、ヘルプ センター全体と一貫している必要があります。
考慮すべきいくつかの設計上の側面には、以下の点が含まれます。
- 認証:このページにアクセスできるのはどのタイプのユーザーですか?エージェント、すべての認証済みユーザー、またはすべてのユーザー?
- ナビゲーション:
- カスタム ページにヘッダーやナビゲーションを作成する必要はありません。アカウントのガイド チームがナビゲーションとヘッダーを設定します。カスタム ページはテーマに埋め込まれているため、現在のテーマのヘッダーとナビゲーションもこのページに適用されます。
- このページをヘルプセンターのどこに配置するかを検討してください。ヘルプ センターから機能を抽象化する方法と同様に、カスタム ページ自体もデフォルトのヘルプ センター スキーマの外に存在します。ユーザーは、ヘルプセンターのテンプレートに埋め込まれたリンク、またはホームページなどのヘルプセンターに含まれる定義済みのページから、これらのページにアクセスできます。カスタム ページの URL は次の形式になります。
https://{domain_name}/hc[/{locale}]/p/{page_name}
- ページのスタイリング: 使用しているスタイリング ライブラリを検討し、そのスタイルがヘルプ センターの他のテーマと一致しているかどうかを検討してください。フォントとカラー パレットの選択が、その場のテーマと一致していることを確認してください。
- 画像処理: カスタム ページを手動で構成してバンドルする必要があるため、画像やアセットをローカルに保存することはできません。埋め込む前に、ヘルプセンターのテーマにアップロードしてください。アセットをテーマにアップロードする手順については、次の記事を参照してください。ヘルプセンターに独自のテーマ アセットを使用する。
Node.js
カスタム ページは空白のキャンバスを提供し、訪問者によりパーソナライズされたエクスペリエンスを構築します。Node.js や Express などのツールで構築されたバックエンド サーバーと対話する機能により、既に配置されているシステムやデータベースに直接接続できます。また、シームレスなユーザー エクスペリエンスのためにヘルプ センターと統合する、好みの技術スタックを使用してまったく新しいサービスを構築することもできます。
サンプルアプリでは以下の関数を使用しています。
- ユーザーがフロントエンド フォームで送信したユーザーと組織の情報を受け取る、開発されたExpress API。
-
API リクエストを Zendesk Support に送信して、関連するユーザーと組織をnode-fetchで作成および更新します。
- validator.jsを使用してフォーム送信データを検証します。
-
Nodemailerでフォーム送信が成功すると、ユーザーに確認メール通知を送信します。
サーバー側のカスタム ページ サービスを構築するときは、セキュリティに注意し、API ルートを保護してください。アプリケーションを保護するために、JWT などのツールを使用してリクエスト認証を構築することを検討してください。JWT の詳細については、JWT Web サイトの次の記事を参照してください。JSON Web トークンの紹介.
サンプル アプリでは、以下の認証を使用します。
- フロントエンドが JWT トークンを要求してフォーム送信 API への要求を承認するための認証エンドポイント。
- jsonwebtokenを使用して JWT トークンを生成および検証する認証モジュール。
構築するアプリケーションによっては、CORS (Cross-Origin Resource Sharing) ポリシーも考慮する必要があります。クライアント側からリクエストを受信するルートで CORS が有効になっていることを確認してください。要求を送信するドメインがわかっている場合は、これらのドメインを明示的に指定します。それ以外の場合は、ワイルドカード「*」を使用してください。CORS の詳細については、Mozilla の Web サイトの次の記事を参照してください。クロスオリジン リソース共有 (CORS) 。
バンドル
カスタム ページの開発が完了したら、webpack を使用して React アプリをバンドルします。カスタム ページはすべてテーマ内に埋め込む必要があるため、カスタム ページを 1 つの html ファイルにコンパイルします。Create React アプリには、独自のバンドルと最適化が付属しています。ただし、目標はシングルを返すことなので、index.html
この例には、このプロセスを合理化する独自のwebpack 構成があります。
埋め込み
アプリケーションを作成したら、ヘルプ センターに組み込みます。新しく作成されたビルド ディレクトリに移動します。ここには、新しいカスタム ページを作成するために必要ないくつかのファイルがあります。
index.html
- static/css/bundle.min.css
- static/bundle.min.js
のindex.html
file は、カスタム ページに配置するコードです。プロジェクト用に作成された JavaScript と CSS にアクセスします。まず、JavaScript と CSS ファイルをアセットとしてヘルプセンターにアップロードします。次に、からコードをコピーしますindex.html
ファイルをカスタム ページに追加し、アセットへのファイル パスを調整します。
これがコード エディターでどのように表示されるかについては、以下の例を参照してください。
完了したら、カスタム ページを公開します。ヘルプセンターのコンテンツ管理に関するその他のリソースについては、次の記事を参照してください。ガイド リソース。
翻訳に関する免責事項:この記事は、お客様の利便性のために自動翻訳ソフトウェアによって翻訳されたものです。Zendeskでは、翻訳の正確さを期すために相応の努力を払っておりますが、翻訳の正確性については保証いたしません。
翻訳された記事の内容の正確性に関して疑問が生じた場合は、正式版である英語の記事を参照してください。