埋め込み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コードにタイプミスがある可能性があります。コードを確認して、もう一度試してください
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;