1. Pendoヘルプセンター
  2. 分析
  3. ダッシュボード

埋め込みiframeコードウィジェット

最終更新日:

埋め込みiframeコードウィジェットを使用すると、任意のPendoダッシュボードにiframeコンテンツを追加して表示できます。外部ソースからの詳細な情報を含めて、プロダクトデータにコンテキストを追加できます。デザインツールやコラボレーションツールなどの多くのアプリは、コンテンツを共有するための埋め込みコードを提供しています。埋め込みiframeコードウィジェットを使用すると、インタラクティブなコンテンツ、ビジュアライゼーション、ビデオなどをPendoダッシュボードに埋め込むことができ、Pendoのデータにコンテキストを追加したり、コラボレーションやインスピレーションの機会を増やすことができます。

埋め込みウィジェットで使用するコードは、<iframe>タグで囲まれたHTMLで、コードに記載されたsrc URLでアクセスできるようにしてください。ほとんどのサードパーティツールでは、共有オプションにこのコードが含まれています。このコードをそのままウィジェットにコピー＆ペーストすれば、ダッシュボード上で適切に表示されるようにPendoが必要な調整を実行します。

Pendoダッシュボードウィジェットに埋め込まれたWhimsicalワイヤフレームの例

DemoEmbedWidget.png

 

要件

  • Pendoユーザーなら誰でもダッシュボードに埋め込みiframeウィジェットを追加可能です
  • 埋め込みコードはHTML iframe要素である必要があります

埋め込みiframeコードウィジェットの設定

  • ダッシュボードに埋め込みコードウィジェットを追加して、iframeの設定を開始します。AddEmbedWidgetFlow.png

 

iframeウィジェットの編集

1. ウィジェットの名前を編集します。iframeの内容がわかりやすいカスタム名を追加します。

EditEmbedWidget.png

 

2. 追加するコンテンツの埋め込みコードを検索します。通常サードパーティアプリでは、共有ボタンや埋め込みボタンをクリックした後に表示されます。

Whimsicalの例                     YouTubeの例

WhimsicalEmbedButton.png     YoutubeEmbedButton.png

ヒント：アプリやその他のツールから独自のiframeを作成できる場合は、独自のカスタムコンテンツをPendoダッシュボードに追加できます。特定のコンテンツソースに限定されません。これらは一般的な例に過ぎません。

 

3. <iframe>の埋め込みコード全体をコピーして、埋め込みコードフィールドに貼り付けます。Pendoはスタイルやサイズを調整して、ウィジェット内のiframeをレンダリングします。埋め込みコードには最低限src="URL of iframe"を含める必要があります。埋め込みコードが期待される<iframe>HTMLタグで囲まれていない場合、Pendoは自動的にiframeとして読み込みます。

EditwithCode.png

 

4. ［プレビューを表示（View Preview）］を選択して、iframeのコードをテストします。コードにエラーがない場合は、［ウィジェットを編集（Edit Widge）］モーダルの小さなプレビューウィンドウにiframeが表示されます。読み込みができない場合は、エラーメッセージが表示されます。

5.［コードを表示（View Code）］を選択し、src URLとフォーマットを確認します。

EmbedPreviewError.png

 

6. ［保存］を選択すると、ダッシュボードにウィジェットが追加され、iframeが読み込まれます。埋め込みコードに二重引用符で囲まれたsrc URLがない場合、新しいウィジェット設定は保存できません。

AcmeDashboardExample.png

 

よくある質問

HTML埋め込みコードの読み込み中にエラーが発生しました。これを解決するにはどうすればよいですか？

  • 埋め込みiframeコードにタイプミスがある可能性があります。コードを確認して、もう一度試してください
  • src URLが有効なURLであり、二重引用符で囲まれていることを確認してください
  • サードパーティ製コードを使用している場合は、エラーを最小限に抑えるためにコードブロック全体をコピーしてくださいEmbedPreviewError.png

セキュリティ上の理由から、Pendoはウィジェットの埋め込みコードで特定の文字のみ使用を許可します。現在使用できる文字のリストは次のとおりです。

export const VALID_LINK_REGEX = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)$/i;

 

関連記事