アプリにフィードバックを追加する

Pendoスニペットをインストールした後、フィードバックは訪問者からのログインデータに加えてスニペットに設定されているメタデータを収集します。この時点で、チームは訪問者の代わりに投票とリクエストを追加することができます。次のステップは、訪問者にフィードバックへのアクセスを許可することです。訪問者が自分でサービスを開始することで、チームの負担を減らすことができます。

訪問者がフィードバックにアクセスする方法は、次の4つあります。

  1. ポータルビュー(デフォルトは全画面表示)
  2. Pendoリソースセンター
  3. ウィジェットビュー
  4. Intercom

これらのログイン方法では、訪問者がアプリにログインしており、Pendoが追跡している必要があります。PendoスニペットのJavascriptコードを使って訪問者を認証してフィードバックアプリにリダイレクトすれば、追加のパスワード入力や認証が不要になります。

1.ポータルビュー(デフォルトは全画面表示)

ポータルビューを使用するには、訪問者がクリックしてフィードバックにアクセスできるようにリンクやボタンなどをアプリに追加する必要があります。

現在のページにフィードバックを読み込むには、次を使用します。

<a href="#" onclick="pendo.feedback.loginAndRedirect()">SuggestFeatures</a>

または、フィードバックを新規タブにロードするには、次を使用します。

<a href="#" target="_blank" onclick="pendo.feedback.loginAndRedirect({anchor: this});return false;">Suggest Features</a>

訪問者への表示

以下はフィードバックボタンの名前を[プロダクトフィードバック(Product Feedback)]とした場合のインストール例です。

mceclip0.png

訪問者が[プロダクトフィードバック]ボタンをクリックすると、同じページまたは新しいページにフィードバックポータルが表示されます。デフォルトでは、URLはfeedback.pendo.ioと表示されますが、訪問者がアプリから離脱しないような外観にカスタマイズできます。

ポータルビューは、チームメンバーが参照するフィードバックアプリに似ていますが、左側のナビゲーションバーに表示されるオプションはそれよりも少なくなっています。

mceclip1.png

2.Pendoリソースセンター

Pendoリソースセンターを利用している場合、訪問者ははじめからプロダクトに関する質問やコミュニケーションの目的で訪れている可能性が高いため、フィードバックを配置するのに最適です。リソースセンターにフィードバックをインストールする方法は次のとおりです。

1.認証トークンを生成する

フィードバックアプリで、[設定(Settings)]>[プロダクト設定(Product Settings)]> [インテグレーション(Integrations)]と移動します。Pendoリソースセンターのドロップダウンをクリックし、[新しい認証トークンの生成(Generate New Auth Token)]をクリックして、生成されたトークンをコピーします。

mceclip2.png

2.認証トークンを設定する

プロダクトスイッチャーを使用してインサイトとガイダンスのアプリに戻ります

mceclip3.png

[設定]>[インテグレーション]と移動します。
integrations.png

[インテグレーション]ページの一番下までスクロールします。[Pendoフィードバック(Pendo Feedback)]パネルが[ユーザーフィードバック(User Feedback)]セクションの下にあります。[Pendoフィードバック]パネルをクリックします。
feedback_panel.png

[Pendoフィードバック]パネルを開いたら、ステージング環境と本番環境にPendoフィードバックの認証トークンを設定する必要があります。

設定するには、Pendoフィードバックの認証トークンを[認証トークン(Auth Token)]フィールドに貼り付けます。インテグレーションのタイトルと説明も追加します。
mceclip4.png

3.デフォルトビューを選択する

[フィードバックの共有(Share your Feedback)]をクリックした後に訪問者を直接リクエストフォームに移動させる場合は、[リクエスト送信フォーム(Request submission form)]を選択します。訪問者に自分のリクエスト、他の訪問者のリクエスト、および最新リリースについての概要を表示する場合は[ダッシュボード(Dashboard)]を選択します。

mceclip0.png

[保存(Save)]をクリックし、本番環境に対しても同様の設定を行います。

4.フロントエンドでフィードバックインテグレーションを有効化する

[ガイド(Guides)]>[リソースセンター(Resource Center)]の順に移動します。
Guides.png
リソースセンターの名前をクリックし、[モジュールを追加(Add Module)]をクリックします。
rc_list.png
[Receptive]パネル(注:この名称はPendoフィードバックに変更予定)にカーソルを合わせ、[モジュールを選択(Select Module)]をクリックします。
receptive_panel.png
左下の[モジュールを追加]ボタンをクリックすると、リソースセンターのプレビューに[Pendoフィードバック]が表示されます。

次に、ステージング環境にプッシュし、準備ができたら本番環境にプッシュします。

訪問者への表示

以下はPendoリソースセンターに実装したフィードバックのインストール例です。

mceclip5.png

[フィードバックの共有]をクリックすると、フィードバックリクエストフォームまたはリソースセンター内の訪問者ダッシュボードが開きます。

mceclip0.png

ミニダッシュボードビュー

mceclip6.png

リクエストフォームビュー

3.ウィジェットビュー

警告:デフォルトのウィジェットビューでは、すべての訪問者がフィードバックに即時アクセスできます。ウィジェットは、アプリ内でPendoスニペットがインストールされているページすべてに表示されます。ウィジェットビューを有効にするには「ベンダー設定」権限が必要なため、社内ユーザーに適切な権限を割り当ててください。権限の詳細はこちらをご覧ください。

左側のナビゲーションバーから[設定]>[プロダクト設定]に移動し、左側のメニューから[訪問者ビュー]を選択します。

デフォルトでは、アプリの右側に[リクエストの提案(Suggest a Request)]というタブが表示されます。以下では、トグル/ボタンの位置、色、および表記を変更できます(インストール例については、以下の「訪問者への表示」を参照してください)。

[カスタムトグル(Custom toggle)]の下のオプションを選択すれば、独自のリンク/ボタンでウィジェットを開くこともできます。

mceclip0.png

[カスタムトグル]のボックスをオンにし、表示されるクリックハンドラを使用して、フィードバックウィジェットのトリガー元となる場所をカスタマイズします。

[保存]をクリックして更新を有効にします。

訪問者への表示

デフォルトでは、アプリの右側に[リクエストの提案]というタブが表示されます。以下のインストール例をご覧ください。

mceclip1.png

訪問者がアプリ内の[リクエストの提案]タブをクリックすると、フィードバックがインラインフレームに表示されます。ここから、顧客が新しいリクエストを簡単に追加したり、既存のフィードバックに投票したりできます。または、ポータルビューに切り替えたい場合は、右上の[最大化]ボタンをクリックすると、フィードバックポータルが全画面表示されます。

mceclip2.png

4.Intercom

Intercomウィジェットにデフォルト表示されるフィードバックボタンを追加したり、訪問者が「アイデアがあります」や「フィードバックがあります」といったリクエストのようなものを入力した時にフィードバックリンクを送信するようにAnswer Botを設定したりできます。

また、チームが訪問者との会話にIntercomをよく使用している場合は、フィードバックリンクを手動でトリガーしたり、既存のリクエストを検索して訪問者を誘導したりできます。

mceclip3.png

フィードバックをIntercomと統合する場合は、この文書の指示に従ってください。

訪問者への表示

以下はIntercomメッセンジャーのホーム画面にフィードバックボタンを実装する場合のインストール例です。

mceclip4.png

よくある質問

訪問者ビューはどの程度カスタマイズできますか?

アプリヘッダーにロゴを追加したり、独自のファビコンをアップロードしたりできます。また、フィードバック全体のナビゲーションバーやプライマリーボタンの色などのプライマリーカラーをカスタマイズできます。方法についてはこちらをご覧ください。