ガイドセンター(クラシック)

概要

[ガイドセンター(Guide Center)](クラシックデザイナーで使用)を使用すると、訪問者はいつでも所定のガイドにアクセスできます。これはコンテキスト内のヘルプで使用されることが多く、訪問者はオンデマンドで回答やガイダンスを見つけることができます。たとえば、静的なサポートページにリンクするのではなく、訪問者が特定のプロセスで情報を求めているときに、アプリ上でプロセスを説明することができます。

whatsnew.png

コンテンツ

enableguidecenter.png

ガイドセンターの有効化

アプリ内のデザイナーから、右上の[グローバル設定(Global Settings)]をクリックして有効化し、次に[ガイドセンター]タブをクリックします。[ガイドセンター]の設定にアクセスするには、Pendoアカウントに管理者権限が必要です。

開発

ガイドセンターには、[ステージング]と[本番(Production)]の2つのバージョンがあります。[ステージング]で行った変更は、[本番にコピー(Copy to Production)]をクリックすれば[本番]に反映できます。ガイドセンターのステージングバージョンは、ステージング設定で指定したドメインに表示されます。

可視性

[一般的なヘルプ(General Help)]または[最新情報(What’s New)]をオンにすると、ガイドセンターが表示されます。[一般的なヘルプ]は、デザイナーでガイドを編集するときに、[アクティベーション(Activation)]タブで「ガイドセンター」にチェックが入っているガイドを一覧表示します。ガイドセンターのコンテンツウィンドウに検索バーを追加して、ユーザーがガイドを検索できる[検索]を有効にすることもできます。

 

注:ガイドセンターの検索は、アクティベーションタイプが「ガイドセンター」に設定されているガイドに限定されます。

 

「最新情報」は、リリースノートをお客様にお知らせする手段として使えます。このセクションが有効な場合、「最新情報」タイプのガイドを使用して、ユーザーに新しい通知を作成できます。未読の「最新情報」ガイドがある場合は、ガイドセンターで通知番号が赤く表示されます。

 

注:「最新情報」を使用できるのは、エージェントのバージョン1.6.0以降を使用している場合だけです。

 

スタイル

centerStyle.png

テンプレート

アコーディオンテンプレートでガイドセンターのコンテンツセクションを展開可能なメニューとして表示することも、[カスタム(Custom)]テンプレートを選択することもできます。[カスタム]テンプレートを選択すると、HTML、CSS、およびJavaScriptにフルアクセスできます。コードを変更するには、[コードの編集(Edit Code)]をクリックします。

サイズ

一覧表示された[幅と高さ(Width and Height)]のプロパティを使って幅と高さを操作し、ガイドセンターのコンテンツウィンドウのサイズを調整します。

アクティベーション

centerActivation.png

ガイドセンターは、Pendoが生成するバッジによる起動や、アプリケーション内の既存の要素へのアタッチが可能です。後者の方法を使用する場合、アプリのターゲット要素をクリックすると、ガイドセンターのコンテンツウィンドウを表示した後に非表示にすることができます。

 

注:[既存のページ要素から起動(Launch Via Existing Page Element)]を使用できるのは、エージェントのバージョン1.6.0以降を使用している場合だけです。

 

バッジの詳細

[バッジによる起動(Launch Via Badge)]を使用する場合は、一般的な標識アイコン、チェックマークアイコンから選択するか、お客様独自のカスタム画像を追加します。色の入力フィールドをクリックして、カラーピッカーを表示します。これを使用して、提供されている2つのバッジアイコンの色を変更できます。

バッジは、アプリケーションの右下、左下、または右上に表示するように設定できます。ページをスクロールしても、バッジは同じ静的位置に表示されます。

デバイスのタイプ

特定のデバイスでだけガイドセンターを表示する場合は、[すべてのデバイスに表示(Show on all devices)]、[デスクトップとタブレットのみに表示(Show on Desktop and Tablets only)]、または[スマートフォンでのみ表示(Show on mobile phones only)]の中から、目的のデバイスを選択します。

ガイドセンターへのガイド追加

新規にガイドを作成する場合、または既存のガイドを編集する場合は、[アクティベーション(Activation)]タブのガイドセンターを使用してガイドをアクティブに設定できます。

guideActivation.png

表示基準

[最新情報]セクションが有効になっている場合は、コンテンツや環境(本番、ステージング)に関係なく、常にガイドセンターが表示されます。それ以外の場合、ガイドセンターは、以下のガイド条件を満たす訪問者にのみ表示します。

  • ガイドのアクティベーションが、「ガイドセンター」アクティベーションメソッドを含む
  • 訪問者がガイドセグメントに含まれる
  • ページがガイドの最初(または唯一)のステップの場所に一致する
  • マッチした要素が見える(該当する場合)

訪問者が、ガイドセンターでアクティベートしたガイドを表示するために必要な条件を満たしていない場合、ガイドセンターは表示されません。

カスタマイズ

 

注:ガイドセンターを大幅にカスタマイズするには、フロントエンドの開発が必要です。カスタマイズプロジェクトでPendoと一緒に作業することに関心がある場合は、弊社のプロフェッショナルサービスチーム(services@pendo.io)までご連絡ください。

 

Pendoガイドと同様、ガイドセンターはすべてカスタマイズ可能です。HTML、CSS、およびJavaScriptにアクセスすると、ガイドセンターのコンテンツと外観を変更したり、アプリケーション内でのレンダリングの方法、タイミング、および場所を調整したりできます。このコードにアクセスするにはガイドセンターの設定の[スタイル(Style)]で[カスタム(Custom)]を選択します。

カスタマイズすることで、アプリケーション内で1つのヘルプセンターに対して、追加のドキュメントおよびサポート資料へのリンクをガイドに組み合わせることができます。たとえば、マルチタブレイアウトを使用すれば、ガイドコンテンツを他のサポート資料から分離できます。

launcherfinal.png

また、サードパーティのライブチャットサービスを組み込んで、ユーザーが営業やサポートに直接質問できるようにすることも、単にサポートデスクへの連絡用メールアドレスや電話番号を含めることもできます。また、カスタマイズすることで、ガイドセンターを国際化して、異なるロケールのユーザーにローカライズしたコンテンツを表示することもできます。幅広いカスタマイズと柔軟なコンテンツで、ガイドセンターをアプリケーションの統合要素にすることができます。

位置の調整

ガイドセンターのバッジとコンテンツウィンドウを再配置することができます。ウィンドウは静的な位置にレンダリングされます。そのため、バッジアイコンを移動したときには、ウィンドウも調整する必要があります。

ガイドセンターは、もともとは[グローバル設定(Global Settings)](ガイドデザイナーの場合は右上)> [ガイドセンター(Guide Center)]で選択したオプションに応じて、ウィンドウの右下、右上、または左下に配置されます。

グローバル設定に[カスタムCSS(Custom CSS)]を追加すると、より明確に位置を調整できます。

[グローバルCSS(Global CSS)]の下に、カスタムCSSを追加する機能が表示されます。

コード内の[ガイドセンター]スタイル設定の下に、次のフィールドが表示されます。

._pendo-launcher-badge_ {
}

._pendo-launcher_ {
}
 

[ガイドセンター]ウィンドウと、ウィンドウの右下にあるバッジをオフセットして、次のフィールドを追加します。

._pendo-launcher-badge_ {
bottom: 10px;
right: 10px;
}

._pendo-launcher_ {
 bottom: 52px;
 right: -10px;
}

次に、下、上、右、および左の値を変更して、ガイドセンターを表示したい位置を指定します。