ダッシュボードにiframeコンテンツを埋め込む

最終更新日:

埋め込みiFrameコードダッシュボードウィジェットを使用すると、任意のPendoダッシュボードにiFrameコンテンツを追加して表示できます。デザインツールやコラボレーションツールなど、さまざまなアプリが提供する外部ソースや埋め込みコードを活用することで、インタラクティブな要素、視覚化、動画などを使ってプロダクトデータを充実させ、ダッシュボードのコンテキストを強化することができます。

埋め込みウィジェットで使用するコードは、<iframe>タグで囲まれたHTMLで、コードに記載されたsrc URLでアクセスできるようにしてください。ほとんどのサードパーティツールでは、共有オプションにこのコードが含まれています。

  1. ウィジェットをダッシュボードに追加するには、ダッシュボードに移動し、ページの右上にある[+ウィジェットを追加(+ Add Widget)]を選択します。
  2. 利用可能なウィジェットのリストから[埋め込みiFrameコード(Embed iFrame Code)]を選択します。

    Dashboard_AddWidget_EmbedIframeCode.png

  3. ダッシュボードに表示されるウィジェットの名前を更新します。
  4. ご希望のソースから<iframe>埋め込みコード全体をコピーします。サードパーティのツールでは、通常、このコードは[共有(Share)]または[埋め込み(Embed)]オプション内にあります。これはHTML iframe要素である必要があります。ここでは、WhimsicalとYoutubeの2つの例を紹介します。

    WhimsicalEmbedButton.png YoutubeEmbedButton.png

  5. ウィジェット設定内の[埋め込みコード(Embed Code)]フィールドにコードを貼り付けます。Pendoはスタイルやサイズを調整して、ウィジェット内のiframeを正しくレンダリングします。埋め込みコードには最低限src="URL of iframe"を含める必要があります。埋め込みコードが期待される<iframe>HTMLタグで囲まれていない場合、Pendoは自動的にiframeとして読み込みます。
  6. 埋め込みコンテンツをプレビューし、[保存(Save)]を選択してウィジェットをダッシュボードに追加します。

    Dashboard_EmbedIframeCode_Save.png

HTML埋め込みコードを読み込んだ後、プレビューが期待通りに表示されない場合のよくある問題とトラブルシューティングの手順をいくつかご紹介します。

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

セキュリティ上の理由から、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;

一般的なダッシュボードとウィジェットの機能の詳細については、ダッシュボードを参照してください。

この記事は役に立ちましたか?
2人中2人がこの記事が役に立ったと言っています