埋め込みiFrameコードダッシュボードウィジェットを使用すると、任意のPendoダッシュボードにiFrameコンテンツを追加して表示できます。デザインツールやコラボレーションツールなど、さまざまなアプリが提供する外部ソースや埋め込みコードを活用することで、インタラクティブな要素、視覚化、動画などを使ってプロダクトデータを充実させ、ダッシュボードのコンテキストを強化することができます。
埋め込みウィジェットで使用するコードは、<iframe>タグで囲まれたHTMLで、コードに記載されたsrc URLでアクセスできるようにしてください。ほとんどのサードパーティツールでは、共有オプションにこのコードが含まれています。
- ウィジェットをダッシュボードに追加するには、ダッシュボードに移動し、ページの右上にある［+ウィジェットを追加（+ Add Widget）］を選択します。
- 利用可能なウィジェットのリストから［埋め込みiFrameコード（Embed iFrame Code）］を選択します。
- ダッシュボードに表示されるウィジェットの名前を更新します。
- ご希望のソースから
<iframe>埋め込みコード全体をコピーします。サードパーティのツールでは、通常、このコードは［共有（Share）］または［埋め込み（Embed）］オプション内にあります。これはHTML iframe要素である必要があります。ここでは、WhimsicalとYoutubeの2つの例を紹介します。
- ウィジェット設定内の［埋め込みコード（Embed Code）］フィールドにコードを貼り付けます。Pendoはスタイルやサイズを調整して、ウィジェット内のiframeを正しくレンダリングします。埋め込みコードには最低限
src="URL of iframe"を含める必要があります。埋め込みコードが期待される<iframe>HTMLタグで囲まれていない場合、Pendoは自動的にiframeとして読み込みます。 - 埋め込みコンテンツをプレビューし、［保存（Save）］を選択してウィジェットをダッシュボードに追加します。
HTML埋め込みコードを読み込んだ後、プレビューが期待通りに表示されない場合のよくある問題とトラブルシューティングの手順をいくつかご紹介します。
- 埋め込みiframeコードにタイプミスがある可能性があります。正しいコードをコピーして貼り付けたことを確認してから、もう一度お試しください。
srcURLが有効な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;
一般的なダッシュボードとウィジェットの機能の詳細については、ダッシュボードを参照してください。