Feature / Integration 08

FW JS 管理側 公開側

埋め込みタグ

外部サイトにフォーム、予約、問い合わせ、ダウンロード画面を埋め込みます。

埋め込みタグは、既存サイトやLPの中に、FBPで作ったフォーム、予約、問い合わせ、資料ダウンロードなどの小さな業務画面を差し込むための機能です。Roundtableでは「どの外部ページに」「どの入力や操作を」「どの公開条件で」出すかを先にそろえると、発注者、実装者、AIに指示する人が同じ前提で公開導線を設計できます。

埋め込みタグ管理で設置先、用途、公開状態、フォームプレビューを確認している業務画面例

この機能でできること

外部サイトに貼り付けるタグを発行し、公開フォーム、予約受付、問い合わせ、資料ダウンロード、簡易診断、申込ステップなどをFBP側の画面として表示できます。管理側では埋め込みキー、用途、設置先、許可するorigin、公開状態、入力完了件数、最終表示日時を確認し、公開側では外部サイトの一部として入力や完了画面を表示できます。

既存サイトを作り直さず、必要な業務画面だけを差し込めます。 LPや企業サイトのデザインは残したまま、問い合わせ受付、予約、資料請求、ダウンロード認証などの動く部分をFBPで管理できます。

よくある利用場面

既存サイトに問い合わせフォームを置く コーポレートサイトやLPにタグを貼り、問い合わせ内容をFBPの管理画面、通知、対応履歴へつなげます。
予約や申込の入口だけを外部ページへ出す イベント申込、個別相談予約、体験予約などを外部ページに埋め込み、完了後はDB更新やメール通知まで連動します。
資料ダウンロードや限定公開画面を差し込む メール認証、プロフィール入力、ファイル選択、ダウンロード完了などの小さな業務フローを外部サイト内で完結させます。

プロンプト例

埋め込み先、表示する画面、入力ステップ、送信後の処理、許可origin、タグ発行画面をまとめて伝えると、公開範囲と運用方法を決めやすくなります。

プロンプト 既存のサービス紹介LPに貼り付けられる問い合わせフォームの埋め込みタグを作ってください。管理画面では埋め込みキー、設置先名、許可origin、公開状態、送信件数、最終送信日時を確認できるようにしてください。埋め込み内はメールアドレス確認、問い合わせ入力、確認、完了のステップに分け、ステップ移動は埋め込み領域だけを差し替えてください。送信後は問い合わせDBに保存し、顧客自動返信と管理者通知を送ってください。タグやテンプレートに秘密情報や固定の接続先は書かず、必要なURLは生成関数や設定値から扱ってください。

この機能を使うときのポイント

設置先の確認どのドメインやページに貼るかを確認し、必要なら許可originや公開停止の条件を決めます。
表示範囲外部サイト内で見せる項目、保存する項目、内部メモや管理用項目を出さない範囲を分けます。
ステップ遷移入力、確認、完了などを埋め込み枠の中だけで切り替え、外部ページ全体を動かさないようにします。
通知とログ送信後の自動返信、管理者通知、受付履歴、エラー確認まで業務運用としてつなげます。

この機能を実装するときのコツ

埋め込み画面は、外部ページの中で動くため、通常の公開ページよりも状態保持と差し替え範囲を小さく設計します。初期表示は埋め込み用の外枠テンプレートを返し、メール確認、入力、確認、完了などの段階遷移では固定したラッパー要素へ部分テンプレートを差し替えます。セッションやCookieに依存しすぎると外部サイトやiframe条件で不安定になりやすいため、hidden、署名付きtoken、DB一時保存などで状態を引き回します。入力エラーはフォーム全体を再描画せず、該当項目へエラーを返す形にすると、埋め込み先のJavaScriptとの干渉を減らせます。