埋め込みiframeコードウィジェットを使用すると、任意のPendoダッシュボードにiframeコンテンツを追加して表示できます。外部ソースからの詳細な情報を含めて、プロダクトデータにコンテキストを追加できます。デザインツールやコラボレーションツールなどの多くのアプリは、コンテンツを共有するための埋め込みコードを提供しています。埋め込みiframeコードウィジェットを使用すると、インタラクティブなコンテンツ、ビジュアライゼーション、ビデオなどをPendoダッシュボードに埋め込むことができ、Pendoのデータにコンテキストを追加したり、コラボレーションやインスピレーションの機会を増やすことができます。
埋め込みウィジェットで使用するコードは、<iframe>タグで囲まれたHTMLで、コードに記載されたsrc URLでアクセスできるようにしてください。ほとんどのサードパーティツールでは、共有オプションにこのコードが含まれています。このコードをそのままウィジェットにコピー＆ペーストすれば、ダッシュボード上で適切に表示されるようにPendoが必要な調整を実行します。
Pendoダッシュボードウィジェットに埋め込まれたWhimsicalワイヤフレームの例
要件
- Pendoユーザーなら誰でもダッシュボードに埋め込みiframeウィジェットを追加可能です
- 埋め込みコードはHTML iframe要素である必要があります
埋め込みiframeコードウィジェットの設定
-
ダッシュボードに埋め込みコードウィジェットを追加して、iframeの設定を開始します。
iframeウィジェットの編集
1. ウィジェットの名前を編集します。iframeの内容がわかりやすいカスタム名を追加します。
2. 追加するコンテンツの埋め込みコードを検索します。通常サードパーティアプリでは、共有ボタンや埋め込みボタンをクリックした後に表示されます。
Whimsicalの例 YouTubeの例
ヒント：アプリやその他のツールから独自のiframeを作成できる場合は、独自のカスタムコンテンツをPendoダッシュボードに追加できます。特定のコンテンツソースに限定されません。これらは一般的な例に過ぎません。
3. <iframe>の埋め込みコード全体をコピーして、埋め込みコードフィールドに貼り付けます。Pendoはスタイルやサイズを調整して、ウィジェット内のiframeをレンダリングします。埋め込みコードには最低限src="URL of iframe"を含める必要があります。埋め込みコードが期待される<iframe>HTMLタグで囲まれていない場合、Pendoは自動的にiframeとして読み込みます。
4. ［プレビューを表示（View Preview）］を選択して、iframeのコードをテストします。コードにエラーがない場合は、［ウィジェットを編集（Edit Widge）］モーダルの小さなプレビューウィンドウにiframeが表示されます。読み込みができない場合は、エラーメッセージが表示されます。
5.［コードを表示（View Code）］を選択し、src URLとフォーマットを確認します。
6. ［保存］を選択すると、ダッシュボードにウィジェットが追加され、iframeが読み込まれます。埋め込みコードに二重引用符で囲まれたsrc URLがない場合、新しいウィジェット設定は保存できません。
よくある質問
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;